Dia Text Reveal

Animated text reveal with a colorful gradient sweep effect, inspired by the Dia app.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

dia-text-reveal.tsx

Demo

The demo file is not included by default. Download it and drop it into your project.

dia-text-reveal-demo.tsx

The cycling word demo shown in the gallery preview.

Usage

import { DiaTextReveal } from "@/components/unlumen-ui/dia-text-reveal";

<DiaTextReveal
  text="Build something beautiful."
  className="text-4xl font-bold"
/>;

Repeating animation

<DiaTextReveal
  text="Keep sweeping."
  repeat={true}
  repeatDelay={1}
  className="text-3xl font-bold"
/>

Custom colors

<DiaTextReveal
  text="Your colors."
  colors={["#60a5fa", "#a78bfa", "#f472b6"]}
  className="text-3xl font-bold"
/>

API Reference

DiaTextReveal

text
string
—

The text to animate.

colors?
string[]
["#f0abfc", "#f472b6", "#fb923c", "#facc15", "#a3e635"]

Array of CSS color strings for the gradient stops.

duration?
number
1.5

Sweep animation duration in seconds.

delay?
number
0

Delay before animation starts in seconds.

repeat?
boolean
false

Whether to repeat the animation indefinitely.

repeatDelay?
number
0.5

Pause between repeats in seconds.

startOnView?
boolean
true

Whether to trigger the animation when the element enters the viewport.

once?
boolean
true

When startOnView is true, whether to only animate once.

inViewMargin?
UseInViewOptions["margin"]
—

Margin for the viewport intersection observer (rootMargin).

className?
string
—

Extra classes applied to the span element.

Notes

  • Uses background-clip: text and text-transparent for the gradient-on-text effect.
  • Animates backgroundPosition across a wider-than-element gradient (300% 100%) for the sweep.
  • Viewport-aware: animation triggers when element enters view (configurable with startOnView).

Credits

Credit to Dia for the original design inspiration and The Browser Company for the amazing work.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.