Design System / 04

Motion

Motion is where this template earns its craft: two curves, a tight duration scale, and micro-reactions that acknowledge the cursor without performing for it.

Principles

  • Two entrance curves and one exit curve. Enter on ease-out, exit on ease-in — and an exit is never slower than its entrance.
  • Interaction feedback stays at or under 400ms; ambient media runs to 700ms; only large surfaces may use the 1200ms surface tier.
  • Interaction dims, never highlights: the hover ladder is 60 / 30 / 15% presence.
  • Animate transform and opacity only — everything is compositor-friendly and transform-gpu hinted.
  • Every animation ships with a prefers-reduced-motion fallback that lands on the final state.

Easing

Ease out quint

--ease-out-quint

cubic-bezier(0.22, 1, 0.36, 1)

Entrances and feedback: button lifts, reveals, crossfades. Fast start, long settle.

Ease in-out quart

--ease-in-out-quart

cubic-bezier(0.76, 0, 0.24, 1)

Choreography: menu panel, preloader wipe, nav label slide. Deliberate in, decisive out.

Ease in quad (exit)

--ease-in-quad

cubic-bezier(0.55, 0.085, 0.68, 0.53)

Exits only: fade-outs, underline wipe-off, dismissals. Accelerates away.

Duration scale

Duration scale

200ms

220ms

250ms

300ms

380ms

480ms

700ms

900ms

1200ms

200ms — Hover feedback: buttons, links

220ms — Micro reveal on entry

250ms — Nav label slide, underline wipe

300ms — Content reveals, image zoom

380ms — Mobile menu panel

480ms — Preloader exit wipe

700ms — Slideshow crossfade, photo clean-up

900ms — Mask reveals, rule draws

1200ms — Surface tier: drawers, large panels

Micro-interactions

Live specimens — hover, focus, and press them.

Link slide

Lorem Ipsum

The label exits upward while its twin enters — 250ms, ease-in-out-quart, clipped to one line-height.

One-pixel lift

Hover inverts the fill and lifts 1px; press pushes 1px down. 200ms, ease-out-quint.

Underlined link

Lorem Ipsum

Directional wipe: the hairline exits right on the exit curve while its replacement enters from the left — 250ms each way.

Photo rest

Photograph resting dimmed

Photography rests at grayscale 15% / brightness 85% and cleans up on attention — 750ms, entry curve.

Image zoom

Photograph by Hongjun Wu

Cards scale imagery to 1.02 inside an overflow-hidden frame — 300ms, ease-out-quint.

Choreography

Mask reveal

Lorem Ipsum Dolor Sit

Words rise out of clipped wrappers — 900ms entry curve, 30ms stagger. The display-scale sibling of the nav link slide.

Rule draw

Hairlines draw themselves from the left on entry — 900ms, entry curve, staggerable.

Decode

Lorem Ipsum 2026

Characters lock in left to right over 900ms — the terminal variant of a mask reveal, charset restricted to numerals and hairline glyphs. For labels and counters, never body text.

Stagger

Lorem

Ipsum

Dolor

Sit Amet

150ms lead-in, then +28ms per item. Same recipe as the mobile menu.

Micro reveal

Entering content

Fades in while rising 4px. 220ms, ease-out-quint, both directions filled.

Preloader counter

Warming Up

0%

0% → 100% over 950ms with a cubic ease-out, then the overlay wipes upward (480ms, ease-in-out-quart).

Ambient media

The home slideshow crossfades every 6s (1s fade, ease-out-quint); the menu slideshow hard-cuts every 2s. Both pause when the tab is hidden and preload the next frame during idle time. Lenis smooths wheel scrolling at lerp 0.14 and stands down on touch devices.

Accessibility

  • prefers-reduced-motion: reduce disables the preloader, Lenis, all keyframe animation, and swaps transitions for instant state changes.
  • Hover-only affordances always have a focus-visible twin.
  • Timers (slideshows) stop when document.hidden — motion never runs unwatched.