flipoff-Aeroplanes
Free split-flap display emulator for any TV. The classic flip-board look, without the $3,500 hardware.
Why this exists
Real split-flap boards cost thousands. FlipOff turns any television or monitor into one, and it is a single index.html with no build step and no dependencies.
Open the file, click once to unlock audio, press F for full-screen TV mode. That is the entire setup.
The constraint is the design
A mechanical flap board has no pixels. Each cell is a physical stack of cards on a spindle, and to get from A to B the mechanism flips forward through every card in between. It cannot fade, slide, or cross-cut.
Reproducing that rule — rather than approximating it with a nice-looking text animation — is what makes the thing read as machinery instead of a web page.
Details that carry it
- Two halves per cell, different easings. Real flaps accelerate as they fall and stop hard. Getting the overlap right between the rotating halves took longer than the rest of the project.
- Randomised scramble. Cells get a random start delay and a random number of intermediate flips before settling, so a board change lands unevenly like a real mechanism. Without the randomness it looks like a spreadsheet updating.
- Recorded sound. The clacking is sampled from a real split-flap display, not synthesised — the uneven transients are the part a sine burst cannot fake. Playback is staggered to match the visual scramble.
- Keyboard-first.
Enter/Spacefor the next message, arrows to step,Fto toggle full-screen.
Why no framework
Not dogma. Three concrete reasons: it works offline forever with nothing to go stale, it runs on a TV with no install step, and anyone can open the file and change a colour or add messages. The whole point is that the free version is genuinely yours.
It ships with an auto-rotating set of quotes, but the message list is a plain array you can replace in seconds.
FlipOff.
Turn any TV into a retro split-flap display. The classic flip-board look, without the $3,500 hardware. And it’s free.
What is this?
FlipOff is a free, open-source web app that emulates a classic mechanical split-flap (flip-board) airport terminal display — the kind you’d see at train stations and airports. It runs full-screen in any browser, turning a TV or large monitor into a beautiful retro display.
No accounts. No subscriptions. No $199 fee. Just open index.html and go.
Features
- Realistic split-flap animation with colorful scramble transitions
- Authentic mechanical clacking sound (recorded from a real split-flap display)
- Auto-rotating inspirational quotes
- Fullscreen TV mode (press
F) - Keyboard controls for manual navigation
- Works offline — zero external dependencies
- Responsive from mobile to 4K displays
- Pure vanilla HTML/CSS/JS — no frameworks, no build tools, no npm
Quick Start
- Clone the repo
- Open
index.htmlin a browser (or serve with any static file server) - Click anywhere to enable audio
- Press
Ffor fullscreen TV mode
# Or serve locally:
python3 -m http.server 8080
# Then open http://localhost:8080Keyboard Shortcuts
| Key | Action |
|---|---|
Enter / Space | Next message |
Arrow Left | Previous message |
Arrow Right | Next message |
F | Toggle fullscreen |
M | Toggle mute |
Escape | Exit fullscreen |
How It Works
Each tile on the board is an independent element that can animate through a scramble sequence (rapid random characters with colored backgrounds) before settling on the final character. Only tiles whose content changes between messages animate — just like a real mechanical board.
The sound is a single recorded audio clip of a real split-flap transition, played once per message change to perfectly sync with the visual animation.
File Structure
flipoff/
index.html — Single-page app
css/
reset.css — CSS reset
layout.css — Page layout (header, hero, board)
board.css — Board container and accent bars
tile.css — Tile styling and 3D flip animation
responsive.css — Media queries for all screen sizes
js/
main.js — Entry point and UI wiring
Board.js — Grid manager and transition orchestration
Tile.js — Individual tile animation logic
SoundEngine.js — Audio playback with Web Audio API
MessageRotator.js — Quote rotation timer
KeyboardController.js — Keyboard shortcut handling
constants.js — Configuration (grid size, colors, quotes)
flapAudio.js — Embedded audio data (base64)Customization
Edit js/constants.js to change:
- Messages: Add your own quotes or text
- Grid size: Adjust
GRID_COLSandGRID_ROWS - Timing: Tweak
SCRAMBLE_DURATION,STAGGER_DELAY, etc. - Colors: Modify
SCRAMBLE_COLORSandACCENT_COLORS
Support FlipOff
If this project is useful to you, you can support its maintenance with a coffee:
License
MIT — do whatever you want with it.