Dia Text Reveal

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

Installation

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

PropTypeDefault
text
string
-
colors?
string[]
["#f0abfc", "#f472b6", "#fb923c", "#facc15", "#a3e635"]
duration?
number
1.5
delay?
number
0
repeat?
boolean
false
repeatDelay?
number
0.5
startOnView?
boolean
true
once?
boolean
true
inViewMargin?
UseInViewOptions["margin"]
-
className?
string
-

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.