# Motion — Unless design system

Foundations

# Motion
  [Easing](/en/design/foundations/motion/)[Duration](/en/design/foundations/motion/duration/)[Reduced motion](/en/design/foundations/motion/reduced-motion/)[Logo lockup](/en/design/foundations/motion/logo-lockup/)[Examples](/en/design/foundations/motion/examples/)
## 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 · Reduced motion](/en/design/foundations/motion/reduced-motion/)     [Motion · Examples](/en/design/foundations/motion/examples/)