Typographystable

SplitFlap

An airport board that flips one character at a time: text, clock or countdown.

DDDEEEPPPAAARRRTTTUUURRREEESSS

Customize

Contentwhat the board shows

Valuevalue

Modemode

Cells10length

Motionflip speed and cascade

Step55 msstepDuration

Stagger per cell45 msstagger

Lookcell size and colours

Cell width44 pxcharWidth

Cell height64 pxcharHeight

Font size34 pxfontSize

Gap4 pxgap

Corner radius6 pxradius

Text colourcolor

Cell colourbackground

TSX

import { SplitFlap } from "zerogravity"

<SplitFlap />

Generated from the controls above. Only props that differ from their defaults are shown.

13 documented props on SplitFlap
Property	Type	Default	Description
`value`	`string`	`"DEPARTURES"`	Value.
`mode`	`"text" \| "clock" \| "countdown"`	`"text"`	Mode.
`length`	`number`	`10`	Cells. Range 1 to 16.
`stepDuration`	`number`	`55`	Step. Range 20 to 220 ms.
`stagger`	`number`	`45`	Stagger per cell. Range 0 to 220 ms.
`charWidth`	`number`	`44`	Cell width. Range 20 to 110 px.
`charHeight`	`number`	`64`	Cell height. Range 30 to 160 px.
`fontSize`	`number`	`34`	Font size. Range 12 to 90 px.
`gap`	`number`	`4`	Gap. Range 0 to 20 px.
`radius`	`number`	`6`	Corner radius. Range 0 to 20 px.
`color`	`string`	`"#f5f5f7"`	Text colour.
`background`	`string`	`"#141419"`	Cell colour.
`target`	`Date \| number`	`—`	Deadline for countdown mode.

0 external runtime dependencies

Ships with nothing but React.