Cascade Text

A smooth line-by-line text reveal animation.

Installation

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

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

Pass any text element with the data-cascade-text attribute to animate it.

<h1 data-cascade-text>Your text here</h1>
 
<p data-cascade-text>Your description here</p>

Data Attribute	Type	Default	Description
`data-cascade-text`	`string`	-	The text content to animate
`data-animate-on-scroll`	`boolean`	`true`	Controls 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.
`data-delay`	`number`	`0`	Delay before the animation starts

On This Page

Contribute