{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "magnetic-hover-html",
"title": "Magnetic Hover",
"description": "A smooth magnetic hover interaction that subtly pulls elements toward the with using spring based motion animations, built with HTML, CSS, JavaScript and Motion.",
"dependencies": [
"motion"
],
"files": [
{
"path": "registry/html/atlasui/magnetic-hover/index.html",
"content": "\n\n \n \n \n Magnetic Hover - Atlas UI\n \n \n \n \n\n Hover me\n \n \n\n",
"type": "registry:file",
"target": "~/magnetic-hover/index.html"
},
{
"path": "registry/html/atlasui/magnetic-hover/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 min-height: 100svh;\n background-color: var(--background);\n color: var(--foreground);\n font-family: \"Inter\", sans-serif;\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n align-items: center;\n justify-content: center;\n}\n\nbutton {\n border: none;\n background-color: var(--foreground);\n color: var(--background);\n padding: 0.5rem 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n}\n\na {\n color: var(--foreground);\n text-underline-offset: 4px;\n}\n",
"type": "registry:file",
"target": "~/magnetic-hover/style.css"
},
{
"path": "registry/html/atlasui/magnetic-hover/script.js",
"content": "import { animate } from \"motion\";\n\nconst magneticHoverContainers = document.querySelectorAll(\".magnetic-hover\");\n\nmagneticHoverContainers.forEach((element) => {\n const strength = element.getAttribute(\"data-strength\") || 1;\n element.addEventListener(\"mousemove\", (e) => {\n const { left, top, width, height } = element.getBoundingClientRect();\n const x = (e.clientX - (left + width / 2)) * strength;\n const y = (e.clientY - (top + height / 2)) * strength;\n\n animate(\n element,\n { x, y },\n { type: \"spring\", stiffness: 150, damping: 15, mass: 0.2 },\n );\n });\n\n element.addEventListener(\"mouseleave\", () => {\n animate(\n element,\n { x: 0, y: 0 },\n { type: \"spring\", stiffness: 150, damping: 15, mass: 0.2 },\n );\n });\n});\n",
"type": "registry:file",
"target": "~/magnetic-hover/script.js"
}
],
"meta": {
"framework": "html"
},
"type": "registry:file"
}