Split-Flap Display

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.

Quick Start

npm install
npm start

Open http://localhost:3420

How It Works

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)

Sessions

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.

Dashboard

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.

API

Push a message

# 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.

Live updates (SSE)

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)

List active sessions

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

URL parameters

Load a message on page open:

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

Lines are separated by |.

Demo

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

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

Configuration

Variable	Default	Description
PORT	3420	Server port

PORT=8080 npm start

Claude Code Integration

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" }]
  }
}

Hook	Displays
hook-session.sh	"CLAUDE ONLINE / READY TO WORK" on session start
hook-prompt.sh	"PROCESSING / NEW REQUEST" on new prompt
hook-notify.sh	Tool name + context (e.g. "EDITING server.js", "SEARCHING pattern")
hook-stop.sh	"TASK COMPLETE / READY" when done

Features

• 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

License

MIT