This component no longer exists. It was in atlas-ui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Cascade Text
atlas-ui/cascade-text-htmlRemovedUtility
A smooth line-by-line text reveal animation built with HTML, CSS, JavaScript and Motion.
Install it
npx shadcn@latest add https://atlasui.dev/r/cascade-text-html.jsonSource
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>Cascade Text - Atlas UI</title>7 <link rel="stylesheet" href="style.css" />8 </head>9 <body>10 <main>11 <h1 data-cascade-text>Cascade Text: Designed to Move, Not Distract.</h1>1213 <p data-cascade-text data-delay="0.2">14 You could reveal everything instantly. You could also microwave a steak.15 We chose patience. Because good interfaces, like good food, deserve a16 little timing and a little respect.17 </p>1819 <p data-cascade-text data-delay="0.4">20 Cascade Text brings in each line with just enough drama to feel21 intentional, and just enough restraint to keep it classy. No22 attention-seeking theatrics. Just a steady, confident rise that feels23 composed from start to finish.24 </p>2526 <p data-cascade-text data-delay="0.6">27 It's smooth. It's subtle. It doesn't beg for attention. It just quietly28 says, "Yeah… this UI knows what it's doing." Because when motion is done29 right, users don't notice the animation. They notice how effortless30 everything feels. And that quiet effortlessness? That's the whole point.31 </p>3233 <p data-cascade-text data-delay="0.8">34 I'm quite surprised that you are still reading this. But I'm glad you35 made it this far. So go ahead and explore the rest of the Atlas UI36 components.37 </p>38 </main>39 </body>4041 <script type="module" src="script.js"></script>42</html>
What it pulls in
npm packages
