{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-gradient",
  "type": "registry:ui",
  "dependencies": [
    "framer-motion"
  ],
  "files": [
    {
      "path": "components/ui/liquid-gradient.tsx",
      "content": "'use client';\r\nimport { motion, AnimatePresence } from 'framer-motion';\r\ntype ColorKey =\r\n  | 'color1'\r\n  | 'color2'\r\n  | 'color3'\r\n  | 'color4'\r\n  | 'color5'\r\n  | 'color6'\r\n  | 'color7'\r\n  | 'color8'\r\n  | 'color9'\r\n  | 'color10'\r\n  | 'color11'\r\n  | 'color12'\r\n  | 'color13'\r\n  | 'color14'\r\n  | 'color15'\r\n  | 'color16'\r\n  | 'color17';\r\n\r\nexport type Colors = Record<ColorKey, string>;\r\n\r\nconst svgOrder = [\r\n  'svg1',\r\n  'svg2',\r\n  'svg3',\r\n  'svg4',\r\n  'svg3',\r\n  'svg2',\r\n  'svg1',\r\n] as const;\r\n\r\ntype SvgKey = (typeof svgOrder)[number];\r\n\r\ntype Stop = {\r\n  offset: number;\r\n  stopColor: string;\r\n};\r\n\r\ntype SvgState = {\r\n  gradientTransform: string;\r\n  stops: Stop[];\r\n};\r\n\r\ntype SvgStates = Record<SvgKey, SvgState>;\r\n\r\nconst createStopsArray = (\r\n  svgStates: SvgStates,\r\n  svgOrder: readonly SvgKey[],\r\n  maxStops: number\r\n): Stop[][] => {\r\n  let stopsArray: Stop[][] = [];\r\n  for (let i = 0; i < maxStops; i++) {\r\n    let stopConfigurations = svgOrder.map((svgKey) => {\r\n      let svg = svgStates[svgKey];\r\n      return svg.stops[i] || svg.stops[svg.stops.length - 1];\r\n    });\r\n    stopsArray.push(stopConfigurations);\r\n  }\r\n  return stopsArray;\r\n};\r\n\r\ntype GradientSvgProps = {\r\n  className: string;\r\n  isHovered: boolean;\r\n  colors: Colors;\r\n};\r\n\r\nconst GradientSvg: React.FC<GradientSvgProps> = ({\r\n  className,\r\n  isHovered,\r\n  colors,\r\n}) => {\r\n  const svgStates: SvgStates = {\r\n    svg1: {\r\n      gradientTransform:\r\n        'translate(287.5 280) rotate(-29.0546) scale(689.807 1000)',\r\n      stops: [\r\n        { offset: 0, stopColor: colors.color1 },\r\n        { offset: 0.188423, stopColor: colors.color2 },\r\n        { offset: 0.260417, stopColor: colors.color3 },\r\n        { offset: 0.328792, stopColor: colors.color4 },\r\n        { offset: 0.328892, stopColor: colors.color5 },\r\n        { offset: 0.328992, stopColor: colors.color1 },\r\n        { offset: 0.442708, stopColor: colors.color6 },\r\n        { offset: 0.537556, stopColor: colors.color7 },\r\n        { offset: 0.631738, stopColor: colors.color1 },\r\n        { offset: 0.725645, stopColor: colors.color8 },\r\n        { offset: 0.817779, stopColor: colors.color9 },\r\n        { offset: 0.84375, stopColor: colors.color10 },\r\n        { offset: 0.90569, stopColor: colors.color1 },\r\n        { offset: 1, stopColor: colors.color11 },\r\n      ],\r\n    },\r\n    svg2: {\r\n      gradientTransform:\r\n        'translate(126.5 418.5) rotate(-64.756) scale(533.444 773.324)',\r\n      stops: [\r\n        { offset: 0, stopColor: colors.color1 },\r\n        { offset: 0.104167, stopColor: colors.color12 },\r\n        { offset: 0.182292, stopColor: colors.color13 },\r\n        { offset: 0.28125, stopColor: colors.color1 },\r\n        { offset: 0.328792, stopColor: colors.color4 },\r\n        { offset: 0.328892, stopColor: colors.color5 },\r\n        { offset: 0.453125, stopColor: colors.color6 },\r\n        { offset: 0.515625, stopColor: colors.color7 },\r\n        { offset: 0.631738, stopColor: colors.color1 },\r\n        { offset: 0.692708, stopColor: colors.color8 },\r\n        { offset: 0.75, stopColor: colors.color14 },\r\n        { offset: 0.817708, stopColor: colors.color9 },\r\n        { offset: 0.869792, stopColor: colors.color10 },\r\n        { offset: 1, stopColor: colors.color1 },\r\n      ],\r\n    },\r\n    svg3: {\r\n      gradientTransform:\r\n        'translate(264.5 339.5) rotate(-42.3022) scale(946.451 1372.05)',\r\n      stops: [\r\n        { offset: 0, stopColor: colors.color1 },\r\n        { offset: 0.188423, stopColor: colors.color2 },\r\n        { offset: 0.307292, stopColor: colors.color1 },\r\n        { offset: 0.328792, stopColor: colors.color4 },\r\n        { offset: 0.328892, stopColor: colors.color5 },\r\n        { offset: 0.442708, stopColor: colors.color15 },\r\n        { offset: 0.537556, stopColor: colors.color16 },\r\n        { offset: 0.631738, stopColor: colors.color1 },\r\n        { offset: 0.725645, stopColor: colors.color17 },\r\n        { offset: 0.817779, stopColor: colors.color9 },\r\n        { offset: 0.84375, stopColor: colors.color10 },\r\n        { offset: 0.90569, stopColor: colors.color1 },\r\n        { offset: 1, stopColor: colors.color11 },\r\n      ],\r\n    },\r\n    svg4: {\r\n      gradientTransform:\r\n        'translate(860.5 420) rotate(-153.984) scale(957.528 1388.11)',\r\n      stops: [\r\n        { offset: 0.109375, stopColor: colors.color11 },\r\n        { offset: 0.171875, stopColor: colors.color2 },\r\n        { offset: 0.260417, stopColor: colors.color13 },\r\n        { offset: 0.328792, stopColor: colors.color4 },\r\n        { offset: 0.328892, stopColor: colors.color5 },\r\n        { offset: 0.328992, stopColor: colors.color1 },\r\n        { offset: 0.442708, stopColor: colors.color6 },\r\n        { offset: 0.515625, stopColor: colors.color7 },\r\n        { offset: 0.631738, stopColor: colors.color1 },\r\n        { offset: 0.692708, stopColor: colors.color8 },\r\n        { offset: 0.817708, stopColor: colors.color9 },\r\n        { offset: 0.869792, stopColor: colors.color10 },\r\n        { offset: 1, stopColor: colors.color11 },\r\n      ],\r\n    },\r\n  };\r\n\r\n  const maxStops = Math.max(\r\n    ...Object.values(svgStates).map((svg) => svg.stops.length)\r\n  );\r\n  const stopsAnimationArray = createStopsArray(svgStates, svgOrder, maxStops);\r\n  const gradientTransform = svgOrder.map(\r\n    (svgKey) => svgStates[svgKey].gradientTransform\r\n  );\r\n\r\n  const variants = {\r\n    hovered: {\r\n      gradientTransform: gradientTransform,\r\n      transition: { duration: 50, repeat: Infinity, ease: 'linear' as const },\r\n    },\r\n    notHovered: {\r\n      gradientTransform: gradientTransform,\r\n      transition: { duration: 10, repeat: Infinity, ease: 'linear' as const },\r\n    },\r\n  };\r\n\r\n  return (\r\n    <svg\r\n      className={className}\r\n      width='1030'\r\n      height='280'\r\n      viewBox='0 0 1030 280'\r\n      fill='none'\r\n      xmlns='http://www.w3.org/2000/svg'\r\n    >\r\n      <rect\r\n        width='1030'\r\n        height='280'\r\n        rx='140'\r\n        fill='url(#paint0_radial_905_231)'\r\n      />\r\n      <defs>\r\n        <motion.radialGradient\r\n          id='paint0_radial_905_231'\r\n          cx='0'\r\n          cy='0'\r\n          r='1'\r\n          gradientUnits='userSpaceOnUse'\r\n          // @ts-ignore\r\n          animate={isHovered ? variants.hovered : variants.notHovered}\r\n        >\r\n          {stopsAnimationArray.map((stopConfigs, index) => (\r\n            <AnimatePresence key={index}>\r\n              <motion.stop\r\n                initial={{\r\n                  offset: stopConfigs[0].offset,\r\n                  stopColor: stopConfigs[0].stopColor,\r\n                }}\r\n                animate={{\r\n                  offset: stopConfigs.map((config) => config.offset),\r\n                  stopColor: stopConfigs.map((config) => config.stopColor),\r\n                }}\r\n                transition={{\r\n                  duration: 0,\r\n                  ease: 'linear',\r\n                  repeat: Infinity,\r\n                }}\r\n              />\r\n            </AnimatePresence>\r\n          ))}\r\n        </motion.radialGradient>\r\n      </defs>\r\n    </svg>\r\n  );\r\n};\r\n\r\ntype LiquidProps = {\r\n  isHovered: boolean;\r\n  colors: Colors;\r\n  buttonType?: boolean;\r\n};\r\n\r\nexport const Liquid: React.FC<LiquidProps> = ({\r\n  isHovered,\r\n  colors,\r\n  buttonType,\r\n}) => {\r\n  return (\r\n    <>\r\n      {Array.from({ length: 7 }).map((_, index) => (\r\n        <div\r\n          key={index}\r\n          className={`absolute ${\r\n            index < 3 ? 'w-[443px] h-[121px]' : 'w-[756px] h-[207px]'\r\n          } ${\r\n            index === 0\r\n              ? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mix-blend-difference'\r\n              : index === 1\r\n                ? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-[164.971deg] mix-blend-difference'\r\n                : index === 2\r\n                  ? 'top-1/2 left-1/2 -translate-x-[53%] -translate-y-[53%] rotate-[-11.61deg] mix-blend-difference'\r\n                  : index === 3\r\n                    ? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-[57%] rotate-[-179.012deg] mix-blend-difference'\r\n                    : index === 4\r\n                      ? 'top-1/2 left-1/2 -translate-x-[57%] -translate-y-1/2 rotate-[-29.722deg] mix-blend-difference'\r\n                      : index === 5\r\n                        ? 'top-1/2 left-1/2 -translate-x-[62%] -translate-y-[24%] rotate-[160.227deg] mix-blend-difference'\r\n                        : 'top-1/2 left-1/2 -translate-x-[67%] -translate-y-[29%] rotate-180 mix-blend-hard-light'\r\n          }`}\r\n        >\r\n          <GradientSvg\r\n            className='w-full h-full'\r\n            isHovered={isHovered}\r\n            colors={colors}\r\n          />\r\n        </div>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n",
      "type": "registry:ui",
      "target": "components/ui/liquid-gradient.tsx"
    }
  ]
}