Dot and Circle Mouse Trailer Html Demo

{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dot-and-circle-mouse-trailer-html-demo", "title": "Dot And Circle Mouse Trailer", "description": "Example of Dot And Circle Mouse Trailer using HTML, CSS and JavaScript.", "dependencies": [], "registryDependencies": [ "https://atlasui.dev/r/dot-and-circle-mouse-trailer-html.json" ], "files": [ { "path": "registry/html/examples/dot-and-circle-mouse-trailer-html-demo/index.html", "content": "\n\n \n \n \n Dot and Circle Mouse Trailer Html Demo - Atlas UI\n \n \n \n

Move you mouse around ;)

\n\n

\n \n\n \n\n", "type": "registry:file", "target": "~/dot-and-circle-mouse-trailer/index.html" }, { "path": "registry/html/examples/dot-and-circle-mouse-trailer-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\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml {\n color-scheme: light dark;\n}\n\nbody {\n margin: 0;\n padding: 0;\n height: 100vh;\n width: 100%;\n background-color: var(--background);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\np {\n font-size: 1.5rem;\n}\n\n.trailer {\n position: fixed;\n width: 8px;\n height: 8px;\n background-color: var(--foreground);\n border-radius: 50%;\n left: 0;\n top: 0;\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 1000;\n}\n\n.trailer-outline {\n position: fixed;\n left: 0;\n top: 0;\n transform: translate(-50%, -50%);\n width: 80px;\n height: 80px;\n border: 2px solid var(--foreground);\n border-radius: 50%;\n pointer-events: none;\n z-index: 1000;\n}\n", "type": "registry:file", "target": "~/dot-and-circle-mouse-trailer/style.css" }, { "path": "registry/html/examples/dot-and-circle-mouse-trailer-html-demo/script.js", "content": "const trailer = document.getElementById(\"trailer\");\n\nconst trailerOutline = document.createElement(\"div\");\ntrailerOutline.className = \"trailer-outline\";\ndocument.body.appendChild(trailerOutline);\n\ndocument.body.onpointermove = (e) => {\n const { clientX, clientY } = e;\n\n trailer.animate(\n {\n left: `${clientX}px`,\n top: `${clientY}px`,\n },\n {\n duration: 1000,\n fill: \"forwards\",\n },\n );\n\n trailerOutline.animate(\n {\n left: `${clientX}px`,\n top: `${clientY}px`,\n },\n {\n duration: 3000,\n fill: \"forwards\",\n },\n );\n};\n", "type": "registry:file", "target": "~/dot-and-circle-mouse-trailer/script.js" } ], "meta": { "framework": "html" }, "type": "registry:example" }