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

File Structure

Usage

"use client";

import { RevealText } from "@/components/ui/reveal-text";

export function HeroReveal() {
  return (
    <RevealText
      as="h2"
      className="font-semibold text-xl tracking-tight sm:text-2xl"
      split="word"
      text="Design meets motion, one word at a time"
      whileInView
    />
  );
}

Props

Props
Description

RevealText

text

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

Type string | string[]

as

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

Type React.ElementType·Default "span"

className

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

Type string

split

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

Type "word" | "char"·Default "word"

stagger

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

Type number·Default 0.09

delay

Base delay in seconds before the first unit begins animating.

Type number·Default 0

blur

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

Type number·Default 12

yOffset

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

Type string | number·Default "40%"

spring

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

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

once

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

Type boolean·Default true

whileInView

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

Type boolean·Default false

children

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

Type React.ReactNode

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.

Contact

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

Design meets motion, one word at a time