{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shimmer-button",
  "type": "registry:ui",
  "title": "Shimmer Button",
  "description": "A button with a shimmering light which travels around the perimeter.",
  "files": [
    {
      "path": "registry/magicui/shimmer-button.tsx",
      "content": "import React, { type ComponentPropsWithoutRef, type CSSProperties } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface ShimmerButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  shimmerColor?: string\n  shimmerSize?: string\n  borderRadius?: string\n  shimmerDuration?: string\n  background?: string\n  className?: string\n  children?: React.ReactNode\n}\n\nexport const ShimmerButton = React.forwardRef<\n  HTMLButtonElement,\n  ShimmerButtonProps\n>(\n  (\n    {\n      shimmerColor = \"#ffffff\",\n      shimmerSize = \"0.05em\",\n      shimmerDuration = \"3s\",\n      borderRadius = \"100px\",\n      background = \"rgba(0, 0, 0, 1)\",\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        style={\n          {\n            \"--spread\": \"90deg\",\n            \"--shimmer-color\": shimmerColor,\n            \"--radius\": borderRadius,\n            \"--speed\": shimmerDuration,\n            \"--cut\": shimmerSize,\n            \"--bg\": background,\n          } as CSSProperties\n        }\n        className={cn(\n          \"group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)]\",\n          \"transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {/* spark container */}\n        <div\n          className={cn(\n            \"-z-30 blur-[2px]\",\n            \"@container-[size] absolute inset-0 overflow-visible\"\n          )}\n        >\n          {/* spark */}\n          <div className=\"animate-shimmer-slide absolute inset-0 aspect-[1] h-[100cqh] rounded-none [mask:none]\">\n            {/* spark before */}\n            <div className=\"animate-spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]\" />\n          </div>\n        </div>\n        {children}\n\n        {/* Highlight */}\n        <div\n          className={cn(\n            \"absolute inset-0 size-full\",\n\n            \"rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]\",\n\n            // transition\n            \"transform-gpu transition-all duration-300 ease-in-out\",\n\n            // on hover\n            \"group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]\",\n\n            // on click\n            \"group-active:shadow-[inset_0_-10px_10px_#ffffff3f]\"\n          )}\n        />\n\n        {/* backdrop */}\n        <div\n          className={cn(\n            \"absolute inset-(--cut) -z-20 [border-radius:var(--radius)] [background:var(--bg)]\"\n          )}\n        />\n      </button>\n    )\n  }\n)\n\nShimmerButton.displayName = \"ShimmerButton\"\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "animate-shimmer-slide": "shimmer-slide var(--speed) ease-in-out infinite alternate",
      "animate-spin-around": "spin-around calc(var(--speed) * 2) infinite linear"
    }
  },
  "css": {
    "@keyframes shimmer-slide": {
      "to": {
        "transform": "translate(calc(100cqw - 100%), 0)"
      }
    },
    "@keyframes spin-around": {
      "0%": {
        "transform": "translateZ(0) rotate(0)"
      },
      "15%, 35%": {
        "transform": "translateZ(0) rotate(90deg)"
      },
      "65%, 85%": {
        "transform": "translateZ(0) rotate(270deg)"
      },
      "100%": {
        "transform": "translateZ(0) rotate(360deg)"
      }
    }
  }
}