Gradient Text

Animated gradient text with customizable colors, direction, yoyo mode, and optional gradient border.

Gradient Magic

import GradientText from "@/components/vritti/gradient-text"

export function GradientTextExample() {
  return (
    <div className="relative flex items-center justify-center w-full h-[400px]">
      <span className="text-5xl font-bold">
        <GradientText
          colors={["#5227FF", "#FF9FFC", "#B19EEF"]}
          animationSpeed={8}
          direction="horizontal"
          showBorder={false}
        >
          Gradient Magic
        </GradientText>
      </span>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/gradient-text"

Dependencies


pnpm add motion