Skip to content
Pinky UI

text

Split Text Reveal

Stable word, character or line entrance. The canonical text reveal — Word Stagger and Character Stagger are its presets.

  • text
Related pattern

Choose the split mode with `by`; named stagger entries are convenience presets.

Live preview

Quick usage

usage
import { SplitTextReveal } from "@pinky-ui/effects";

<SplitTextReveal />

Install

Add @pinky-ui/effects as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/effects

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Motion never carries the only meaning; the underlying content remains in the DOM.
  • Pair pointer effects with an equivalent focus or keyboard state where the target is interactive.

Reduced motion

The effect resolves to a static readable state when motion is reduced.

When to use

  • As a restrained enhancement to meaningful content.

When not to use

  • When the content or control would be unclear without motion.

Skill

Purpose

SplitTextReveal reveals a short text block by word, character or line while keeping the final text in stable DOM order. It is intended for display headings and compact editorial statements.

Choose words by default; use lines only when the line breaks are intentionally authored. Use characters for short headings, never for a paragraph or a long navigation label. Keep stagger under about 50ms and travel small.

The final characters are present from the start and are not replaced with placeholder glyphs. Reduced motion renders them immediately. Keep the heading selectable and ensure the surrounding semantic heading remains a real h1/h2 when the component is placed inside one.

Open this skill on its own page