Docs·Dia Text Reveal

Dia Text Reveal

A sweeping gradient band reveals text, then settles on your theme foreground color.

Installation

$pnpm dlx shadcn@latest add @spiderui/dia-text-reveal

Usage

Design inspired by Dia Browser.

API Reference

PropTypeDefault
textText to display. Use an array to rotate between strings when repeat is on.
string | string[]—
colorsColors in the sweeping gradient band.
string[]Dia palette (5 colors)
textColorSolid text color after the animation completes.
string"var(--foreground)"
durationSweep duration in seconds.
number1.5
delayDelay before the sweep starts, in seconds.
number0
repeatWhen text is an array, advance to the next string after each cycle.
booleanfalse
repeatDelayPause in seconds before replaying or advancing.
number0.5
startOnViewStart the animation when the element enters the viewport.
booleantrue
oncePlay only the first time when using in-view detection.
booleantrue
fixedWidthLock width to the widest string when text is an array to reduce layout shift.
booleanfalse
classNameAdditional CSS classes on the root span.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Spider UI

import { DiaTextReveal } from "@/components/ui/dia-text-reveal"
export default function Page() {
  return (
    <h1 className="font-serif text-4xl font-semibold">
      <DiaTextReveal text="Spider UI" />
    </h1>
  )
}