text

SplitText

Per-character stagger animation that splits text and animates each letter individually with configurable presets and stagger timing from the token system.

v1.0.0react >=18next >=14tailwind >=4motion >=12

textsplitstaggercharacterentranceheadline

Preview

Loading preview...

Props

Prop	Type	Default	Description
`text*`	`string`	`—`	The text string to split and animate per-character
`stagger`	`StaggerName \| number`	`normal`	Stagger delay between characters. Token name or raw ms value.
`preset`	`MotionPresetName`	`fadeUp`	Motion preset for each character's entrance
`triggerOnView`	`boolean`	`true`	Animate when element enters viewport
`viewThreshold`	`number`	`0.2`	Fraction of element visible before triggering
`once`	`boolean`	`true`	Only animate once
`className`	`string`	`—`	Additional Tailwind classes
`id`	`string`	`—`	HTML id attribute

Slots

Slot	Type	Required	Description
`text`	`string`	Yes	The text content split into individually animated characters via the text prop

Layout

Display: block

Responsive: No

Renders as a block div containing inline-block character spans. Works best with large, short text like headings.

Examples

Basic split headline

<SplitText
  text="Hello World"
  className="text-6xl font-bold"
/>

Dramatic entrance with slow stagger

<SplitText
  text="LAUNCH"
  stagger="dramatic"
  preset="slideUp"
  className="text-8xl font-black tracking-widest"
/>

Scale-in with tight stagger

<SplitText
  text="Design System"
  stagger="tight"
  preset="scaleIn"
  className="text-5xl font-semibold"
/>

Blur reveal with custom ms stagger

<SplitText
  text="Focus"
  stagger={100}
  preset="blur"
  className="text-7xl font-bold"
/>

Pop-in letters

<SplitText
  text="New Feature"
  preset="popIn"
  stagger="relaxed"
  className="text-4xl font-bold text-orange-400"
/>

AI Usage Hint

Use SplitText for dramatic headline entrances where each character animates individually. Adjust 'stagger' with token names ('tight' 40ms, 'normal' 80ms, 'relaxed' 150ms, 'dramatic' 250ms) or raw ms values. Combine with any preset — 'fadeUp' for rising text, 'scaleIn' for growing letters, 'blur' for focus-in effect. Best for short headlines, not paragraphs.

Works Well With

GradientTextFadeUpStaggerGroup