Dia Text

Text reveal with gradient sweep, repeats, and optional rotation.

Installation

npx shadcn@latest add @iconiq/dia-text

File Structure

Usage

"use client";

import { DiaText } from "@/components/ui/dia-text";

export function HeroHeadline() {
  return (
    <p className="font-light text-4xl tracking-tight">
      Make interfaces feel{" "}
      <DiaText
        repeat
        repeatDelay={1.1}
        text={["smooth.", "focused.", "refined."]}
      />
    </p>
  );
}

Props

Props
Description
text

Single string to reveal, or an array of strings to cycle through. When you pass multiple entries, the component tracks an active index and can animate width between them.

Type string | string[]

colors

Gradient stops used for the sweep band. If omitted, the component uses its built-in five-color palette.

Type string[]

textColor

Base text color used before and after the animated color band passes across the text.

Type string·Default "var(--foreground)"

duration

Duration of the sweep animation in seconds for each reveal cycle.

Type number·Default 1.5

delay

Delay in seconds before the reveal animation begins.

Type number·Default 0

repeat

When true, the component keeps replaying the sweep and advances through the text array if multiple entries are provided.

Type boolean·Default false

repeatDelay

Pause in seconds between repeated reveal cycles.

Type number·Default 0.5

triggerOnView

Toggles viewport-based playback. When true, the reveal waits until the span enters view before it starts.

Type boolean·Default true

once

Controls whether in-view playback should only happen once or be allowed to replay when the element re-enters view.

Type boolean·Default true

fixedWidth

When rotating multiple text entries, fixes the rendered width to the widest measured string instead of animating width between each item.

Type boolean·Default false

className

Merged onto the rendered motion span for local typography or layout overrides.

Type string

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Make interfaces feel smooth.