{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "reveal-effect-delay-html-example",
"title": "Reveal Effect HTML Example 2",
"description": "Example of Reveal Effect with a custom delay.",
"dependencies": [
"motion"
],
"registryDependencies": [
"https://atlasui.dev/r/reveal-effect-html.json"
],
"files": [
{
"path": "registry/html/examples/reveal-effect-delay-html-example/index.html",
"content": "\n\n \n \n \n Reveal Effect Delay Html Example - Atlas UI\n \n \n \n I'm First.
\n\n \n I was delayed by 0.2 seconds.\n
\n\n \n I was delayed by 0.5 seconds.\n
\n \n\n \n\n",
"type": "registry:example"
},
{
"path": "registry/html/examples/reveal-effect-delay-html-example/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}\n\nbody {\n background-color: var(--background);\n color: var(--foreground);\n display: flex;\n flex-direction: column;\n gap: 2rem;\n align-items: center;\n justify-content: center;\n min-height: 100svh;\n font-size: x-large;\n}\n",
"type": "registry:example"
},
{
"path": "registry/html/examples/reveal-effect-delay-html-example/script.js",
"content": "import { animate, inView } from \"motion\";\n\nconst speedDurations = {\n slow: 1.6,\n medium: 1,\n fast: 0.5,\n};\n\ndocument.querySelectorAll(\".reveal-effect\").forEach((el) => {\n const delay = parseFloat(el.dataset.delay) || 0;\n const speed = el.dataset.speed || \"medium\";\n const translateY = parseFloat(el.dataset.translatey) || 0;\n\n el.style.opacity = \"0\";\n el.style.filter = \"blur(12px)\";\n el.style.clipPath = \"inset(-5% 100% -5% 0)\";\n el.style.transform = `translateY(${translateY}px)`;\n\n inView(el, () => {\n animate(\n el,\n {\n opacity: 1,\n filter: \"blur(0px)\",\n clipPath: \"inset(-5% 0% -5% 0)\",\n transform: \"translateY(0)\",\n },\n {\n duration: speedDurations[speed],\n easing: \"ease-in-out\",\n delay,\n },\n );\n });\n});\n",
"type": "registry:example"
}
],
"meta": {
"framework": "html"
},
"type": "registry:example"
}