Dia Text

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

Installation

npx shadcn@latest add @iconiq/dia-text

Props

DiaTextReveal

Animated inline text reveal that sweeps a multicolor gradient band across one string or rotates through multiple strings while preserving the same baseline flow.

textstring | string[]

Required

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.

colorsstring[]

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

textColorstring

Default "var(--foreground)"

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

durationnumber

Default 1.5

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

delaynumber

Default 0

Delay in seconds before the reveal animation begins.

repeatboolean

Default false

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

repeatDelaynumber

Default 0.5

Pause in seconds between repeated reveal cycles.

triggerOnViewboolean

Default true

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

onceboolean

Default true

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

fixedWidthboolean

Default false

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

classNamestring

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

The component forwards the remaining Motion span props, so aria attributes, inline data attributes, and other span-level props can still be applied at the call site.

Children are not part of the public API surface here; the rendered content always comes from the text prop.

Motion and width behavior

The reveal is driven by a motion value that builds a gradient band in real time, then optionally replays and rotates through measured text entries.

When multiple text values are provided, the component clones the span to measure each string and can animate the width between entries for a smoother swap.

If triggerOnView is enabled, playback is gated by the local viewport observer instead of always running on mount.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion.