{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-shiny-button",
  "title": "animated-shiny-button",
  "description": "An animated shiny button component.",
  "dependencies": [
    "react"
  ],
  "files": [
    {
      "path": "registry/eldoraui/animated-shiny-button.tsx",
      "content": "\"use client\"\n\nimport type React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\ninterface AnimatedShinyButtonProps {\n  children: React.ReactNode\n  className?: string\n  url?: string\n}\n\nexport function AnimatedShinyButton({\n  children,\n  className = \"\",\n  url,\n}: AnimatedShinyButtonProps) {\n  return (\n    <>\n      <style jsx>{`\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,500&display=swap\");\n\n        @property --gradient-angle {\n          syntax: \"<angle>\";\n          initial-value: 0deg;\n          inherits: false;\n        }\n\n        @property --gradient-angle-offset {\n          syntax: \"<angle>\";\n          initial-value: 0deg;\n          inherits: false;\n        }\n\n        @property --gradient-percent {\n          syntax: \"<percentage>\";\n          initial-value: 5%;\n          inherits: false;\n        }\n\n        @property --gradient-shine {\n          syntax: \"<color>\";\n          initial-value: white;\n          inherits: false;\n        }\n\n        .shiny-cta,\n        .shiny-cta-link {\n          --shiny-cta-bg: #000000;\n          --shiny-cta-bg-subtle: #1a1818;\n          --shiny-cta-fg: #ffffff;\n          --shiny-cta-highlight: #67e8f9;\n          --shiny-cta-highlight-subtle: #06b6d4;\n          --animation: gradient-angle linear infinite;\n          --duration: 3s;\n          --shadow-size: 2px;\n          --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);\n\n          isolation: isolate;\n          position: relative;\n          overflow: hidden;\n          cursor: pointer;\n          outline-offset: 4px;\n          padding: 0.75rem 1.5rem;\n          font-family: \"Inter\", sans-serif;\n          font-size: 1rem;\n          line-height: 1.2;\n          font-weight: 500;\n          border: 1px solid transparent;\n          border-radius: 0.5rem;\n          color: var(--shiny-cta-fg);\n          background:\n            linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg))\n              padding-box,\n            conic-gradient(\n                from calc(var(--gradient-angle) - var(--gradient-angle-offset)),\n                transparent,\n                var(--shiny-cta-highlight) var(--gradient-percent),\n                var(--gradient-shine) calc(var(--gradient-percent) * 2),\n                var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),\n                transparent calc(var(--gradient-percent) * 4)\n              )\n              border-box;\n          box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);\n          transition: var(--transition);\n          transition-property:\n            --gradient-angle-offset, --gradient-percent, --gradient-shine;\n        }\n\n        /* Link-specific styles */\n        .shiny-cta-link {\n          display: inline-block;\n          text-decoration: none;\n        }\n\n        .shiny-cta::before,\n        .shiny-cta::after,\n        .shiny-cta span::before,\n        .shiny-cta-link::before,\n        .shiny-cta-link::after,\n        .shiny-cta-link span::before {\n          content: \"\";\n          pointer-events: none;\n          position: absolute;\n          inset-inline-start: 50%;\n          inset-block-start: 50%;\n          translate: -50% -50%;\n          z-index: -1;\n        }\n\n        .shiny-cta:active,\n        .shiny-cta-link:active {\n          translate: 0 1px;\n        }\n\n        /* Dots pattern */\n        .shiny-cta::before,\n        .shiny-cta-link::before {\n          --size: calc(100% - var(--shadow-size) * 3);\n          --position: 2px;\n          --space: calc(var(--position) * 2);\n          width: var(--size);\n          height: var(--size);\n          background: radial-gradient(\n              circle at var(--position) var(--position),\n              white calc(var(--position) / 4),\n              transparent 0\n            )\n            padding-box;\n          background-size: var(--space) var(--space);\n          background-repeat: space;\n          mask-image: conic-gradient(\n            from calc(var(--gradient-angle) + 45deg),\n            black,\n            transparent 10% 90%,\n            black\n          );\n          border-radius: 0.5rem;\n          opacity: 0.4;\n          z-index: -1;\n        }\n\n        /* Inner shimmer */\n        .shiny-cta::after,\n        .shiny-cta-link::after {\n          --animation: shimmer linear infinite;\n          width: 100%;\n          aspect-ratio: 1;\n          background: linear-gradient(\n            -50deg,\n            transparent,\n            var(--shiny-cta-highlight),\n            transparent\n          );\n          mask-image: radial-gradient(circle at bottom, transparent 40%, black);\n          opacity: 0.6;\n        }\n\n        .shiny-cta span,\n        .shiny-cta-link span {\n          z-index: 1;\n        }\n\n        .shiny-cta span::before,\n        .shiny-cta-link span::before {\n          --size: calc(100% + 1rem);\n          width: var(--size);\n          height: var(--size);\n          box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);\n          opacity: 0;\n          transition: opacity var(--transition);\n          animation: calc(var(--duration) * 1.5) breathe linear infinite;\n        }\n\n        /* Animate */\n        .shiny-cta,\n        .shiny-cta::before,\n        .shiny-cta::after,\n        .shiny-cta-link,\n        .shiny-cta-link::before,\n        .shiny-cta-link::after {\n          animation:\n            var(--animation) var(--duration),\n            var(--animation) calc(var(--duration) / 0.4) reverse paused;\n          animation-composition: add;\n        }\n\n        .shiny-cta:is(:hover, :focus-visible),\n        .shiny-cta-link:is(:hover, :focus-visible) {\n          --gradient-percent: 20%;\n          --gradient-angle-offset: 95deg;\n          --gradient-shine: var(--shiny-cta-highlight-subtle);\n        }\n\n        .shiny-cta:is(:hover, :focus-visible),\n        .shiny-cta:is(:hover, :focus-visible)::before,\n        .shiny-cta:is(:hover, :focus-visible)::after,\n        .shiny-cta-link:is(:hover, :focus-visible),\n        .shiny-cta-link:is(:hover, :focus-visible)::before,\n        .shiny-cta-link:is(:hover, :focus-visible)::after {\n          animation-play-state: running;\n        }\n\n        .shiny-cta:is(:hover, :focus-visible) span::before,\n        .shiny-cta-link:is(:hover, :focus-visible) span::before {\n          opacity: 1;\n        }\n\n        @keyframes gradient-angle {\n          to {\n            --gradient-angle: 360deg;\n          }\n        }\n\n        @keyframes shimmer {\n          to {\n            rotate: 360deg;\n          }\n        }\n\n        @keyframes breathe {\n          from,\n          to {\n            scale: 1;\n          }\n          50% {\n            scale: 1.2;\n          }\n        }\n\n        /* Light theme overrides */\n        @media (prefers-color-scheme: light) {\n          .shiny-cta,\n          .shiny-cta-link {\n            --shiny-cta-bg: #ffffff;\n            --shiny-cta-bg-subtle: #f0f0f0;\n            --shiny-cta-fg: #000000;\n            --shiny-cta-highlight: #06b6d4;\n            --shiny-cta-highlight-subtle: #0891b2;\n          }\n        }\n      `}</style>\n\n      {url ? (\n        <a href={url} className={`shiny-cta-link group ${className}`}>\n          <span className=\"flex items-center\">\n            {children}\n            <ChevronRight className=\"ml-1 size-4 shrink-0 transition-all duration-300 ease-out group-hover:translate-x-1\" />\n          </span>\n        </a>\n      ) : (\n        <button className={`shiny-cta group ${className}`}>\n          <span className=\"flex items-center\">\n            {children}\n            <ChevronRight className=\"ml-1 size-4 shrink-0 transition-all duration-300 ease-out group-hover:translate-x-1\" />\n          </span>\n        </button>\n      )}\n    </>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}