The mark carves in and retracts as you scroll
Scroll the phone. At the top you get the full lockup. Scroll down and the wordmark retracts letter by letter, last letter first, until only the mark is left in a glass capsule. Keep reading downward and the mark retracts too, then the capsule slips away. Nudge back up and it returns and the mark carves itself again. Tap the logo to jump to the top.
Visual identity: three forms
Movement identity: four rules
States and triggers
scrubbedCompactpast 160 pt,
still going downHidden↑ 24 pt up, or
back above 160 ptCompact
| Transition | Trigger | How it moves | Timing |
|---|---|---|---|
| Launch | Screen first appears | Mark carves (stave, then branches), then S·A·G·A carve in order | 280 ms + 4 × 90 ms |
| Lockup → Compact | Scroll 0 → 72 pt | Scrubbed to your finger: letters retract last-first (A, G, A, S), 18 pt of scroll each; capsule fades in behind the mark | scroll-linked |
| Compact → Hidden | Past 160 pt and 12 pt more downward | Mark retracts (second branch, then the stave), then the capsule lifts 12 pt and clears | 180 ms + 120 ms |
| Hidden → Compact | 24 pt of upward scroll, or above 160 pt | Capsule settles in, then the mark carves (stave first) | 120 ms + 280 ms |
| Compact → Lockup | Scroll back to the top | Scrubbed: letters carve back S, A, G, A | scroll-linked |
| Tap logo | Any state | Scrolls to top; the lockup rebuilds on the way | system scroll |
How it maps to the app
One useAnimatedScrollHandler in Page drives everything on the UI thread. The scrubbed collapse sets each letter's strokeDashoffset directly from the scroll offset; the hide and reveal reuse CarvedRune with DURATION and the CHISEL curve. It replaces the plain floating bar on tab screens. With Reduce Motion, letters and the mark switch instantly and the capsule cross-fades. No haptics: the logo is ambient, and haptics stay reserved for decisions.