Split Flap
A departure-board row where each cell folds through its drum in CSS 3D to the target character, staggered across the row.
Preview
Departures
Terminal 2
| TIME | DESTINATION | GATE | STATUS |
|---|---|---|---|
| 14:05 | HARBOUR CITY | B12 | BOARDING |
| 14:20 | NORTH POINT | A03 | ON TIME |
| 14:35 | SALT FLATS | C07 | DELAYED |
| 14:50 | OLD QUAY | B04 | ON TIME |
Now boarding
Large cells, slower flaps
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text to show, uppercased. |
| length | number | — | Pad or trim to this many cells so a column keeps its width. |
| charset | string | space, 0–9, :, A–Z, . - / | Drum order each cell turns through. |
| flipDuration | number | 90 | ms per flap. |
| stagger | number | 45 | ms between neighbouring cells starting. |
| animateOnMount | boolean | true | Start blank and flip in; off shows the first text at once. |
| size | "sm" | "md" | "lg" | "md" | 15, 22 or 34 px glyphs. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.