Reveal Text

Staggered word or character reveal with spring lift, blur fade, and optional scroll-triggered playback.

Installation

npx shadcn@latest add @iconiq/reveal-text

Props

RevealText

Staggered text reveal that animates each word or character upward with blur and opacity, with optional viewport-triggered playback and reduced-motion fallbacks.

textstring | string[]

Required

Copy to reveal. Pass one string or multiple lines; each line renders on its own block row.

asReact.ElementType

Default "span"

Root element type for the reveal container while preserving the same split and stagger behavior.

classNamestring

Merged onto the root container for typography, spacing, and layout overrides.

split"word" | "char"

Default "word"

Controls whether the animation staggers by word or by individual character.

staggernumber

Default 0.09

Delay in seconds added between each word or character in the sequence.

delaynumber

Default 0

Base delay in seconds before the first unit begins animating.

blurnumber

Default 12

Starting blur amount in pixels for each unit before it settles into focus.

yOffsetstring | number

Default "40%"

Starting vertical offset for each unit. Accepts Motion-friendly values such as percentages or pixel lengths.

spring{ stiffness?: number; damping?: number; mass?: number }

Optional spring overrides for the vertical settle motion on each unit.

onceboolean

Default true

When whileInView is enabled, controls whether the in-view trigger should fire only once.

whileInViewboolean

Default false

When true, the reveal waits until the root enters the viewport before animating.

childrenReact.ReactNode

Optional content rendered after the animated text lines inside the root container.

Reduced-motion users receive a shorter opacity-only reveal while preserving readable timing.

Duplicate words or characters on the same line receive stable keys so repeated units still animate independently.

Reveal transition behavior

Each unit animates y, opacity, and filter on independent timelines so the blur fade can trail slightly behind the spring settle.

Word mode preserves spaces between tokens with non-breaking space spans.

Character mode uses Array.from so multi-byte characters split correctly.

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.