4f: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"] 50: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"] 51: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"] 52:Tcfe,"use client" import React, { memo, useMemo } from "react" import { motion, MotionProps } from "motion/react" import { cn } from "@/lib/utils" interface GradientTextProps extends Omit, keyof MotionProps | "style"> { className?: string children: React.ReactNode as?: React.ElementType colors?: string style?: React.CSSProperties } const keyframesStyle = ` @keyframes gradient-border { 0%, 100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } 25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; } 50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; } 75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; } } @keyframes gradient-1 { 0%, 100% { top: 0; right: 0; } 50% { top: 50%; right: 25%; } 75% { top: 25%; right: 50%; } } @keyframes gradient-2 { 0%, 100% { top: 0; left: 0; } 60% { top: 75%; left: 25%; } 85% { top: 50%; left: 50%; } } @keyframes gradient-3 { 0%, 100% { bottom: 0; left: 0; } 40% { bottom: 50%; left: 25%; } 65% { bottom: 25%; left: 50%; } } @keyframes gradient-4 { 0%, 100% { bottom: 0; right: 0; } 50% { bottom: 25%; right: 40%; } 90% { bottom: 50%; right: 25%; } } @media (prefers-reduced-motion: reduce) { .groot-orb { animation: none !important; } } ` const ORB_BASE = "groot-orb pointer-events-none absolute h-[30vw] w-[30vw] mix-blend-overlay blur-lg" const GradientText = memo(function GradientText({ className, children, as: Component = "span", colors = "#cc0066, #1aff53, #004d99, #f5f56b, #a600e6", style, ...props }: GradientTextProps) { const MotionComponent = useMemo(() => motion.create(Component), [Component]) const colorArray = useMemo( () => colors.split(",").map((c) => c.trim()), [colors] ) return (

Gradient Text Fill

Installation

Files

@components

Styles