{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "shiny-button-html",
"title": "Shiny Button",
"description": "A shiny button with a sleek animation effect using HTML, CSS, JavaScript and Motion.",
"dependencies": [
"motion"
],
"files": [
{
"path": "registry/html/atlasui/shiny-button/index.html",
"content": "\n\n \n \n \n Shiny Button - Atlas UI\n \n \n \n \n \n\n \n\n",
"type": "registry:file",
"target": "~/shiny-button/index.html"
},
{
"path": "registry/html/atlasui/shiny-button/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\nbody {\n background-color: var(--background);\n}\n\n.shiny-button {\n position: relative;\n padding: 0.5rem 1.5rem;\n position: relative;\n border: none;\n border-radius: 8px;\n background:\n radial-gradient(\n circle at 50% 0%,\n rgba(250, 250, 250, 0.05) 0%,\n transparent 60%\n ),\n rgba(15, 15, 15, 1);\n cursor: pointer;\n overflow: hidden;\n}\n\n.button-content {\n position: relative;\n color: #f5f5f5;\n font-weight: 300;\n letter-spacing: 0.025em;\n height: 100%;\n width: 100%;\n display: block;\n mask-image: linear-gradient(\n -75deg,\n white calc(var(--x) + 20%),\n transparent calc(var(--x) + 30%),\n white calc(var(--x) + 100%)\n );\n}\n\n.shiny-overlay {\n position: absolute;\n inset: 0px;\n padding: 1px;\n border-radius: 8px;\n display: block;\n background-image: linear-gradient(\n -75deg,\n rgba(255, 255, 255, 0.1) calc(var(--x) + 20%),\n rgba(255, 255, 255, 0.5) calc(var(--x) + 25%),\n rgba(255, 255, 255, 0.1) calc(var(--x) + 100%)\n );\n mask:\n linear-gradient(black, black) content-box,\n linear-gradient(black, black);\n mask-composite: exclude;\n pointer-events: none;\n}\n",
"type": "registry:file",
"target": "~/shiny-button/style.css"
},
{
"path": "registry/html/atlasui/shiny-button/script.js",
"content": "import { animate, spring } from \"motion\";\n\nconst btn = document.querySelector(\".shiny-button\");\nconst shinyOverlay = document.createElement(\"span\");\nshinyOverlay.className = \"shiny-overlay\";\nbtn.appendChild(shinyOverlay);\n\nanimate(\n btn,\n { \"--x\": [\"100%\", \"-100%\"] },\n {\n repeat: Infinity,\n repeatType: \"loop\",\n repeatDelay: 1,\n duration: 2,\n },\n {\n type: \"spring\",\n stiffness: 20,\n damping: 15,\n mass: 2,\n },\n);\n\nbtn.addEventListener(\"mousedown\", () => {\n animate(btn, {\n scale: 0.95,\n });\n});\n\nbtn.addEventListener(\"mouseup\", () => {\n animate(btn, {\n scale: 1,\n });\n});\n",
"type": "registry:file",
"target": "~/shiny-button/script.js"
}
],
"meta": {
"framework": "html"
},
"type": "registry:file"
}