50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T6f7,'use client'; import { type Colors, Liquid } from '@/components/ui/liquid-gradient'; import { Github, Star } from 'lucide-react'; import type React from 'react'; import { useState } from 'react'; const COLORS: Colors = { color1: '#FFFFFF', color2: '#1E10C5', color3: '#9089E2', color4: '#FCFCFE', color5: '#F9F9FD', color6: '#B2B8E7', color7: '#0E2DCB', color8: '#0017E9', color9: '#4743EF', color10: '#7D7BF4', color11: '#0B06FC', color12: '#C5C1EA', color13: '#1403DE', color14: '#B6BAF6', color15: '#C1BEEB', color16: '#290ECB', color17: '#3F4CC0', }; const GitHubButton: React.FC = () => { const [isHovered, setIsHovered] = useState(false); return (

); }; export default GitHubButton; 54:T2021,'use client'; import { AnimatePresence, motion } from 'motion/react'; type ColorKey = | 'color1' | 'color2' | 'color3' | 'color4' | 'color5' | 'color6' | 'color7' | 'color8' | 'color9' | 'color10' | 'color11' | 'color12' | 'color13' | 'color14' | 'color15' | 'color16' | 'color17'; export type Colors = Record; const svgOrder = ['svg1', 'svg2', 'svg3', 'svg4', 'svg3', 'svg2', 'svg1'] as const; type SvgKey = (typeof svgOrder)[number]; type Stop = { offset: number; stopColor: string; }; type SvgState = { gradientTransform: string; stops: Stop[]; }; type SvgStates = Record; const createStopsArray = ( svgStates: SvgStates, svgOrder: readonly SvgKey[], maxStops: number ): Stop[][] => { const stopsArray: Stop[][] = []; for (let i = 0; i < maxStops; i++) { const stopConfigurations = svgOrder.map((svgKey) => { const svg = svgStates[svgKey]; return svg.stops[i] || svg.stops[svg.stops.length - 1]; }); stopsArray.push(stopConfigurations); } return stopsArray; }; type GradientSvgProps = { className: string; isHovered: boolean; colors: Colors; }; const GradientSvg: React.FC = ({ className, isHovered, colors }) => { const svgStates: SvgStates = { svg1: { gradientTransform: 'translate(287.5 280) rotate(-29.0546) scale(689.807 1000)', stops: [ { offset: 0, stopColor: colors.color1 }, { offset: 0.188423, stopColor: colors.color2 }, { offset: 0.260417, stopColor: colors.color3 }, { offset: 0.328792, stopColor: colors.color4 }, { offset: 0.328892, stopColor: colors.color5 }, { offset: 0.328992, stopColor: colors.color1 }, { offset: 0.442708, stopColor: colors.color6 }, { offset: 0.537556, stopColor: colors.color7 }, { offset: 0.631738, stopColor: colors.color1 }, { offset: 0.725645, stopColor: colors.color8 }, { offset: 0.817779, stopColor: colors.color9 }, { offset: 0.84375, stopColor: colors.color10 }, { offset: 0.90569, stopColor: colors.color1 }, { offset: 1, stopColor: colors.color11 }, ], }, svg2: { gradientTransform: 'translate(126.5 418.5) rotate(-64.756) scale(533.444 773.324)', stops: [ { offset: 0, stopColor: colors.color1 }, { offset: 0.104167, stopColor: colors.color12 }, { offset: 0.182292, stopColor: colors.color13 }, { offset: 0.28125, stopColor: colors.color1 }, { offset: 0.328792, stopColor: colors.color4 }, { offset: 0.328892, stopColor: colors.color5 }, { offset: 0.453125, stopColor: colors.color6 }, { offset: 0.515625, stopColor: colors.color7 }, { offset: 0.631738, stopColor: colors.color1 }, { offset: 0.692708, stopColor: colors.color8 }, { offset: 0.75, stopColor: colors.color14 }, { offset: 0.817708, stopColor: colors.color9 }, { offset: 0.869792, stopColor: colors.color10 }, { offset: 1, stopColor: colors.color1 }, ], }, svg3: { gradientTransform: 'translate(264.5 339.5) rotate(-42.3022) scale(946.451 1372.05)', stops: [ { offset: 0, stopColor: colors.color1 }, { offset: 0.188423, stopColor: colors.color2 }, { offset: 0.307292, stopColor: colors.color1 }, { offset: 0.328792, stopColor: colors.color4 }, { offset: 0.328892, stopColor: colors.color5 }, { offset: 0.442708, stopColor: colors.color15 }, { offset: 0.537556, stopColor: colors.color16 }, { offset: 0.631738, stopColor: colors.color1 }, { offset: 0.725645, stopColor: colors.color17 }, { offset: 0.817779, stopColor: colors.color9 }, { offset: 0.84375, stopColor: colors.color10 }, { offset: 0.90569, stopColor: colors.color1 }, { offset: 1, stopColor: colors.color11 }, ], }, svg4: { gradientTransform: 'translate(860.5 420) rotate(-153.984) scale(957.528 1388.11)', stops: [ { offset: 0.109375, stopColor: colors.color11 }, { offset: 0.171875, stopColor: colors.color2 }, { offset: 0.260417, stopColor: colors.color13 }, { offset: 0.328792, stopColor: colors.color4 }, { offset: 0.328892, stopColor: colors.color5 }, { offset: 0.328992, stopColor: colors.color1 }, { offset: 0.442708, stopColor: colors.color6 }, { offset: 0.515625, stopColor: colors.color7 }, { offset: 0.631738, stopColor: colors.color1 }, { offset: 0.692708, stopColor: colors.color8 }, { offset: 0.817708, stopColor: colors.color9 }, { offset: 0.869792, stopColor: colors.color10 }, { offset: 1, stopColor: colors.color11 }, ], }, }; const maxStops = Math.max(...Object.values(svgStates).map((svg) => svg.stops.length)); const stopsAnimationArray = createStopsArray(svgStates, svgOrder, maxStops); const gradientTransform = svgOrder.map((svgKey) => svgStates[svgKey].gradientTransform); const variants = { hovered: { gradientTransform: gradientTransform, transition: { duration: 50, repeat: Number.POSITIVE_INFINITY, ease: 'linear' as const }, }, notHovered: { gradientTransform: gradientTransform, transition: { duration: 10, repeat: Number.POSITIVE_INFINITY, ease: 'linear' as const }, }, }; return ( ); }; type LiquidProps = { isHovered: boolean; colors: Colors; buttonType?: boolean; }; export const Liquid: React.FC = ({ isHovered, colors, buttonType }) => { return ( <> {Array.from({ length: 7 }).map((_, index) => (

))} ); }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://ui-layouts.com/r/liquid-gradient-components.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/liquid-gradient-components","itemId":"@ui-layouts/liquid-gradient-components"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"./registry/components/liquid-gradient/index.tsx","content":"$53","type":"registry:component"},{"path":"./components/ui/liquid-gradient.tsx","content":"$54","type":"registry:component"}]}]]}],"$L55"]}]

Liquid Gradient Components

Installation

Files

components

Styles