{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-button",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/liquid-gradient/github-repo-btn.tsx",
      "content": "'use client';\nimport { type Colors, Liquid } from '@/components/ui/liquid-gradient';\nimport { Github, Star } from 'lucide-react';\nimport type React from 'react';\nimport { useState } from 'react';\n\nconst COLORS: Colors = {\n  color1: '#FFFFFF',\n  color2: '#1E10C5',\n  color3: '#9089E2',\n  color4: '#FCFCFE',\n  color5: '#F9F9FD',\n  color6: '#B2B8E7',\n  color7: '#0E2DCB',\n  color8: '#0017E9',\n  color9: '#4743EF',\n  color10: '#7D7BF4',\n  color11: '#0B06FC',\n  color12: '#C5C1EA',\n  color13: '#1403DE',\n  color14: '#B6BAF6',\n  color15: '#C1BEEB',\n  color16: '#290ECB',\n  color17: '#3F4CC0',\n};\nconst GitHubButton: React.FC = () => {\n  const [isHovered, setIsHovered] = useState(false);\n\n  return (\n    <div className='flex justify-center'>\n      <a\n        href='https://github.com/ui-layouts/uilayouts'\n        target='_blank'\n        className='relative inline-block w-32 h-[2.7em] mx-auto group dark:bg-black bg-white dark:border-white border-black border-2 rounded-lg'\n        rel='noreferrer noopener'\n      >\n        <div className='absolute w-[112.81%] h-[128.57%] top-[8.57%] left-1/2 -translate-x-1/2 filter blur-[19px] opacity-70'>\n          <span className='absolute inset-0 rounded-lg bg-[#d9d9d9] filter blur-[6.5px]'></span>\n          <div className='relative w-full h-full overflow-hidden rounded-lg'>\n            <Liquid isHovered={isHovered} colors={COLORS} />\n          </div>\n        </div>\n        <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[40%] w-[92.23%] h-[112.85%] rounded-lg bg-[#010128] filter blur-[7.3px]'></div>\n        <div className='relative w-full h-full overflow-hidden rounded-lg'>\n          <span className='absolute inset-0 rounded-lg bg-[#d9d9d9]'></span>\n          <span className='absolute inset-0 rounded-lg bg-black'></span>\n          <Liquid isHovered={isHovered} colors={COLORS} />\n          {[1, 2, 3, 4, 5].map((i) => (\n            <span\n              key={`spark-${i}`}\n              className={`absolute inset-0 rounded-lg border-solid border-[3px] border-gradient-to-b from-transparent to-white mix-blend-overlay filter ${\n                i <= 2 ? 'blur-[3px]' : i === 3 ? 'blur-[5px]' : 'blur-xs'\n              }`}\n            ></span>\n          ))}\n          <span className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-[40%] w-[70.8%] h-[42.85%] rounded-lg filter blur-[15px] bg-[#006]'></span>\n        </div>\n        <button\n          className='absolute inset-0 rounded-lg bg-transparent cursor-pointer'\n          aria-label='Get Started'\n          type='button'\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n        >\n          <span className='flex items-center justify-center px-2 gap-1 rounded-lg group-hover:text-yellow-400 text-white text-xl font-semibold tracking-wide whitespace-nowrap'>\n            <Github className='inline-block group-hover:fill-yellow-400 fill-white w-6 h-6 shrink-0' />{' '}\n            Github\n          </span>\n        </button>\n      </a>\n    </div>\n  );\n};\n\nexport default GitHubButton;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/liquid-gradient.tsx",
      "content": "'use client';\nimport { AnimatePresence, motion } from 'motion/react';\n\ntype ColorKey =\n  | 'color1'\n  | 'color2'\n  | 'color3'\n  | 'color4'\n  | 'color5'\n  | 'color6'\n  | 'color7'\n  | 'color8'\n  | 'color9'\n  | 'color10'\n  | 'color11'\n  | 'color12'\n  | 'color13'\n  | 'color14'\n  | 'color15'\n  | 'color16'\n  | 'color17';\n\nexport type Colors = Record<ColorKey, string>;\n\nconst svgOrder = ['svg1', 'svg2', 'svg3', 'svg4', 'svg3', 'svg2', 'svg1'] as const;\n\ntype SvgKey = (typeof svgOrder)[number];\n\ntype Stop = {\n  offset: number;\n  stopColor: string;\n};\n\ntype SvgState = {\n  gradientTransform: string;\n  stops: Stop[];\n};\n\ntype SvgStates = Record<SvgKey, SvgState>;\n\nconst createStopsArray = (\n  svgStates: SvgStates,\n  svgOrder: readonly SvgKey[],\n  maxStops: number\n): Stop[][] => {\n  const stopsArray: Stop[][] = [];\n  for (let i = 0; i < maxStops; i++) {\n    const stopConfigurations = svgOrder.map((svgKey) => {\n      const svg = svgStates[svgKey];\n      return svg.stops[i] || svg.stops[svg.stops.length - 1];\n    });\n    stopsArray.push(stopConfigurations);\n  }\n  return stopsArray;\n};\n\ntype GradientSvgProps = {\n  className: string;\n  isHovered: boolean;\n  colors: Colors;\n};\n\nconst GradientSvg: React.FC<GradientSvgProps> = ({ className, isHovered, colors }) => {\n  const svgStates: SvgStates = {\n    svg1: {\n      gradientTransform: 'translate(287.5 280) rotate(-29.0546) scale(689.807 1000)',\n      stops: [\n        { offset: 0, stopColor: colors.color1 },\n        { offset: 0.188423, stopColor: colors.color2 },\n        { offset: 0.260417, stopColor: colors.color3 },\n        { offset: 0.328792, stopColor: colors.color4 },\n        { offset: 0.328892, stopColor: colors.color5 },\n        { offset: 0.328992, stopColor: colors.color1 },\n        { offset: 0.442708, stopColor: colors.color6 },\n        { offset: 0.537556, stopColor: colors.color7 },\n        { offset: 0.631738, stopColor: colors.color1 },\n        { offset: 0.725645, stopColor: colors.color8 },\n        { offset: 0.817779, stopColor: colors.color9 },\n        { offset: 0.84375, stopColor: colors.color10 },\n        { offset: 0.90569, stopColor: colors.color1 },\n        { offset: 1, stopColor: colors.color11 },\n      ],\n    },\n    svg2: {\n      gradientTransform: 'translate(126.5 418.5) rotate(-64.756) scale(533.444 773.324)',\n      stops: [\n        { offset: 0, stopColor: colors.color1 },\n        { offset: 0.104167, stopColor: colors.color12 },\n        { offset: 0.182292, stopColor: colors.color13 },\n        { offset: 0.28125, stopColor: colors.color1 },\n        { offset: 0.328792, stopColor: colors.color4 },\n        { offset: 0.328892, stopColor: colors.color5 },\n        { offset: 0.453125, stopColor: colors.color6 },\n        { offset: 0.515625, stopColor: colors.color7 },\n        { offset: 0.631738, stopColor: colors.color1 },\n        { offset: 0.692708, stopColor: colors.color8 },\n        { offset: 0.75, stopColor: colors.color14 },\n        { offset: 0.817708, stopColor: colors.color9 },\n        { offset: 0.869792, stopColor: colors.color10 },\n        { offset: 1, stopColor: colors.color1 },\n      ],\n    },\n    svg3: {\n      gradientTransform: 'translate(264.5 339.5) rotate(-42.3022) scale(946.451 1372.05)',\n      stops: [\n        { offset: 0, stopColor: colors.color1 },\n        { offset: 0.188423, stopColor: colors.color2 },\n        { offset: 0.307292, stopColor: colors.color1 },\n        { offset: 0.328792, stopColor: colors.color4 },\n        { offset: 0.328892, stopColor: colors.color5 },\n        { offset: 0.442708, stopColor: colors.color15 },\n        { offset: 0.537556, stopColor: colors.color16 },\n        { offset: 0.631738, stopColor: colors.color1 },\n        { offset: 0.725645, stopColor: colors.color17 },\n        { offset: 0.817779, stopColor: colors.color9 },\n        { offset: 0.84375, stopColor: colors.color10 },\n        { offset: 0.90569, stopColor: colors.color1 },\n        { offset: 1, stopColor: colors.color11 },\n      ],\n    },\n    svg4: {\n      gradientTransform: 'translate(860.5 420) rotate(-153.984) scale(957.528 1388.11)',\n      stops: [\n        { offset: 0.109375, stopColor: colors.color11 },\n        { offset: 0.171875, stopColor: colors.color2 },\n        { offset: 0.260417, stopColor: colors.color13 },\n        { offset: 0.328792, stopColor: colors.color4 },\n        { offset: 0.328892, stopColor: colors.color5 },\n        { offset: 0.328992, stopColor: colors.color1 },\n        { offset: 0.442708, stopColor: colors.color6 },\n        { offset: 0.515625, stopColor: colors.color7 },\n        { offset: 0.631738, stopColor: colors.color1 },\n        { offset: 0.692708, stopColor: colors.color8 },\n        { offset: 0.817708, stopColor: colors.color9 },\n        { offset: 0.869792, stopColor: colors.color10 },\n        { offset: 1, stopColor: colors.color11 },\n      ],\n    },\n  };\n\n  const maxStops = Math.max(...Object.values(svgStates).map((svg) => svg.stops.length));\n  const stopsAnimationArray = createStopsArray(svgStates, svgOrder, maxStops);\n  const gradientTransform = svgOrder.map((svgKey) => svgStates[svgKey].gradientTransform);\n\n  const variants = {\n    hovered: {\n      gradientTransform: gradientTransform,\n      transition: { duration: 50, repeat: Number.POSITIVE_INFINITY, ease: 'linear' as const },\n    },\n    notHovered: {\n      gradientTransform: gradientTransform,\n      transition: { duration: 10, repeat: Number.POSITIVE_INFINITY, ease: 'linear' as const },\n    },\n  };\n\n  return (\n    <svg\n      className={className}\n      width='1030'\n      height='280'\n      viewBox='0 0 1030 280'\n      fill='none'\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <rect width='1030' height='280' rx='140' fill='url(#paint0_radial_905_231)' />\n      <defs>\n        <motion.radialGradient\n          id='paint0_radial_905_231'\n          cx='0'\n          cy='0'\n          r='1'\n          gradientUnits='userSpaceOnUse'\n          animate={isHovered ? variants.hovered : variants.notHovered}\n        >\n          {stopsAnimationArray.map((stopConfigs, index) => (\n            <AnimatePresence key={index}>\n              <motion.stop\n                initial={{\n                  offset: stopConfigs[0].offset,\n                  stopColor: stopConfigs[0].stopColor,\n                }}\n                animate={{\n                  offset: stopConfigs.map((config) => config.offset),\n                  stopColor: stopConfigs.map((config) => config.stopColor),\n                }}\n                transition={{\n                  duration: 0,\n                  ease: 'linear',\n                  repeat: Number.POSITIVE_INFINITY,\n                }}\n              />\n            </AnimatePresence>\n          ))}\n        </motion.radialGradient>\n      </defs>\n    </svg>\n  );\n};\n\ntype LiquidProps = {\n  isHovered: boolean;\n  colors: Colors;\n  buttonType?: boolean;\n};\n\nexport const Liquid: React.FC<LiquidProps> = ({ isHovered, colors, buttonType }) => {\n  return (\n    <>\n      {Array.from({ length: 7 }).map((_, index) => (\n        <div\n          key={index}\n          className={`absolute ${index < 3 ? 'w-[443px] h-[121px]' : 'w-[756px] h-[207px]'} ${\n            index === 0\n              ? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mix-blend-difference'\n              : index === 1\n                ? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[164.971deg] mix-blend-difference'\n                : index === 2\n                  ? 'top-1/2 left-1/2 -translate-x-[53%] -translate-y-[53%] rotate-[-11.61deg] mix-blend-difference'\n                  : index === 3\n                    ? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-[57%] rotate-[-179.012deg] mix-blend-difference'\n                    : index === 4\n                      ? 'top-1/2 left-1/2 -translate-x-[57%] -translate-y-1/2 rotate-[-29.722deg] mix-blend-difference'\n                      : index === 5\n                        ? 'top-1/2 left-1/2 -translate-x-[62%] -translate-y-[24%] rotate-[160.227deg] mix-blend-difference'\n                        : 'top-1/2 left-1/2 -translate-x-[67%] -translate-y-[29%] rotate-180 mix-blend-hard-light'\n          }`}\n        >\n          <GradientSvg className='w-full h-full' isHovered={isHovered} colors={colors} />\n        </div>\n      ))}\n    </>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}