Split-Flap Board

About this component

A departure board of CSS 3D split-flap characters that flick through random glyphs before settling on each phrase, rippling across the columns and cycling through a list. Columns, rows, timing, flip count, ripple, capitals and the flap, ink and split colors are props. Transforms only from one loop that sleeps between phrases; it pauses offscreen and shows the first phrase still for reduced motion.

Usage

The import and the props worth knowing about, in one place.

import { SplitFlap } from "@/components/beste/component/split-flap";

<div className="rounded-2xl bg-[#121211] p-6">
  <SplitFlap phrases={["Sleep in Paris, wake in Vienna", "Lisbon to Madrid, 22:05"]} />
</div>

<SplitFlap
  phrases={["Now boarding", "Platform 4"]}
  columns={12}          // characters per row
  interval={4000}       // milliseconds per phrase
  flips={3}             // random glyphs before each character settles
  stagger={0.8}         // a slower ripple across the board
  flapColor="#1b2a3a"
  inkColor="#ffd166"
/>

Props

Read from the component's own type, so this cannot drift from what it accepts.

Prop	Type	Default	Description
`phrases`*	`string[]`	—	Phrases the board flips through, wrapped into rows automatically
`columns`	`number`	—	Characters per row
`rows`	`number`	—	Most rows a phrase may take
`interval`	`number`	—	Milliseconds each phrase stays on the board
`flips`	`number`	—	Most random glyphs a cell shows before it settles
`stagger`	`number`	—	How far the flips ripple across the board, 0 (all at once) to 1 (a slow wave)
`uppercase`	`boolean`	—	Show phrases in capitals, the way departure boards set them
`flapColor`	`string`	—	Color of the flaps
`inkColor`	`string`	—	Color of the characters
`splitColor`	`string`	—	Color of the hairline split across each flap
`paused`	`boolean`	—	Freeze the board on its current phrase
`className`	`string`	—

More Text components

View all Text

Seen from across the street. Read by someone in a hurry. Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.Seen from across the street.Read by someone in a hurry.Remembered for years after.

Split-Flap Board

Usage

Props

More Text components

Loud type, strict grid.