{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glow-button",
  "type": "registry:ui",
  "title": "Glow Button",
  "description": "A pill button floating over a soft red, amber, violet and cyan glow that sharpens as the button lifts and a chevron slides through its slot. Pure CSS — no GSAP dependency.",
  "dependencies": [],
  "registryDependencies": [],
  "cssVars": {
    "theme": {}
  },
  "files": [
    {
      "path": "components/tweenui/glow-button.tsx",
      "type": "registry:component",
      "target": "components/tweenui/glow-button.tsx",
      "content": "'use client';\n\nimport type { ComponentPropsWithRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nfunction Chevron({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 18 18\"\n      className={className}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={1.75}\n      aria-hidden=\"true\"\n    >\n      <path d=\"M6.75 13.5 11.25 9 6.75 4.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nexport type GlowButtonProps = ComponentPropsWithRef<'button'>;\n\nexport default function GlowButton({\n  children,\n  className,\n  type = 'button',\n  ...props\n}: GlowButtonProps) {\n  return (\n    <button\n      type={type}\n      className={cn(\n        'group relative isolate inline-flex h-12 cursor-pointer items-center justify-center gap-2 rounded-full px-6 text-sm font-medium text-white transition-transform duration-300 hover:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-[#045f64] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60 motion-reduce:transition-none motion-reduce:hover:translate-y-0 dark:ring-offset-[#12161F]',\n        className\n      )}\n      {...props}\n    >\n      {/* Gradient line peeking out along the bottom edge, its colors flowing\n          left to right, then the dark pill surface over it. */}\n      <style>{'@keyframes tween-glow-flow{to{background-position:-200% 0}}'}</style>\n      <span\n        className=\"absolute inset-x-0 top-[2px] -bottom-[2px] [animation:tween-glow-flow_4s_linear_infinite] rounded-full bg-[linear-gradient(90deg,#ff5a5a,#ffca3a,#8765ff,#30e3ff,#ff5a5a)] bg-[length:200%_100%] motion-reduce:[animation:none]\"\n        aria-hidden=\"true\"\n      />\n      <span className=\"absolute inset-0 rounded-full bg-[#12161f]\" aria-hidden=\"true\" />\n\n      <span className=\"relative z-10\">{children}</span>\n      <span className=\"relative z-10 flex size-[18px] overflow-hidden\">\n        <Chevron className=\"size-[18px] shrink-0 translate-x-0 stroke-white transition-transform duration-300 ease-in-out group-hover:translate-x-full motion-reduce:transition-none motion-reduce:group-hover:translate-x-0\" />\n        <Chevron className=\"size-[18px] shrink-0 -translate-x-[200%] stroke-white transition-transform duration-300 ease-in-out group-hover:-translate-x-full motion-reduce:hidden\" />\n      </span>\n\n      {/* Colorful glow that sharpens slightly on hover. */}\n      <span\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute -bottom-3 left-1/2 -z-10 flex -translate-x-1/2 items-center\"\n      >\n        <span className=\"h-6 w-8 rounded-full bg-[#ff5a5a] blur-lg transition-all duration-500 group-hover:blur-md motion-reduce:transition-none\" />\n        <span className=\"h-6 w-8 rounded-full bg-[#ffca3a] blur-lg transition-all duration-500 group-hover:blur-md motion-reduce:transition-none\" />\n        <span className=\"h-8 w-10 rounded-full bg-[#8765ff] blur-lg transition-all duration-500 group-hover:blur-md motion-reduce:transition-none\" />\n        <span className=\"h-6 w-7 rounded-full bg-[#30e3ff] blur-lg transition-all duration-500 group-hover:blur-md motion-reduce:transition-none\" />\n      </span>\n    </button>\n  );\n}\n"
    }
  ],
  "docs": "Docs, props and examples: https://tween-ui.vercel.app/component/glow-button"
}