Move you mouse around ;)
\n\n \n \n\n \n\n", "type": "registry:file", "target": "~/blob-mouse-trailer/index.html" }, { "path": "registry/html/examples/blob-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}\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: 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 height: 24rem;\n aspect-ratio: 1;\n background: linear-gradient(to right, #a855f7, #f59e0b);\n border-radius: 50%;\n left: 0;\n top: 0;\n transform: translate(-50%, -50%);\n transform-origin: center;\n pointer-events: none;\n z-index: -10;\n filter: blur(100px);\n animation: rotate 10s infinite;\n}\n\n@keyframes rotate {\n from {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n to {\n transform: translate(-50%, -50%) rotate(360deg);\n }\n}\n", "type": "registry:file", "target": "~/blob-mouse-trailer/style.css" }, { "path": "registry/html/examples/blob-mouse-trailer-html-demo/script.js", "content": "const trailer = document.getElementById(\"trailer\");\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: 3000,\n fill: \"forwards\",\n }\n );\n};\n", "type": "registry:file", "target": "~/blob-mouse-trailer/script.js" } ], "meta": { "framework": "html" }, "type": "registry:example" }