Docs
Cascade Text
A smooth line-by-line text reveal animation.
We recommend pairing CascadeText with smooth scroll like lenis for the best effect.
import { CascadeText } from "@/components/cascade-text";<CascadeText>
<h1>Your text here</h1>
</CascadeText>
<CascadeText>
<p>Your description here</p>
</CascadeText>
<CascadeText>
{/* Pass any text element */}
</CascadeText>You could reveal everything instantly. You could also microwave a steak. We chose patience. Because good interfaces, like good food, deserve a little timing and a little respect.
Cascade Text brings in each line with just enough drama to feel intentional, and just enough restraint to keep it classy. No attention-seeking theatrics. Just a steady, confident rise that feels composed from start to finish.
It's smooth. It's subtle. It doesn't beg for attention. It just quietly says, “Yeah… this UI knows what it's doing.” Because when motion is done right, users don't notice the animation. They notice how effortless everything feels. And that quiet effortlessness? That's the whole point.
I'm quite surprised that you are still reading this. But I'm glad you made it this far. So go ahead and explore the rest of the Atlas UI components.