Scroll Based Word Reveal Html Demo

{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-based-word-reveal-html-demo", "title": "Scroll Based Word Reveal", "description": "Example of text reveal effect which progressively reveals text word by word as you scroll using HTML, CSS, JavaScript and Motion.", "dependencies": [ "motion" ], "registryDependencies": [ "https://atlasui.dev/r/scroll-based-word-reveal-html.json" ], "files": [ { "path": "registry/html/examples/scroll-based-word-reveal-html-demo/index.html", "content": "\n\n \n \n \n Scroll Based Word Reveal Html Demo - Atlas UI\n \n \n \n

Scroll to see magic :)

\n AtlasUI is an open-source library offering a suite of prebuilt animated\n components for React, Next.js, and Vanilla JS.\n

Loved it? Star us on GitHub!

\n \n\n \n\n", "type": "registry:file", "target": "~/scroll-based-word-reveal/index.html" }, { "path": "registry/html/examples/scroll-based-word-reveal-html-demo/style.css", "content": ":root {\n --background: light-dark(\n oklch(100% 0.00011 271.152),\n oklch(18.22% 0.00002 271.152)\n );\n --foreground: light-dark(\n oklch(18.22% 0.00002 271.152),\n oklch(98.511% 0.00011 271.152)\n );\n}\n\nhtml {\n color-scheme: light dark;\n}\n\nbody {\n margin: 0;\n padding: 0;\n min-height: 100vh;\n width: 100%;\n background: var(--background);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: var(--foreground);\n}\n\n.spacer {\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2rem;\n}\n\n.reveal-text {\n font-size: 3rem;\n font-weight: bold;\n text-align: center;\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 0.3rem;\n max-width: 64rem;\n}\n\n.word-container {\n position: relative;\n display: inline-block;\n}\n\n.word-shadow {\n font-size: 3rem;\n font-weight: bold;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n opacity: 0.1;\n pointer-events: none;\n}\n\n.word {\n font-size: 3rem;\n font-weight: bold;\n opacity: 0;\n display: inline-block;\n}\n", "type": "registry:file", "target": "~/scroll-based-word-reveal/style.css" }, { "path": "registry/html/examples/scroll-based-word-reveal-html-demo/script.js", "content": "import { animate, scroll, transform } from \"motion\";\n\nconst revealText = document.getElementById(\"reveal-text\");\n\nconst words = revealText.innerText.split(\" \");\nrevealText.innerHTML = words\n .map(\n (word) => `\n \n ${word}\n ${word}\n \n `\n )\n .join(\" \");\n\nconst wordSpans = document.querySelectorAll(\".word\");\n\nwordSpans.forEach((span) => {\n span.style.opacity = 0;\n});\n\nscroll(\n (progress) => {\n wordSpans.forEach((span, i) => {\n const start = i / wordSpans.length;\n const end = (start + i) / wordSpans.length;\n\n const opacity = transform(progress, [start, end], [0, 1]);\n\n span.style.opacity = opacity;\n });\n },\n {\n target: revealText,\n offset: [\"start 0.8\", \"start 0.3\"],\n }\n);\n", "type": "registry:file", "target": "~/scroll-based-word-reveal/script.js" } ], "meta": { "framework": "html" }, "type": "registry:example" }