Gradient Text

Installation

1. Install the dependencies

   $ npm i motion lucide-react

2. Copy the source into components/ui/gradient-text.tsx

   components/ui/gradient-text.tsxCopy

   "use client";
   
   import { motion } from "motion/react";
   import type { ReactNode } from "react";
   
   type GradientTextProps = {
     children: ReactNode;
     className?: string;
     colors?: string[];
     /** Seconds for one full sweep */
     duration?: number;
   };
   
   export function GradientText({
     children,
     className = "",
     colors = ["#2563eb", "#7c3aed", "#db2777", "#f59e0b", "#2563eb"],
     duration = 8,
   }: GradientTextProps) {
     return (
       <motion.span
         className={`bg-clip-text text-transparent ${className}`}
         style={{ backgroundImage: `linear-gradient(90deg, ${colors.join(", ")})`, backgroundSize: "300% 100%" }}
         animate={{ backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"] }}
         transition={{ duration, repeat: Infinity, ease: "linear" }}
       >
         {children}
       </motion.span>
     );
   }
   
   export default function Demo() {
     return (
       <h2 className="text-center text-5xl font-semibold tracking-tight text-zinc-900 sm:text-6xl">
         Make it <GradientText>unforgettable</GradientText>
       </h2>
     );
   }
   

3. Use it

   The file exports the component and a Demo showing typical usage. Import whichever you need.