{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shiny-button",
  "title": "Shiny Button",
  "description": "A button with a smooth shiny animation effect.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/new-york/components/shiny-button/shiny-button.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { motion } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\n\nexport interface ShinyButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {\n  shimmerWidth?: number;\n  duration?: number;\n}\n\nconst ShinyButton = React.forwardRef<HTMLButtonElement, ShinyButtonProps>(\n  ({ className, children, duration = 2, shimmerWidth = 100, ...props }, ref) => {\n    return (\n      <>\n        <style jsx global>{`\n          .shiny-btn-mask {\n            mask-image: linear-gradient(\n              -75deg,\n              white calc(var(--x) + 20%),\n              transparent calc(var(--x) + 20% + var(--shimmer-width)),\n              white calc(var(--x) + 100%)\n            );\n            -webkit-mask-image: linear-gradient(\n              -75deg,\n              white calc(var(--x) + 20%),\n              transparent calc(var(--x) + 20% + var(--shimmer-width)),\n              white calc(var(--x) + 100%)\n            );\n          }\n\n          .shiny-btn-overlay {\n            background-image: linear-gradient(\n              -75deg,\n              rgba(var(--overlay-color), 0.1) calc(var(--x) + 20%),\n              rgba(var(--overlay-color), 0.5) calc(var(--x) + 20% + var(--shimmer-width) * 0.5),\n              rgba(var(--overlay-color), 0.1) calc(var(--x) + 100%)\n            );\n            mask: linear-gradient(black, black) content-box, linear-gradient(black, black);\n            -webkit-mask: linear-gradient(black, black) content-box, linear-gradient(black, black);\n            mask-composite: exclude;\n            -webkit-mask-composite: xor;\n          }\n\n          :root {\n            --shiny-btn-bg: 255, 255, 255;\n            --shiny-btn-radial: 0, 0, 0;\n            --overlay-color: 0, 0, 0;\n          }\n\n          .dark {\n            --shiny-btn-bg: 10, 10, 10;\n            --shiny-btn-radial: 255, 252, 255;\n            --overlay-color: 255, 255, 255;\n          }\n        `}</style>\n\n        <motion.div\n          style={{ \"--shimmer-width\": `${shimmerWidth}px` } as React.CSSProperties}\n                    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    initial={{ \"--x\": \"100%\" } as any}\n                    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                    animate={{ \"--x\": \"-100%\" } as any}\n          transition={{\n            repeat: Infinity,\n            repeatType: \"loop\",\n            repeatDelay: 1,\n            type: \"tween\",\n            ease: \"linear\",\n            duration,\n          }}\n          className=\"inline-block\"\n        >\n          <Button\n            ref={ref}\n            className={cn(\n              \"relative overflow-hidden transition-all duration-300 active:scale-[0.98]\",\n              \"bg-[rgba(var(--shiny-btn-bg),1)] text-neutral-950 dark:text-neutral-100\",\n              \"border border-neutral-200 dark:border-neutral-800\",\n              \"hover:bg-[rgba(var(--shiny-btn-bg),0.9)]\",\n              \"bg-[radial-gradient(circle_at_50%_0%,rgba(var(--shiny-btn-radial),0.05)_0%,transparent_60%)]\",\n              className\n            )}\n            {...props}\n          >\n            <span className=\"shiny-btn-mask relative block h-full w-full font-light tracking-wide\">\n              {children}\n            </span>\n            <span className=\"shiny-btn-overlay pointer-events-none absolute inset-0 rounded-[inherit] p-px\" />\n          </Button>\n        </motion.div>\n      </>\n    );\n  }\n);\n\nShinyButton.displayName = \"ShinyButton\";\n\nexport { ShinyButton };\n"
    }
  ],
  "type": "registry:component"
}