Four decks, live
They play on their own; click one to drive it with the arrow keys. Each also shows a theme and a motion style, and every file is readable source.
Roadmap
Six milestones on a year-long spine. Cards alternate sides so neighbours never share a lane, and only the current marker breathes.
Our 2026 roadmap for the all-hands, six milestones, one at a time as I talk.
Flow diagram
A data pipeline with two side branches. Wires are routed from explicit waypoints, draw themselves on, and a pulse runs the one you are explaining.
Explain our pipeline to non-technical people: ingest, clean, enrich, warehouse, dashboard, plus quarantine and alerting.
Decision
Four options against four bars, one row per step. Each option is struck through exactly where it fails, and the last step names the one left.
We need a decision on where booking should live. Four proposals, and the bars finance agreed.
Journey
Seven stops on a road wider than the screen. The road draws to each stop, and the camera moves only when the next card would be cut off.
Walk the team through the life of one bug report, from the customer's email to our reply.
Install, ask, present
Install the skill
One command finds the coding agents you have and puts the skill where each of them looks. Your agent picks it up in its next session, and loads it whenever you ask for something you will click through or present.
npx skills add jonasster/stepped-presentations
Or clone it into your agent's skills folder yourself. It is the same folder for every agent; only the place differs.
Codex, Cursor, OpenCode, Pi~/.agents/skills/Claude Code~/.claude/skills/Antigravity~/.gemini/config/skills/git clone https://github.com/jonasster/stepped-presentations ~/.agents/skills/stepped-presentations
Using a chat assistant that takes custom instructions instead of skills? This condensed version fits in one instructions box.
Ask for the deck
Say what it is for, when you present, and what goes in it. If that is all there, the agent builds the whole deck and lists the choices it made for you. If the content is not settled yet, it asks one short round of questions, each with a default, then stops at a few checkpoints so you can steer.
“I present our 2026 roadmap at the all-hands next week. Six milestones, appearing one at a time as I talk. It has to run off my laptop; the meeting room wifi is terrible. Swiss theme, Crisp motion.”
Present it
Double-click the file. Everything you need is on the keyboard:
→ Spacenext step ←back, exactly the way you came R Freset, or show the whole slide Ppresenter view: your notes, the next step and a timer in a second window Shift Pa PDF with one page per step, or a handout with your notesFine-tune without a prompt
Nudging a colour, fixing a typo or trying another easing is not worth a conversation. The studio opens a deck folder in Chrome or Edge, runs your deck beside an outline and an inspector, and writes each change back into your source one value at a time.
python -m http.server 5180 --directory studio
What every deck gets
One file, offline
Fonts and images can be inlined, so the deck runs from a USB stick or an email attachment.
Back is free
The whole scene is derived from one step number, so ←, deep links and jumping around always land right.
Presenter view
Notes, the next step and a timer in a second window. Drive it from either one.
PDF and handouts
One page per step at full size, with transitions off so nothing prints halfway.
Content as data
What you say lives in arrays at the top. Adding a milestone is adding an entry.
Motion that means something
Only the current step moves, and every animation has a static version for reduced motion.
Checked in a browser
Where the agent has a browser, it opens the deck and measures it before calling a visual change done.
Yours to edit
Plain HTML, CSS and JavaScript. No framework to learn, nothing to install to change it.