Tiny motions that improve clarity, not noise.
Micro-interactions communicate cause and effect. They help users understand what can be clicked, dragged, or typed, reducing hesitation and error.
Create motion tokens (e.g., `motion/fast`, `motion/slow`) and pick two or three easings you use everywhere. Short durations (120–240ms) are perceived as snappy and respectful.
Magnetic targets help steer users toward the right hit area. Hover cards preview helpful info without a click. In collaborative apps, ghost cursors convey presence without distraction.
Start with CSS transforms and opacity. Use WAAPI or GSAP for sequenced timelines. Handle input with Pointer Events and debounce expensive listeners.
Animate GPU-friendly properties only; respect reduced-motion and provide strong focus states so keyboard users aren’t disadvantaged by hover effects they can’t trigger.
Track time-to-task and error rate. Micro-interactions should improve clarity; if not, remove them. Less but better.