There's something deeply satisfying about split-flap displays. Those mechanical boards at airports and train stations where characters flip through panels with a distinctive clacking sound before landing on the right letter. They turn mundane information — a gate number, a departure time — into a small event.
We built Split-Flap Display, an open source simulator that recreates this experience in the browser. Push messages through a simple API, and watch them flip into place with procedural sound effects and color transitions. No dependencies on the frontend, a single Express server on the backend.
Why we built it
We wanted a visual way to monitor what Claude Code is doing while it works autonomously. Terminal output is functional but forgettable. We wanted something you could put on a second monitor, a TV on the wall, or a tablet on your desk — something that makes AI work visible and tangible.
The split-flap metaphor works perfectly for this. Each tool call becomes a flip event: "READING server.js", "EDITING auth.ts", "RUNNING npm test". You glance at the board and immediately know what's happening. When Claude finishes, the board flips to "TASK COMPLETE / READY".
How it works
The entire system is a single Node.js server with zero frontend dependencies. The display is pure HTML, CSS, and vanilla JavaScript.
The grid
The display is a 20-column × 8-row grid. Each cell is a split-flap unit with a top half, a bottom half, and a character overlay. When a cell needs to change, it cycles through random characters with increasing delay (cubic easing) before landing on the target:
function getDelay(step, totalSteps) {
const progress = step / totalSteps;
const eased = progress * progress * progress;
return 25 + eased * 200;
}
Each flip triggers a CSS animation that adds a subtle 3D rotation, and optionally a procedural click sound synthesized with the Web Audio API — a noise burst for the click transient, plus a sine oscillator for the low thump of the flap body.
Color palette system
Every new message generates a fresh color palette from a base hue. During transitions, random cells flash with palette colors while ambient flashes ripple across the board. When the flip completes, corner markers glow with the palette color. This makes each message arrival feel like an event, not just a text update.
Push API
Sending a message is a single POST request:
curl -X POST http://localhost:3420/api/message \
-H 'Content-Type: application/json' \
-d '{"lines": ["HELLO", "WORLD"]}'
Text is automatically uppercased and centered. If a line contains two or more consecutive spaces, it's treated as a label-value pair and aligned to the edges — "GATE B42" becomes "GATE B42", just like a real departure board.
Messages queue automatically. If a message arrives while the board is still flipping, it waits 3 seconds after the current flip finishes before displaying.
Sessions
Each URL path creates an independent display session. Open /office and /tv on different screens, and each gets its own message stream via Server-Sent Events:
http://localhost:3420/ → default session
http://localhost:3420/office → "office" session
http://localhost:3420/tv → "tv" session
Sessions are created when a viewer connects and cleaned up after 5 minutes of inactivity.
Dashboard
Open /dashboard to see all active sessions on a single screen. The grid auto-adjusts based on session count (1 = fullscreen, 4 = 2×2, 9 = 3×3). Unlike the individual displays which use DOM elements, the dashboard renders everything on Canvas for performance — it handles 40+ simultaneous sessions smoothly.
Each panel is clickable and shows the session name, character grid with flip animations, ambient flashes, and corner markers — all rendered at 60fps on a single Canvas per panel.
Claude Code integration
The examples/ directory contains shell scripts that hook into Claude Code events. Add them to your .claude/settings.json:
{
"hooks": {
"SessionStart": [{ "command": "bash examples/hook-session.sh" }],
"PreToolUse": [{ "command": "bash examples/hook-prompt.sh" }],
"PostToolUse": [{ "command": "bash examples/hook-notify.sh" }],
"Stop": [{ "command": "bash examples/hook-stop.sh" }]
}
}
The main hook (hook-notify.sh) reads the PostToolUse JSON from stdin and formats a descriptive message based on the tool:
- Edit → "EDITING server.js"
- Read → "READING package.json"
- Bash → "RUNNING npm test"
- Grep → "SEARCHING auth pattern"
- Agent → "AGENT exploring codebase"
Each user gets their own session (based on $USER), so multiple developers can have their own boards running simultaneously.
Technical decisions
Zero frontend dependencies. The display is vanilla JS with CSS animations. No React, no build step, no bundler. You clone the repo, run npm start, and it works. The only backend dependency is Express.
SSE over WebSocket. Server-Sent Events are simpler, unidirectional (which is all we need — server pushes to browser), and reconnect automatically. No handshake protocol, no ping/pong frames.
Canvas for dashboard, DOM for single display. Individual displays use DOM elements because the CSS perspective and rotateX animations give a more convincing 3D flip effect. The dashboard uses Canvas because rendering 40+ independent DOM-based displays would be a performance disaster.
Procedural audio. The click sound is synthesized in real time with Web Audio API rather than playing an audio sample. This means zero latency, natural variation (each click is slightly different), and no audio file to load.
Get started
git clone https://github.com/cloudstudio/split-flap
cd split-flap
npm install
npm start
Open http://localhost:3420 and run the demo:
bash demo.sh
The demo simulates a Claude Code session — 15 messages, 4 seconds apart. Watch the board flip through "READING PACKAGE.JSON", "EDITING SERVER.TS", "RUNNING NPM TEST", and finally "TASK COMPLETE / READY".
It's MIT licensed, has zero config, and runs anywhere Node.js runs. Put it on a Raspberry Pi, a spare monitor, or a browser tab. If you use Claude Code, the hooks make it immediately useful. If you don't, the API is simple enough to integrate with anything that can make an HTTP POST.
