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

12 props

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

Default0.09

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

delaynumber

Default0

Base delay in seconds before the first unit begins animating.

blurnumber

Default12

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

Defaulttrue

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

whileInViewboolean

Defaultfalse

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.

Notes

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.