Decoding Lando Norris' Navigation Bar
A sleek, layered text animation technique for modern interfaces. Let's break down how to rebuild it step-by-step.
The navigation bar on Lando Norris' website features a bold hover interaction. Instead of standard color fades, each character smoothly rolls upwards, revealing an identical seamless duplicate pushing up from beneath it.
Establishing the Setup
The core trick is a carefully positioned text-shadow. By defining an exact duplicate of the character exactly 1em below it, we establish a continuous rolling stream when we translate the element vertically.
Appending an identical character exactly 1em below.
<span className={cn(
"text-6xl font-bold leading-none inline-block",
""
)}>
S
</span>The Reveal
If we translate the element directly upward naturally, both the original text and its shadow become visible simultaneously. Surrounding the character in a wrapper with overflow: hidden creates a perfect mask. Only one character state can exist inside the visible frame at any time.
Restrict visibility so that only one letter shows.
Hover over
the letter
<div className={cn(
"flex justify-center cursor-pointer",
""
)}>
<span className="text-6xl font-bold [text-shadow:0_1em_#8eab05] ... hover:-translate-y-full">
S
</span>
</div>Adding Sequence
Applying a staggered transitionDelay on a group of individually mapped characters unlocks the fluid, wave-like cadence instead of moving everything rigidly as a block.
Delay each character's movement based on its index.
<div className="flex overflow-hidden group cursor-pointer">
{"STAGGER".split('').map((char, index) => (
<span
key={index}
className="text-6xl font-bold [text-shadow:0_1em_#8eab05] ... hover:-translate-y-full"
style={{ transitionDelay: `${index * 30ms}` }}
>
{char}
</span>
))}
</div>The Final Result
The final step is to combine these sequence techniques into fully mapped navigation links. By creating an array of strings, splitting them, and wrapping them in our animated container, we achieve the completed effect.