Gradient Text

Seamlessly looping animated gradient text driven by framer-motion animation frames. Includes support for horizontal, vertical, and diagonal sweeps, and an optional gradient border tracing mode.

Live Preview

Fluid Gradient TextWith Glowing Gradient Border

Installation

CLI

npx @modus-ui/cli add gradient-text

Manual

Copy the code from the component tab.
Create a file at components/ui/gradient-text.tsx.
Paste the code.

Usage

tsx

import { GradientText } from "@/components/ui/gradient-text";

export default function Example() {
  return (
    <GradientText
      className="text-4xl font-bold"
      colors={[
        "hsl(var(--primary))",
        "hsl(var(--primary))",
        "hsl(var(--primary))",
        "hsl(var(--primary))",
      ]}
      animationSpeed={5}
    >
      Fluid Gradient Text
    </GradientText>
  );
}

Props

Prop	Type	Default	Description
`colors`	`string[]`	`["hsl(var(--primary))", "hsl(var(--primary))", "hsl(var(--primary))", "hsl(var(--primary))", "hsl(var(--primary))"]`	Colours of the gradient.
`animationSpeed`	`number`	`8`	Seconds for one gradient cycle.
`showBorder`	`boolean`	`false`	Adds an animated gradient border.
`direction`	`"horizontal" \| "vertical" \| "diagonal"`	`"horizontal"`	Direction the gradient moves.
`pauseOnHover`	`boolean`	`false`	Pauses the animation while hovered.
`yoyo`	`boolean`	`true`	Reverses the animation each cycle instead of looping.

Gradient Text

Installation

CLI

Manual

Usage

Props

Comments