Dia Text Reveal
A sweeping gradient animation that reveals text dynamically with support for word rotation cycles.
Preview
Installation
pnpm dlx vibe-ui-kit@latest add dia-text-reveal
SaaS Tagline (Fixed Width)
Neon Custom Sweep
Usage
import { DiaTextReveal } from "@/components/ui/dia-text-reveal"<DiaTextReveal text={["exclusive", "modern", "clean", "premium"]} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | string[] | [] | Array of word strings or a single string to reveal |
colors | string[] | DEFAULT_COLORS | Colors representing the diagonal linear sweep gradient stops |
textColor | string | "currentColor" | Default color of text letters before gradient sweep passes |
duration | number | 1.5 | Sweep duration in seconds per text item |
delay | number | 0 | Delay in seconds before animation sweep triggers |
repeat | boolean | false | Whether to loop through text array continuously |
repeatDelay | number | 0.5 | Cooldown delay in seconds between loops |
fixedWidth | boolean | false | Forces container size to stay constant matching largest word size |
className | string? | "" | Additional classes for the container |
This DiaTextReveal component creates a diagonal sweep gradient reveal text transition.
Contributors
JS
Jenish Sabhadiya