Split Flap Text
A departures board: each tile flips through the alphabet until it lands on its letter. Change the text and it flips to the new one.
import { SplitFlapText } from "pleate/effects/split-flap-text";Departures
LISBON 08:45
Props
- text
Uppercased when every character is in the set.
string- characters
What the flaps cycle through, in order.
stringdefault " A-Z 0-9 : . -"- step
Milliseconds per flip.
numberdefault 70- stagger
Milliseconds between tiles.
numberdefault 40- tileClassName
Classes for each tile.
string
Accessibility
- Screen readers get the final text once; the tiles are hidden.
- Reduced motion shows the final text.