Split Text
Letters or words rise into place one after another when the text scrolls into view. The start offset, opacity and tilt are yours to set.
import { SplitText } from "pleate/effects/split-text";Letters and tilted words
Hello, Lisbon
Words can tilt in from the side, too.
Props
- text
The text.
string- by
How the text is cut.
"letter" | "word"default "letter"- from
Where each piece starts.
{ x?, y?, opacity?, rotate? }default { y: 40, opacity: 0 }- stagger / duration / delay
Timing in seconds.
numberdefault auto / 0.6 / 0- once
Play only the first time it enters the view.
booleandefault true- onComplete
Called after the last piece lands.
() => void- as
Element to render.
ElementType
Accessibility
- The full sentence is read once; the pieces are hidden from assistive tech.
- Reduced motion shows the text in place.