Cascade Text

A smooth line-by-line text reveal animation.

ReactHTML
React
Open in
Loading...

Installation

pnpm dlx shadcn@latest add https://atlasui.dev/r/cascade-text.json

We recommend pairing CascadeText with smooth scroll like lenis for the best effect.

Usage

import { CascadeText } from "@/components/cascade-text";
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>
<CascadeText>
  <h1>Your text here</h1>
</CascadeText>
 
<CascadeText>
  <p>Your description here</p>
</CascadeText>
 
<CascadeText>
  {/* Pass any text element */}
</CascadeText>

Props

PropTypeDefaultDescription
childrenReact.ReactNode-The text content to animate
animateOnScrollbooleantrueControls when the animation starts. When true, the animation triggers as the element enters the viewport (around the lower 75% of the screen). When false, it plays immediately on mount.
delaynumber0Delay before the animation starts
Hacker TextLetter Swap