{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "box-reveal-html-demo", "title": "Box Reveal", "description": "Example of Box Reveal that has a smooth reveal animation that slides a colored overlay away to introduce content as it enters the viewport.", "dependencies": [ "motion" ], "registryDependencies": [ "https://atlasui.dev/r/box-reveal-html.json" ], "files": [ { "path": "registry/html/examples/box-reveal-html-demo/index.html", "content": "\n\n \n \n \n Box Reveal Html Demo - Atlas UI\n \n \n \n
\n

Atlas UI

\n
\n\n
\n

\n Because your content deserves a dramatic entrance, not a simple fade-in\n ;)\n

\n
\n \n\n \n\n", "type": "registry:file", "target": "~/box-reveal/index.html" }, { "path": "registry/html/examples/box-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\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--background);\n color: var(--foreground);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100svh;\n font-size: x-large;\n font-family:\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n \"Open Sans\",\n \"Helvetica Neue\",\n sans-serif;\n}\n\n.box-reveal {\n position: relative;\n overflow: hidden;\n}\n\n.box-reveal-overlay {\n position: absolute;\n inset: 0;\n top: 0.25rem;\n bottom: 0.25rem;\n pointer-events: none;\n z-index: 20;\n}\n\n.box-reveal-content {\n position: relative;\n z-index: 10;\n}\n", "type": "registry:file", "target": "~/box-reveal/style.css" }, { "path": "registry/html/examples/box-reveal-html-demo/script.js", "content": "import { animate, inView } from \"motion\";\n\ndocument.querySelectorAll(\".box-reveal\").forEach((root) => {\n const side = root.dataset.side ?? \"left\";\n const color = root.dataset.color ?? \"#FACC15\";\n const width = root.dataset.width ?? \"fit-content\";\n\n if (width === \"full\") {\n root.style.width = \"100%\";\n } else {\n root.style.width = \"fit-content\";\n }\n\n const contentWrapper = document.createElement(\"div\");\n contentWrapper.className = \"box-reveal-content\";\n\n while (root.firstChild) {\n contentWrapper.appendChild(root.firstChild);\n }\n\n root.appendChild(contentWrapper);\n\n // overlay\n const overlay = document.createElement(\"div\");\n overlay.className = \"box-reveal-overlay\";\n overlay.style.background = color;\n\n root.appendChild(overlay);\n\n // initial\n animate(contentWrapper, { opacity: 0, y: 75 }, { duration: 0 });\n\n if (side === \"right\") {\n animate(overlay, { right: 0 }, { duration: 0 });\n } else {\n animate(overlay, { left: 0 }, { duration: 0 });\n }\n\n inView(\n root,\n () => {\n // content animation\n animate(\n contentWrapper,\n { opacity: 1, y: 0 },\n {\n duration: 0.5,\n delay: 0.35,\n },\n );\n\n // overlay animation\n animate(\n overlay,\n side === \"right\" ? { right: \"100%\" } : { left: \"100%\" },\n {\n duration: 0.5,\n ease: \"easeIn\",\n },\n );\n },\n { once: true },\n );\n});\n", "type": "registry:file", "target": "~/box-reveal/script.js" } ], "meta": { "framework": "html" }, "type": "registry:example" }