Scroll Based Text Reveal Html Demo

{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "scroll-based-text-reveal-html-demo", "title": "Scroll Based Text Reveal", "description": "Example of text reveal effect which animates the opacity of the text as you scroll using HTML, CSS, JavaScript and Motion.", "dependencies": [ "motion" ], "registryDependencies": [ "https://atlasui.dev/r/scroll-based-text-reveal-html.json" ], "files": [ { "path": "registry/html/examples/scroll-based-text-reveal-html-demo/index.html", "content": "\n\n \n \n \n Scroll Based Text 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-text-reveal/index.html" }, { "path": "registry/html/examples/scroll-based-text-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\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 line-height: 1;\n font-weight: bold;\n text-align: center;\n opacity: 0;\n max-width: 64rem;\n}\n", "type": "registry:file", "target": "~/scroll-based-text-reveal/style.css" }, { "path": "registry/html/examples/scroll-based-text-reveal-html-demo/script.js", "content": "import { animate, scroll } from \"motion\";\n\nconst revealText = document.getElementById(\"reveal-text\");\n\nscroll((progress) => animate(revealText, { opacity: progress }), {\n target: revealText,\n offset: [\"start 0.8\", \"start 0.3\"],\n});\n", "type": "registry:file", "target": "~/scroll-based-text-reveal/script.js" } ], "meta": { "framework": "html" }, "type": "registry:example" }