Skip to content
Pinky UI

text

Character Stagger

Preset of Split Text Reveal: `by="character"`. No additional behaviour.

  • text
Variation of

Named character preset for short display text; use Split Text Reveal for other modes. Open Split Text Reveal

Live preview

Quick usage

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

<CharacterStagger />

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

CharacterStagger is a named preset, not a separate implementation: it is exactly <SplitTextReveal {...props} by="character" /> and accepts every SplitTextReveal prop except by. There is no behaviour here that SplitTextReveal does not have.

It gives a short display heading a letter-by-letter entrance — a signature detail for a hero title or a very brief wordmark-like phrase.

Reserve it for roughly 1–5 words. Do not use it on paragraphs, body copy, long links or frequently updated content: many spans increase layout and reading friction. If the heading is long, choose WordStagger.

The final characters are stable, no scrambling glyphs are used, and reduced motion shows the whole phrase immediately. Keep the containing semantic heading and test selection and screen-reader output.

Open this skill on its own page