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
License
MIT — do whatever you want with it.