Gradient Text Reveal

Word-by-word text reveal with gradient coloring and blur-to-clear spring animation.

npx uniqueui add gradient-text-reveal

Preview

BuildstunninginterfaceswithUniqueUI

Beautifulanimatedcomponentsformodernwebapps

Usage

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

export default function Example() {
  return (
    <div className="space-y-8 text-center p-10 text-white">
      <GradientTextReveal
        text="Build stunning interfaces with UniqueUI"
        as="h3"
        className="text-3xl font-bold justify-center"
      />
      <GradientTextReveal
        text="Beautiful animated components for modern web apps"
        gradientFrom="#6366f1"
        gradientTo="#06b6d4"
        className="text-lg justify-center"
      />
    </div>
  );
}

Props

Prop	Type	Description
`text`	`string`	The exact sentence paragraph targeted for staggered rendering.
`className`	`string`	Add CSS classes mapping typographic configurations.
`gradientFrom`	`string`	Color indicating the start coordinate mapping of the visual gradient ramp.
`gradientTo`	`string`	Terminal color definition ending the textual mask gradient.
`staggerDelay`	`number`	Seconds mapping the offset differential delay evaluating subsequent sequential words.
`duration`	`number`	Metric representation detailing exact sequence total span (measured in seconds).
`once`	`boolean`	Prevent re-evaluating the intersection layout and permanently mark complete once run.
`as`	`"h1" \| "h2" \| "h3" \| "h4" \| "p" \| "span"`	Explicit HTML element defining correct semantics matching the parent boundary box.