How to Turn an Old TV into a Vintage Airport Flip Board

Real mechanical split-flap displays that used to hang in train stations and airport terminals cost a fortune. If you want to buy one for your home or office, commercial manufacturers will charge three to five thousand dollars. The flipoff repository solves this problem with a purely digital solution.

The project turns any screen, tablet, or TV with a browser into a classic information board with clicking flaps and random character animation when text changes.

No Bundlers or Third-Party Libraries

The repository has no package.json, Node.js, or React. The author wrote the entire project in pure HTML, CSS, and vanilla JavaScript.

To launch the board, just clone the repository and open index.html locally by double-clicking, or spin up a simple HTTP server:

git clone https://github.com/magnum6actual/flipoff.git
cd flipoff
python3 -m http.server 8080

After opening the page, the browser waits for the first click anywhere to unlock audio playback via the Web Audio API. Pressing the F key expands the board to fullscreen, hiding extra interface elements.

How Animation and Sound Work

Instead of complex Canvas rendering, the project uses a grid of DOM elements. Each board segment has its own state and update logic.

When a message changes, the script updates not the entire grid at once, but only those tiles whose characters actually changed. Just like a real mechanism. Before locking in the final letter or digit, the tile goes through a scramble sequence, quickly cycling through random characters and changing background colors.

The clicking sound was recorded from a real mechanical board. To make the project work completely offline without loading external assets, the author encoded the audio file in Base64 directly inside the JS script flapAudio.js. The sound track starts synchronously with the beginning of tile flipping.

You can control the board with your keyboard:

• Enter or Space switches to the next text
• Left and right arrows scroll messages backward and forward
• F enables fullscreen mode
• M mutes sound

Customizing for Your Needs

All basic parameters are extracted into a separate file js/constants.js. There you can edit:

• List of messages and quotes
• Grid dimensions (variables GRID_COLS and GRID_ROWS)
• Animation speed and flip delay
• Color palette for backgrounds

If you need to display live data instead of hardcoded quotes—like CI build statuses, weather, or exchange rates—you can rewrite MessageRotator.js to fetch data via regular fetch() from a local API.

Where You Can Use It

These look great as a dashboard on a TV in a lounge area, in an office, or on an old iPad gathering dust on a shelf. The project requires no internet, doesn't burden the CPU with complex calculations, and scales correctly to any screen resolution, up to 4K.

The code is written transparently and broken down into small isolated classes (Tile.js, Board.js, SoundEngine.js), so understanding the mechanics or adapting the project to your needs should take literally half an hour.