Split Character Stagger

A grapheme-aware split text reveal that uses Intl.Segmenter when available, transform-only staggered spans, and readable fallback text.

Duration: 2s
Resolution: 1440×900
Format: CSS

intl-segmentergraphemestaggersplit-textaccessibility

Intl.Segmenter / Grapheme-safe Reveal

Split Character Stagger

Grapheme-aware spans stagger into place when segmentation is available, while the final readable phrase remains the source of truth.

latin headline grapheme stagger - 1.4s cycle · 1.00 intensity

Cascade

Letter rise · short cascade

Latin Headline

A concise word reveals one grapheme at a time with transform and opacity only.

Each grapheme owns a delay index, but the parent line box stays constant throughout the cascade.

Go 🚀 Now

Combined glyphs stay intact

Emoji-Safe Label

The segmentation path avoids slicing emoji or combining sequences into broken pieces.

Delay is assigned per grapheme cluster, not per UTF-16 code unit.

모션 패턴

Non-Latin split guard

Hangul Phrase

A non-Latin phrase demonstrates that the visual split should follow user-perceived characters.

Stagger indexes are generated from a segmentation pass instead of manual character counting.

Cascade

Motion contract: Each grapheme owns a delay index, but the parent line box stays constant throughout the cascade.
Accessibility: The full string is exposed as the label. Split spans are a visual presentation of the same content.

Cycle duration1.4s

Motion intensity1.00

This keeps the visual split independent from layout measurement and avoids hard-coded text widths.

const parts = Intl.Segmenter
  ? [...new Intl.Segmenter(undefined, { granularity: 'grapheme' }).segment(text)]
  : Array.from(text);

.split-char {
  display: inline-block;
  animation: splitRise 1.35s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--index) * 52ms);
}