Toggle Sidebar B
AppearanceLight & dark mode D

Split Flap Text

Mechanical split-flap departure board that clacks through to each new phrase.

Default

Pick a phrase set and the board flips through it. Every prop is wired to the controls underneath.

Light previewReplay previewOpen in new tab

Customize

Phrase Set
Charset
Tile Color
Text Color
Flip Duration0.12s
Stagger0.06s
Cycle Delay2400ms
Flips8
Pad To12
Font Size52px
Tile Radius8px
Gap6px

API Reference

SplitFlapText

PropTypeDefaultDescription
wordsstring[]["LAUNCH READY", "SYNC ONLINE", "SIGNAL LIVE"]Phrases to cycle through like a departure board.
textstringundefinedOptional single phrase. When set, it takes precedence over words.
flipDurationnumber0.12Duration, in seconds, of each individual flap turn.
staggernumber0.06Delay, in seconds, between each tile starting its cascade.
cycleDelaynumber2400Hold time, in milliseconds, before cycling to the next phrase.
charset"alpha" | "alphanumeric" | "numeric" | string"alphanumeric"Characters used for the intermediate flip glyphs.
flipsPerCharnumber8Number of intermediate glyphs each changed tile flips through.
tileColorstring"#111827"Base color of each mechanical tile.
textColorstring"#f8fafc"Color of the glyphs on every flap.
tileRadiusnumber | string8Corner radius for each tile.
gapnumber | string6Space between adjacent flap tiles.
fontSizenumber | string52Tile type size. Numeric values are treated as pixels.
loopbooleantrueWhether the phrase array repeats after the final phrase.
padTonumber12Fixed tile count used to keep the board width stable.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The tiles are hidden from assistive tech and the board carries an aria-label with the phrase currently shown.
  • With prefers-reduced-motion the board swaps phrases without flipping.