Micro-interactions (UI Motion)

Small, functional motion that makes an interface feel responsive and alive: hover/press/focus feedback, toggles, toasts, drawers, and list/layout animation. The goal is feedback and continuity, not decoration.

When to use

Hover/press/focus feedback; toggles, checkboxes, like/heart buttons

Toasts/snackbars, drawers, modals, tooltips, accordions (enter/exit)

List add/remove/reorder; shared-element ("magic move") layout transitions

Loading → success → error state transitions

Principles (apply to all of it)

Duration: UI micro-interactions live in

100–250ms

. Anything over ~400ms feels laggy for a click response.

Animate

transform

and

opacity

only — they are GPU-composited (no layout/paint). Avoid animating

width/height/top/left

; use

scale

or layout animation instead.

Give

instant

press feedback:

scale: 0.96

on tap with a fast spring.

Asymmetric timing: enter slightly slower (ease-out), exit faster (ease-in). Things should arrive gracefully and leave promptly.

Respect

prefers-reduced-motion

gate non-essential motion; keep opacity changes, drop large movement. Easing defaults: ease-out for entrances cubic-bezier(0.16, 1, 0.3, 1) ; a tasteful overshoot is cubic-bezier(0.34, 1.56, 0.64, 1) ; standard move cubic-bezier(0.4, 0, 0.2, 1) . Show more Installs 1.2K Repository iart-ai/web-ani…n-skills GitHub Stars 27 First Seen Jun 23, 2026 Security Audits Gen Agent Trust Hub Pass Socket Pass Snyk Warn