Agent skill · design visual · aradotso
flipoff-split-flap-display
Expert skill for building, customizing, and embedding the FlipOff split-flap display emulator — a free, offline-capable web app that turns any browser/TV into a retro airport departure board.
Why this skill is useful
Provides specific configuration patterns and customization options for the FlipOff emulator that the AI wouldn't reliably generate on its own.
What it needs
Requires git, python3 installed locally. About 5k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
FlipOff Split-Flap Display Emulator Skill by ara.so — Daily 2026 Skills collection. FlipOff is a pure vanilla HTML/CSS/JS web app that emulates classic mechanical split-flap (flip-board) airport displays. No frameworks, no npm, no build step — open index.html and you have a full-screen retro display with authentic scramble animations and clacking sounds. --- Installation Audio note: Browsers block autoplay. The user must click once to enable the Web Audio API context. After that, sound plays automatically on each message transition. --- File Structure --- Key Configuration — js/constants.js Everything you'd want to change lives in one file: --- Adding Custom Messages Edit MESSAGES in js/constants.js. Each message is a plain string. The board wraps text across the grid automatically. Padding rules: Messages shorter than the grid are padded with spaces. Messages longer than the grid are truncated. Keep messages at or under GRIDCOLS × GRIDROWS characters. --- Changing Grid Size After changing grid dimensions, tiles re-render automatically on next page load. --- Keyboard Shortcuts Key Action ----- -------- Enter / Space Next message Arrow Left Previous message Arrow Right Next message F Toggle fullscreen M Toggle mute Escape Exit fullscreen --- Programmatic API Board MessageRotator SoundEngine KeyboardController --- Embedding FlipOff in Another Page As an iframe Inline embed (pull in just the board) --- Custom Color Themes --- Common Patterns Show real-time data (e.g., a flight API) Cycle through a custom message list React/Vue wrapper (import as a module) --- Troubleshooting Problem Fix --- --- No sound User must click/interact first; Web Audio requires a user gesture Sound works locally but not deployed Ensure flapAudio.js (base64) is served; check MIME types Tiles don't animate Verify CSS tile.css is loaded; check for JS console errors Grid overflows on small screens Reduce GRIDCOLS/GRIDROWS in constants.js or add CSS overflow: hidden Fullscreen not working F key cal …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/flipoff-split-flap-display