GradientText

An animated multi-stop gradient text component. Great for hero headlines, feature badges, and anywhere you want eye-catching typography without static backgrounds.

Interactive Demo

The gradient smoothly loops through its color stops.

Usage

import { GradientText } from "@mantleui/react/motion";

// Default colors
<GradientText className="text-5xl font-extrabold">
  Beautiful Gradients
</GradientText>

// Custom colors
<GradientText
  className="text-4xl font-bold"
  colors={["#f97316", "#ec4899", "#8b5cf6"]}
>
  Sunset Glow
</GradientText>

// Slower animation
<GradientText className="text-4xl font-bold" duration={6}>
  Slow and steady
</GradientText>

// Polymorphic element
<GradientText as="h2" className="text-3xl font-semibold">
  Section heading
</GradientText>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Text content.
`colors`	`string[]`	—	Gradient stops. The first color is appended automatically for a seamless loop.
`duration`	`number`	`3`	Duration of one full animation cycle in seconds.
`as`	`ElementType`	`"span"`	The element to render (polymorphic).

children

ReactNode

Text content.

colors

string[]

Gradient stops. The first color is appended automatically for a seamless loop.

duration3

number

Duration of one full animation cycle in seconds.

as"span"

ElementType

The element to render (polymorphic).