SplitReveal

Splits text into characters, words, or lines and reveals each unit on scroll. Built on SplitText + ScrollTrigger.

The quick brown fox jumps.

Usage

import { SplitReveal } from '@bwo-ui/react';

<SplitReveal type="words,chars" stagger={0.02} from={{ y: 40, opacity: 0 }}>
  <h1>Your shortcut to a beautiful UI.</h1>
</SplitReveal>

Props

Prop	Type	Default	Description
`type`	`'chars' \| 'words' \| 'lines' \| 'words,chars' \| 'chars,words,lines'`	`'words'`	What to split the text into.
`stagger`	`number`	`0.04`	Stagger between units in seconds.
`duration`	`number`	`0.6`	Per-unit tween duration.
`from`	`{ y?, x?, opacity?, rotate?, scale? }`	`{ y: 24, opacity: 0 }`	Starting transform/opacity for each unit.
`ease`	`string`	`'power3.out'`	GSAP ease.
`scrub`	`boolean \| number`	`false`	When true (or a lag number), the tween scrubs with scroll.
`once`	`boolean`	`true`	Play only once when entering the viewport.
`start`	`string`	`'top 85%'`	ScrollTrigger start position.
`mask`	`'lines' \| 'words' \| 'chars' \| false`	`false`	Wrap each unit in an overflow-clip mask for clean reveals.

Notes

autoSplit is enabled internally — splits are recomputed when fonts finish loading or the container resizes.
The component picks the smallest available unit (chars → words → lines) to animate.