Letter roll nav

Where it earns its place

Header navigation and primary buttons, where a small, consistent hover signature tells visitors the whole site was considered.

What we changed

• Made the roll a held state: hover or focus rolls to the platinum copy and leaving rolls back, instead of a one-shot roll that snaps home and blocks re-entry.
• Added keyboard focus as a trigger; the original only listened for mouse enter.
• Uses a tween with a fixed 22ms letter step rather than a bouncy spring, since any overshoot shows an empty gap in the clipped window.
• Built the example as a real studio header with an active-page marker, a rolling call-to-action and a short self-demo that stops at the first hover.
• Kept the core mechanism: two stacked copies per letter in a one-line window, moved with a left-to-right stagger.