Motion

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.