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.

npx degit borjaperfra/beatdeck my-talk && cd my-talk
npm run init -- --title "My talk" --author "Your Name" --lang en   # --theme light for bright rooms, --demo to keep the demo
npm install
npm run dev          # http://127.0.0.1:5173

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

deck/
  deck.config.ts     title, speaker, QR target, timings
  scenes.ts          the beat map: scenes → beats (+ source refs and speaker notes)
  timeline.ts        automatic beats: initialLive(pos) + timeline(pos, host)
  index.tsx          defineDeck({...}) + the Stage (layer order) + theme
  scenes/*.tsx       one layer per scene

import { Reveal, Scene, useScene } from 'beatdeck';

function Idea_() {
  const { here, b } = useScene();
  return (
    <>
      <Reveal on={here} x={150} y={150}>Slides are pages.</Reveal>
      <Reveal on={here && b >= 1} x={150} y={360}>Talks are beats.</Reveal>
    </>
  );
}
export const Idea = () => <Scene index={1}><Idea_ /></Scene>;

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