Decks built on one moving light.
40 slide layouts, 32 transitions and a gradient field that follows any colour. Set it up here and export one HTML file, or let an agent write the deck through the MCP server.
Click the preview or use the arrow keys inside it. Light and Transition apply to the slide on screen.
40 layouts, each a few lines of data.
Every frame is a real slide, drawn by kit/layouts.js from the JSON behind it. Click a frame to open that slide in the preview, or copy its JSON to start your own.
32 transitions, two families.
Click a frame to play it. A cover transition draws over the frame and swaps the slide underneath. A scene transition moves both slides.
One light.Nine positions.
The light behind this page is the kit's gradient field: four lights and film grain, drawn by one shader. Each slide names a camera position and the field glides there in 1.4 seconds. Pick a position to move it.
Three curves, three entrance durations.
Entrances use the out curve, exits the in curve, and covers and camera moves the in-out curve. Entrances and builds take one of three durations. Each transition has its own length, and the camera glide takes 1.4 seconds.
10 entrances.
A headline is written as lines. Pick how the lines arrive, then click the frame to replay.
Lines arrive oneafter another.
The support line follows 450 ms later.
Numbers count, charts build.
A figure rolls up on a cubic ease-out and lands on the written value. Chart parts take a delay each and build in order. Click the frame to replay.
The parts.
Everything a slide is made of, drawn with the current theme. Class names are on the right of each title.
Tones derived from the accent · kit/theme.js
Glass controls .sk-nav · pill, scrub, dots
Type scale .sk-mega to .sk-label
Emphasis and card .sk-hl · .card
One block behind one word.
A quiet panel with a 1 px hairline and no shadow
Rows and hatch .rows · .sk-hatch
Made for agents.
A deck is one JSON file. An agent writes it through the MCP server or the command line. The kit checks every change, rebuilds the page and returns a picture of any slide, so the agent can look at its own work.
Connect an agent mcp/server.mjs · stdio
claude mcp add stagekit -- node /path/to/stagekit/mcp/server.mjs
{
"mcpServers": {
"stagekit": {
"command": "node",
"args": ["/path/to/stagekit/mcp/server.mjs"]
}
}
}
Replace /path/to/stagekit with the folder you unpacked. The server needs Node 18 or later and has no dependencies.
Command line bin/stagekit.mjs
node bin/stagekit.mjs new talk --title "Q3 review" --look ember node bin/stagekit.mjs layouts gallery node bin/stagekit.mjs add talk @slide.json node bin/stagekit.mjs shot talk 2 node bin/stagekit.mjs build talk
A slide is passed as JSON, as @file.json or on standard input. Every command prints plain text, or JSON with --json. AGENTS.md and llms.txt in the kit folder describe the deck format for an agent that reads files.
The tools of the MCP server.
| Tool | What it does | Changes the deck |
|---|---|---|
| guide | How decks work, the workflow and the rules for writing slides. An agent reads this first. | no |
| list_layouts | Every layout with one line on what it is for and its fields. | no |
| get_layout | The fields of one layout with types and limits, and a sample slide to copy. | no |
| list_options | Transitions, camera positions, looks, entrances, light styles, fonts and the inline text marks. | no |
| create_deck | Starts a deck in a folder: deck.json and index.html. Takes the whole list of slides in one call. | yes |
| read_deck | The deck as it is now, or one slide of it. | no |
| add_slide | Adds one slide or several, at the end or at a position. | yes |
| update_slide | Changes fields of one slide, or replaces it. | yes |
| remove_slide | Removes one slide. | yes |
| move_slide | Moves a slide to another position. | yes |
| set_theme | Changes the look of the whole deck: a look, the accent, the ground, the light, the fonts, the entrance. | yes |
| validate_deck | Lists every error and note with the slide number and the field. | no |
| build_deck | Writes the page again: one HTML file with styles, fonts, scripts and local pictures inside. | writes the page |
| render_slide | Returns a PNG of one slide, taken with the Chrome on the machine. | no |
Write a slide as data.
The left side is what an agent sends. The right side is what the kit draws from it. Edit the JSON, or load the sample of any layout.
The rules the kit follows.
The look is a short list of constraints. Each one is a line in a file you can read.
| Rule | What it means | Where |
|---|---|---|
| One stage | Every slide is drawn at 1920 by 1080 and scaled to the window. Margins are 128 px at the sides, 96 px top and bottom. | kit/deck.css · #stage, .slide |
| One light | A single gradient field sits behind all slides. A slide names a camera position and the field glides there in 1.4 s. | kit/aura.js · CAMERAS |
| One accent | One colour, five tones derived from it in OKLCH. Type on the accent turns dark when white would not reach 3:1 contrast. | kit/theme.js · palette() |
| One emphasis | Running type is stressed one way: an accent block behind one word. | kit/tokens.css · .sk-hl |
| Hairlines | Panels and dividers are 1 px lines at 12% ink. Cards have no shadow. Paper that overlaps, such as an instant photo, carries one soft shadow. | kit/deck.css · .card, .polaroid |
| Slides are data | A slide is a JSON object: a layout name and the fields of that layout. One function per layout turns it into markup. | kit/layouts.js · LAYOUTS |
| Pictures in frames | A picture sits in a frame with a 1 px hairline. A frame with no picture shows art drawn in the theme colours. | kit/deck.css · .pic, .art |
| Glass | Controls and glass panels blur what is behind them: 20 px blur, 180% saturation, a 1 px white edge. | kit/deck.css · .sk-nav, .glass |
| Mono for data | Labels, sources and code are mono. Labels are capitals, tracked .06 em. | kit/tokens.css · .sk-label |
| Three curves | Out for entrances, in for exits, in-out for covers and camera moves. | kit/core.js · CURVES |
| Three durations | Entrances and builds take 320 ms, 700 ms or 1,100 ms, with 70 ms between staggered lines. Each transition has its own length. | kit/tokens.css · --t-fast, --t, --t-slow |
| Lines, then support | Headline lines enter first. In the base deck the support line starts 450 ms later. | kit/layouts.js · lede() |
| One click, one build | A slide reveals one element per click. The controls show a dot per click. | kit/deck.js · applyStep() |
| Swap under cover | A cover transition changes the slide at the moment the frame is fully covered. | kit/transitions.js · swapAt |
| Seekable motion | Every transition and the light render a time t, so they play, scrub and capture the same way. | kit/core.js · player() |
| Sources on charts | A chart carries a mono source line at the bottom left of its slide. | kit/deck.css · .src |
| Quiet controls | The controls sit at 60% opacity until the pointer moves. The pointer hides again after 1.5 s. | kit/deck.css · .sk-nav |
| No filters on type | Letters are never blurred or given a shadow. Grain is applied only to the light layer. | kit/tokens.css · html |