Real-time split-flap display simulator in the browser. Push messages via API and watch them flip into place with mechanical sound effects and color flashes — like an airport departure board.

node >= 18 License: MIT

npm install
npm start

Open http://localhost:3420

The display is a 20-column x 8-row grid. Each cell animates through random characters before landing on the target — just like a real split-flap mechanism. A new color palette is generated for every transition.

In the browser:

• SFX button toggles procedural mechanical sound (Web Audio API)

Each URL path creates an independent display session:

http://localhost:3420/ → default session
http://localhost:3420/office → "office" session
http://localhost:3420/tv → "tv" session

Sessions are created when someone opens the URL and removed when the last viewer disconnects.

Open http://localhost:3420/dashboard to see all active sessions on a single screen. The grid auto-adjusts (1 session = fullscreen, 4 = 2x2, 9 = 3x3, etc.). Canvas-rendered for performance — handles 40+ simultaneous sessions. Click any panel to open its full display.

Sessions appear and disappear in real-time as viewers connect and disconnect.

# Default session
curl -X POST http://localhost:3420/api/message \
 -H 'Content-Type: application/json' \
 -d '{"lines": ["HELLO", "WORLD"]}'
# Named session
curl -X POST http://localhost:3420/api/message/office \
 -H 'Content-Type: application/json' \
 -d '{"lines": ["STANDUP", "10:00 AM"]}'

Response:

{ "ok": true, "session": "office", "clients": 2 }

Text is automatically uppercased and centered on the grid. If a line contains two or more consecutive spaces, it's treated as a label-value pair and aligned to the edges:

Input: "GATE B42"
Output: "GATE B42"

Messages queue up automatically. If a message arrives while flipping, it waits 3 seconds after the current flip finishes before displaying.

curl http://localhost:3420/api/events # default session
curl http://localhost:3420/api/events/office # named session
curl http://localhost:3420/api/events-all # all sessions (used by dashboard)

curl http://localhost:3420/api/sessions

Load a message on page open:

http://localhost:3420?lines=FLIGHT+1234|GATE+B42|ON+TIME

Lines are separated by |.

Run a simulated Claude Code session (15 messages, 4s apart):

bash demo.sh # default session
bash demo.sh office # named session

PORT=8080 npm start

The examples/ directory contains shell scripts that hook into Claude Code events and display tool usage on the split-flap board in real-time.

Requires jq and curl on your system.

Add hooks to your Claude Code settings (.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" }]
 }
}

• 20x8 character grid with split-flap flip animation
• Procedural mechanical sound (Web Audio API, two-layer synthesis)
• Random color palette flashes during transitions
• SSE real-time push to all connected clients
• Multiple independent sessions via URL paths
• Canvas-rendered dashboard for monitoring all sessions
• Automatic session discovery (connect/disconnect detection)
• Message queue with 3s hold between flips
• Responsive — fills any screen size
• Zero external frontend dependencies
• Single express backend dependency

MIT