Scroll Based Word Reveal
atlas-ui/scroll-based-word-reveal-html-demoFreeExample
Example of text reveal effect which progressively reveals text word by word as you scroll using HTML, CSS, JavaScript and Motion.
Live preview
live · rendered by the registry
Rendered by atlas-ui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://atlasui.dev/r/scroll-based-word-reveal-html-demo.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>Scroll Based Word Reveal Html Demo - Atlas UI</title>7 <link rel="stylesheet" href="style.css" />8 </head>9 <body>10 <div class="spacer">Scroll to see magic :)</div>11 <p class="reveal-text" id="reveal-text">12 AtlasUI is an open-source library offering a suite of prebuilt animated13 components for React, Next.js, and Vanilla JS.14 </p>15 <div class="spacer">Loved it? Star us on GitHub!</div>16 </body>1718 <script type="module" src="script.js"></script>19</html>
What it pulls in
npm packages
Other registry items
Files it writes
More from atlas-ui
All 99 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Animated Mobile Navbar Demoanimated-mobile-navbar-demo | atlas-ui | Examples | Free | no deps | |
| Animated Mobile Navbaranimated-mobile-navbar-html-demo | atlas-ui | Examples | Free | 1 dep · 3 files | |
| Animated Mobile Navbar Side Exampleanimated-mobile-navbar-side-example | atlas-ui | Examples | Free | no deps | |
| Blend Mouse Trailer Demoblend-mouse-trailer-demo | atlas-ui | Examples | Free | no deps | |
| Blend Mouse Trailerblend-mouse-trailer-html-demo | atlas-ui | Examples | Free | no deps · 3 files | |
| Blob Mouse Trailer Demoblob-mouse-trailer-demo | atlas-ui | Examples | Free | no deps | |
| Blob Mouse Trailerblob-mouse-trailer-html-demo | atlas-ui | Examples | Free | no deps · 3 files | |
| Box Reveal Demobox-reveal-demo | atlas-ui | Examples | Free | no deps |
