borjaperfra / beatdeck

# beatdeck
**Try it:** the demo deck · the Kernel Panic showcase
— click or → to advance, O for the overview, P for the presenter window.
**Talks as beats, not slides.** A fixed 1920×1080 React stage where one click is one beat. Motion is
authored, the state is `{ scene, beat }`, every beat rebuilds from the URL, and the build runs with Wi-Fi off.
It comes with a presenter window, an overview and a debug panel, plus a Claude Code skill that writes the talk
with you.
 [code] 
`init` turns the copy into a clean talk project: it removes the showcase, the plugin files, this README and
beatdeck's CI, renames the package, writes title, author, language and theme into the deck, and leaves a blank
two-scene starter (title, questions) plus `reference/`, a content audit, a runbook and a CI workflow for the
talk. `--demo` keeps the demo deck instead.
## Why
Slides are pages: you flip them. A talk that feels like a live system, with a diagram that grows, a counter
that runs or a crash that cuts to black, is a sequence of **beats** inside a few **scenes**. beatdeck makes
that the model:
- **One click = one beat.** Clickers (PageDown/PageUp), arrows, space, number keys and mouse all work.
- **Deterministic.** The whole state is `{ scene, beat }` plus the beat's automatic sub-state. `#3.4` in the
 URL always renders the same frame, whether you got there going forwards, going back, jumping or refreshing.
- **Automatic motion only where you want it.** A beat can run a GSAP timeline (a boot log, a counter, a
 cascade). Everything else waits for the speaker.
- **One stage.** Fixed 1920×1080, scaled with black letterbox. Nothing reflows on the projector.
- **Offline.** Fonts, images and QR codes are all bundled or computed locally. `npm run build` fails if anything
 references the network.
- **Operator tools.** A presenter window (P) with current/next beat, notes and a timer, synced over
 BroadcastChannel. An overview (O) to jump anywhere. Blackout (B). A debug panel with `?debug=1`.
## How a deck looks
 [code] 
 [code] 
Built in: `Reveal`, `Scene`, `CountUp`, `Typewriter`, `Terminal` (real commands and output, character-exact,
with highlights and labels), `NodeBox` + `Arrow` (diagrams that draw themselves), `Plot` + `Zone` / `Series` /
`Marker` / `PlotLabel` (charts), `QR` (computed locally).
The demo in `deck/` (7 scenes, 24 beats) uses every pattern: an automatic boot, a strike-through, a diagram
built node by node, terminal output with highlights, a chart, a self-counting number, and a locally generated
QR code. A new talk starts from a blank two-scene deck instead (`init --demo` keeps this one).
## Commands
| | |
| --- | --- |
| `npm run dev` | dev server at `http://127.0.0.1:5173/#1.1` |
| `npm run build` | typecheck + bundle + offline check → `dist/` (self-contained, any static server) |
| `npm run present` | build and open the production build locally |
| `npm run shot -- 3 4.2` | quick frames of a few beats (a scene, a beat, a range) from the dev server → `