Spatial Deck
11The presentation framework for people who think spatially. One HTML file, runs anywhere, forever.
The story
Built for the HarvardXR 2026 closing keynote, when PowerPoint wasn't going to cut it. A single self-contained HTML file with presenter tooling PowerPoint never gave you: animated canvas media galleries, Web Audio sound design, live annotation and element repositioning mid-presentation, and — critically — a format an AI collaborator can edit with you right up until showtime. The Harvard keynote was a hit; the framework that powered it became Spatial Deck.
Highlights
- ✦One HTML file — no cloud, no build process, no lock-in
- ✦Annotation + move modes designed for AI-collaborative editing
- ✦Canvas media galleries, Web Audio, pixelated reveal effects
- ✦Hands back a pixel-faithful PDF when someone asks for 'the deck'
Docs · live from GitHub wiki
Spatial Deck Wiki
Welcome to the Spatial Deck wiki — everything you need to build, present, and iterate on a Spatial Deck presentation.
New here? Start with Getting Started.
Already running? Jump to the section you need.
Contents
| Page | What's in it |
|---|---|
| 01 · Getting Started | Clone, open, and make your first edit |
| 02 · Content Authoring | SECTIONS array, slide types, text formatting, speaker notes |
| 03 · Media | Images, videos, media cycler, iframes, GIFs |
| 04 · Move Mode & Layout | Drag, scale, rotate, z-order, grid, undo/redo, text editing |
| 05 · Theme & Settings | Colors, fonts, transitions, background styles, auto-save |
| 06 · Presenter Tools | Popup, phone companion, split view, pacing, haptics |
| 07 · Animations | Multi-step slides, keyframe WAAPI, SFX |
| 08 · Import & Export Tools | All tools/ scripts — PPTX, Markdown, PDF, HTML, video |
| 09 · AI Workflow | Working with Claude and other LLMs on your deck |
| 10 · Keyboard Shortcuts | Every key and gesture in one table |
| 11 · Troubleshooting | Common problems and fixes |
The 30-Second Pitch
Spatial Deck is a single index.html file that is your entire presentation. No build step, no npm, no cloud account. You edit a JavaScript array called SECTIONS and the slides update on reload. It runs from a USB stick at a Harvard podium.
Clone → edit SECTIONS → open index.html → present.
That's the whole model. The wiki fills in everything else.
More in Tools
gh-social-upload
Upload a repo's social preview card from the CLI — the API GitHub never gave you.
gh-wiki-init
Enable + initialize a GitHub repo's wiki from the terminal — including the impossible first page.
found-footage
Your Mac said it couldn't save that screen recording. It probably did — this finds it.
Want this level of depth on your own project?
The classes teach the same production techniques these repos are built with — scar tissue included.