Next Iconography

Motion

Easing Duration Reduced motion Logo lockup Examples

Easing curves — standard + emphasised

The two cubic-bezier curves the system reaches for, and where each one belongs. Hovers + chrome toggles use the standard curve; page-level reveals use emphasised.

  • --ease-standard: cubic-bezier(0.2, 0, 0, 1) - default for entrances, hovers.
  • --ease-emphasized: cubic-bezier(0.3, 0, 0, 1) - page-level transitions, hero reveals.

Duration tokens — fast, base, slow

Three duration values cover every animation the system ships. Pick by transition kind, not by feel.

  • --motion-fast: 120ms - hover, focus, micro state.
  • --motion-base: 200ms - drawer / tab toggles, dropdowns.
  • --motion-slow: 320ms - page-level reveals, agent typing.

Honouring prefers-reduced-motion

The rule every animated component on the site follows: never let motion carry meaning, and always offer a stable steady-state frame for visitors who opt out of animation.

Every animated component (DemoAgent, AgentLoop, monotile drift) checks prefers-reduced-motion: reduce and either freezes on the steady-state frame or drops the keyframe entirely. No motion is load-bearing for meaning.

Logo lockup — typewriter on scroll

The site nav's lockup contracts on scroll: the icon mark stays put while the six wordmark letters fade out right-to-left, leaving just the mark. Scrolling back to the top types them back in left-to-right. The two delays are direction-aware - each state's own transition-delay governs the animation INTO that state, so the staircase reverses correctly.

  • Property: opacity on each .logo-letter path (mark geometry never moves).
  • Duration: 140ms per letter (ease).
  • Outgoing stagger (scrolled): 280ms head-start so the nav's glass / colour transition lands first, then +100ms per letter going right→left (positions 6 → 5 → 4 → 3 → 2 → 1 at 280, 380, 480, 580, 680, 780 ms).
  • Incoming stagger (returning to top): 0ms base, then +100ms per letter going left→right (positions 1 → 2 → 3 → 4 → 5 → 6 at 0, 100, 200, 300, 400, 500 ms).
  • Reduced motion: respects prefers-reduced-motion: reduce - letters jump between states with no stagger.

Live demo

Tap the button to fold / unfold the wordmark. Mirrors what the site nav does when you scroll past 8 px.

Motion in the wild — three live references

Where to look on the live site to see the easing + duration tokens applied in real components.