Browser-native split-flap (departure board) display. Type a message, pick a style, watch it flip — and share it with a link.
Try it now → https://sierralx.github.io/Splitflap/ (enable GitHub Pages on this repo to activate)
Single HTML file. No server. No dependencies. No build step. Just open index.html.
- Split-flap animation — each tile scrambles through random characters, then lands with a physical flip, cascading column by column like a real departure board.
- Mechanical sound — clicks synthesized in real time with the Web Audio API; every flip gets a slightly randomized pitch for an authentic clatter. Mutable.
- 4 style presets — Classic (white on black), Airport (amber), Matrix (green), Neon (violet). Your choice is remembered.
- Multiple slides — separate messages with
---on its own line; the board auto-cycles through them at a configurable interval (5–600 s). - Shareable links — every message generates a URL (
#t=...). Send the link and anyone opening it sees your exact message, animated. - Fullscreen mode — one keypress in,
Escout. Built for big screens and parties. - Responsive — the board scales to fit any viewport automatically.
- Blank rows — empty lines render as blank rows.
- Open the page.
- Type your message in the box (it auto-runs on load).
- Pick a style, set the cycle interval, press RUN.
- Press COPY LINK to share your message with anyone.
GATE A14 LONDON
DEPARTURE 09:30
STATUS BOARDING
---
AFTER PARTY
MIDNIGHT
ROOFTOP
| Key | Action |
|---|---|
Enter |
Run animation |
Shift + Enter |
New line |
F |
Toggle fullscreen |
Esc |
Exit fullscreen |
One self-contained index.html: a 6×22 tile grid, CSS clip-path split tiles with a 3D flip overlay, staggered scramble-and-land sequencing in vanilla JS, and Web Audio clicks. No frameworks, no assets, no network calls.
MIT — see LICENSE.