Decklight

The presentation library that presents itself

Every feature on the next slides is demonstrated live, by the slide itself.
This presentation is fully voiced: V toggles the voice, N changes it.
Use → to advance. Press ? anytime.

Builds

Keynote-style progressive reveals — the container opts in

data-build on the list — every item steps in order
One attribute, zero per-item classes
Hidden steps hold their space — layout never shifts
Entrance styles: fade · fade-up · zoom · pop · draw · highlight

…and leaf elements can pop in on their own.

Let's talk about builds — progressive reveals, the bread and butter of every keynote. The Decklight take: the container opts in, and the engine does the rest. That entire list carries exactly one attribute.

⟨CLICK⟩

Every press of the arrow reveals one item, in document order. No choreography required — the engine reads the DOM like sheet music.

⟨CLICK⟩

And look at that — not a single class on the items themselves. The list said data-build once, and every child fell in line. That's the kind of parenting we all aspire to.

⟨CLICK⟩

Notice what didn't happen: the layout didn't jump. Hidden steps keep their box — visibility, not display — so the slide is stable from the first pixel to the last.

⟨CLICK⟩

Eight entrance styles, all CSS-driven. Fade, zoom, pop, draw — pick your energy level.

⟨CLICK⟩

And a lone paragraph can be its own build step. Watch this one pop in like it's got somewhere to be.

Theme-Aware SVG Diagrams

Authored once with tokens — recolored by all 46 themes

Charts From Data

Declare the numbers — the theme paints them. No chart library, no images

Charts Build Like Diagrams

data-build="draw" — each series draws in on ⟨CLICK⟩, same machinery as the strokes

Comparison Slides

data-layout="split" — two sibling blocks become the columns

Pros

The columns share a top edge — unequal heights, headings still line up
No per-column flexbox to hand-roll
split-flip mirrors the pair

Cons

Two columns, deliberately — three is another slide

A third block is a footer, not a third column: full width, centred, under both — exactly where a note about the whole comparison belongs.

The comparison slide — pros and cons, this versus that — is the most common structured slide there is, and it used to be the one you hand-rolled a flexbox for. Not anymore: data-layout split, two sibling blocks, done. And look at what this slide is doing while I say it: three bullets on the left, one on the right, and the two headings still perfectly level. The columns share a top edge. They used to centre independently, which meant the shorter side's heading drifted down the slide and the pair stopped reading as a pair. Three columns, by the way, is not a shape we offer — cramming three things onto one slide is how a deck ends up technically renderable and practically unreadable.

⟨CLICK⟩

And there's the third block, landing full width under both columns. That's the footer. It used to get swept into the right-hand column, hanging under one side of a comparison it was about equally — which is a small thing that made every comparison slide read slightly wrong.

Auto-Animate

Magic Move between adjacent slides

Extract

Transform

Load

Advance once — the middle box takes over the stage.

Auto-Animate

Zoom into the detail — FLIP-morphed, HTML and SVG alike

Transform

validate the schema

enrich with lookups

Element Animations

Looping attention effects — only while the slide is active

pulse float shake spin blink

bounce swing glow breathe

All of it collapses under prefers-reduced-motion.

Code, Stepped Line by Line

This snippet is the source of the builds slide you just saw

<ul data-build="fade-up">
  <li>data-build on the list — every item steps</li>
  <li>One attribute, zero per-item classes</li>
  <li>Hidden steps hold their space</li>
</ul>

<p data-build="pop">…and leaves can pop in on their own.</p>

Math, Rendered Native

data-math + LaTeX → MathML Core — no webfonts, no build step, no network

$$\begin{aligned} \nabla \cdot \vec{E} \;&= \frac{\rho}{\varepsilon_0} & \nabla \times \vec{E} \;&= -\frac{\partial \vec{B}}{\partial t} \\[0.5em] \nabla \cdot \vec{B} \;&= 0 & \nabla \times \vec{B} \;&= \mu_0 \Bigl( \vec{J} + \varepsilon_0 \frac{\partial \vec{E}}{\partial t} \Bigr) \end{aligned}$$

Inline math sits right in the sentence — light moves at $c = 1/\sqrt{\mu_0 \varepsilon_0}$ — while \$ keeps \$5 five dollars, and a lone $ never trips the parser.

Terminal Recordings

Real PTY output, replayed step by step — never a video

Slides From a Prompt

Describe the slide — an agent writes the Decklight

Kafka: Producer to Consumers

The slide the agent generated — shipped untouched

And this is what came back — committed exactly as generated. No cleanup, no touch-ups. I want to be very clear about that.

⟨CLICK⟩

The broker sketches itself in: one topic, three partitions, every message square wearing its offset. If you've operated Kafka, this picture is home.

⟨CLICK⟩

The producer round-robins the partitions — P0, P1, P2, repeat. Order within a partition, balance across them: that's the deal you signed with Kafka.

⟨CLICK⟩

Consumer A picks up partitions zero and one…

⟨CLICK⟩

…and consumer B takes partition two — the dashed outline is the consumer group, quietly doing the partition math.

⟨CLICK⟩

And now the messages flow — watch them take turns across the partitions and stream out to the consumers. Animated, labelled, theme-aware, from one English sentence. Go ahead — cycle themes on it. Nothing breaks, because nothing was hardcoded.

62 Themes in 5 Packs

Try it now — this deck ships them all

T	theme picker — packs first, Enter drills in, ✳ flattens, type to filter
, / .	cycle themes — crossing a pack asks you to confirm
⌃T	generate a brand-new theme (WCAG-fitted, rule-conforming)
⌃⇧T	save it — localStorage + a portable .css download
[ / ]	cycle the deck's type through nine font stacks

Sixty-two themes in five packs, one token contract — and when you switch, everything moves: text, diagrams, code, terminals. By the way, did you catch that slide transition just now? Per-slide override. The deck is still demoing.

⟨CLICK⟩

Press T and the picker opens on the packs: Default, Classics, Old Machines, TV Series, Movies. Yes, there is a Game Boy theme. Yes, it passes contrast.

⟨CLICK⟩

Comma and period cycle within a pack — and if you're about to wander into a different pack, it asks first. Guardrails, not walls.

⟨CLICK⟩

Control-T rolls a brand-new theme on the spot — WCAG-fitted, palette-rule-conforming. It cannot fail validation; we property-tested that claim across hundreds of seeds, because 'trust me' is not a spec.

⟨CLICK⟩

Found one you love? Control-Shift-T saves it and hands you a portable CSS file.

⟨CLICK⟩

And the brackets swap typography live. Nine font stacks, zero rebuilds.

A Theme Is Just a File

No registry, no version number — the unit you share is one CSS file

decklight theme check sunset.css          # contract-complete? WCAG gates?
decklight theme add sunset.css deck.html  # validates, then installs

Added themes join the picker under an Added pack — they cycle, resolve from ?theme=, and bundle like any other
A file that fails leaves the deck byte-for-byte unchanged — no deck ever carries a broken theme
Re-adding the same name replaces it in place: add is the update path

So you've pressed Control-T, rolled a theme you love, and saved it. How do you give it to someone? A theme is one CSS file, and that's the whole distribution story — no registry to publish to, no version number to bump. Compatibility with a runtime just is passing that runtime's check.

⟨CLICK⟩

Theme check runs the token contract and the contrast gates on any file — the exact same function that grades the sixty-two themes we ship, so the two can never drift. A theme author outside this repo can prove their file is complete before sharing it.

⟨CLICK⟩

Theme add validates and then installs into a deck, refusing anything the shipped set wouldn't be allowed to contain.

⟨CLICK⟩

An added theme shows up in the picker under its own Added pack, and behaves like every other theme from there — cycling, the theme query parameter, bundling.

⟨CLICK⟩

And when a file fails? Your deck is byte-for-byte what it was. Nothing half-installed, nothing to clean up.

⟨CLICK⟩

Fixed a bug in your theme? Run add again with the same name. It replaces the block in place — adding is the update path.

Presenting

Everything a stage needs, no server required

S — speaker view: thumbnails, timer, notes synced to builds
S again — rehearse mode: cue cards instead of prose (this deck has them)
G — slide finder with live preview · / the command palette
O — overview grid · B blackout · F fullscreen
Pinned titles, auto-subtitles, per-slide print, the brand-logo chrome below

Everything a stage needs, and all of it works from a double-clicked file. No dev server, no build step, no 'hang on, let me npm install' in front of two hundred people.

⟨CLICK⟩

S opens the speaker view in a popup — thumbnails, a timer, and notes that highlight in sync as you advance.

⟨CLICK⟩

Press S again and the prose becomes big cue cards. Rehearse mode — because reading your slides to the room is a crime we've all committed exactly once.

⟨CLICK⟩

G opens a finder that searches every slide by its words — slide forty-something? Doesn't matter, type the word. And slash opens the command palette, where every one of these features answers to its name.

⟨CLICK⟩

O for overview, B for blackout, F for fullscreen. The classics.

⟨CLICK⟩

And the details: titles pin at one height deck-wide, subtitles style themselves, and the corner logo swaps its light and dark variants by measuring the theme's actual background. It's the little things.

The Deck Speaks

V narrates the notes · N picks the voice · C captions it

The voice already on your machine — macOS say, Windows SAPI. No key, no download
Or a cloud voice, or piper offline — decklight tts sets itself up on first run
Recorded tracks stream from a bucket; a signed manifest shows ☁ and its time left
A deck with a voice-over says so — a pill fades in, and clicking it plays
data-narration-pause="2" — a slide that earns a beat gets one

You may already know this one, because this deck has been talking to you since slide one. V starts the voice, N picks it, C puts captions under it — and the voice is the clock: each click beat ends, the next build lands, and the deck presents itself.

⟨CLICK⟩

Here's the part that changed. Every desktop you own has shipped a speech synthesizer for twenty years, and the current ones are genuinely good — macOS Premium and Personal Voices, Windows's natural voices. So with nothing configured, decklight asks the operating system what it can speak with before falling back to anything that needs a credential. No key, no download, no signup.

⟨CLICK⟩

Prefer a cloud voice, or your own cloned one, or piper running offline on your laptop? All still there — and the first time the bridge can't start, it asks you a few plain questions instead of throwing an error at you.

⟨CLICK⟩

Recorded tracks are the other half. Point a track at a bucket and it just plays; point it at a signed manifest and the deck shows a little cloud with the time left on the signature — because a link that quietly expires the morning of your talk is not a thing anyone should discover on stage.

⟨CLICK⟩

And the smallest fix of all: a deck that has a voice-over now tells you. A pill fades in near the bottom a second after load, and clicking it plays — which also happens to be the user gesture browsers demand before any audio at all. Before this, the only way to learn a deck talks was a key nobody had mentioned.

⟨CLICK⟩

And one small thing for the slides that need room to land. Data narration hold marks a slide interactive and the deck waits there forever. Data narration pause is the same idea with a number on it: two seconds after the last sentence, then it carries on. The diagram slide near the start of this deck has one, which is why it sat there for a moment before moving off.

Full-Bleed Backgrounds

One attribute on the section — the deck does the rest

data-background-image — cover by default; contain and position on demand
data-background-dim — a canvas-colored wash keeps the text readable
class="full-bleed" on any <img> — the same treatment for content images
decklight bundle inlines backgrounds like every other image

Sometimes a slide wants a photograph behind it — edge to edge, like every keynote you've ever admired. That's one attribute now: data-background-image, right on the section. What's glowing behind these words is exactly that.

⟨CLICK⟩

Cover by default, so the image fills the frame. Ask for contain, or a position, when the crop matters.

⟨CLICK⟩

And because white text over a bright sky is a crime against the back row, data-background-dim lays a canvas-colored wash between the photo and the words. This slide is wearing one right now.

⟨CLICK⟩

Content images get the same trick: class full-bleed on an img covers the slide, and split layouts cap a tall photo before it blows the frame.

⟨CLICK⟩

Bundling? Backgrounds inline as data URIs like every other image. One file, photo included.

Background Video

Muted, looping — and honest about print

Plays while the slide is active — paused for real when you move on
data-background-poster — the still that stands in under ?print
Bundles keep the clip external — same policy as character video

Bring the Deck You Already Have

decklight import — PowerPoint, Keynote, or a Google Slides link

Slides, nested bullets, notes, images, tables — and PowerPoint's own per-paragraph builds become data-build
A content importer, not a pixel renderer: the old template's look is replaced by decklight theming, which is what buys you everything else in this deck
What can't come across — SmartArt, charts, embedded media — is named with its slide number and what to rebuild it as. Never a silent drop

Nobody starts from zero. You have a folder of decks, and 'rewrite them all by hand' is not an adoption story — so: decklight import. PowerPoint, Keynote, or the link to a Google Slides deck.

⟨CLICK⟩

Slides come across in presentation order, bullets keep their real nesting, speaker notes land in the notes aside, images inline, tables become tables. And PowerPoint's own per-paragraph animation list becomes a data-build — your existing reveals survive the trip.

⟨CLICK⟩

Now the honest part: this is a content importer, not a pixel renderer. Your old template's look is deliberately thrown away and replaced with decklight theming. That's not a limitation, that's the trade — it's what buys the deck sixty-two themes, builds, narration, the notes editor, everything you've just watched.

⟨CLICK⟩

And the things that genuinely cannot come across — SmartArt, embedded video, a native chart — are named. Slide fourteen, chart dropped, rebuild as data-chart. Because a chart that quietly vanishes from slide fourteen is a thing you discover on stage, and that is the one failure mode this feature could not be allowed to have.

One File to Ship

The CLI records, refreshes, exports — and flattens

decklight import talk.pptx          # PowerPoint · Keynote · Google Slides
decklight cast demo.term.yaml       # record a cast in a real PTY
decklight refresh casts/            # re-record everything, report drift
decklight pdf deck.html             # every slide to PDF — overflows named
decklight bundle deck.html --all    # ONE self-contained HTML, themes included

This showcase bundles to a single file that works offline — logo, casts, and all 46 themes embedded.

The entire command-line story fits in five lines, which is about how long a CLI story should be.

⟨CLICK⟩

import brings in the decks you already have — PowerPoint, Keynote, Google Slides.

⟨CLICK⟩

rec records a terminal cast against a YAML script — real PTY, real output.

⟨CLICK⟩

refresh re-runs every embedded script and reports drift. Your demos stay honest even when your tools won't sit still.

⟨CLICK⟩

pdf renders every slide through the deck's own print path — and names the slides that overflow, which makes it the one command an agent should run before calling a deck done. There's also export, for asciicast v2 and the whole asciinema world.

⟨CLICK⟩

And bundle merges a deck — or a whole course playlist — into one self-contained HTML file you can email to a colleague with no instructions attached.

⟨CLICK⟩

This very deck ships that way too: logo, casts, all sixty-two themes. One file. Works offline.

Verified by Construction

Built for authors who can prove their deck works

Overflow guardrail: clipped content marks itself data-overflow — decklight pdf checks a whole deck in one pass and names the offenders
Every theme passes WCAG gates and codified palette rules
Generated themes can't fail validation — property-tested across seeds
Headless-render assertions ship in the repo; SPEC.md is the contract

And here's the philosophy under all of it: Decklight is built to be authored by agents, and agents don't have eyeballs. So every claim has to be checkable by a machine.

⟨CLICK⟩

If content would clip, the slide raises its hand — a data-overflow attribute, right in the DOM, where a headless test can see it. And decklight pdf reads every one of them in a single pass, so 'is my deck actually intact' is one command instead of twenty screenshots.

⟨CLICK⟩

Every shipped theme passes two graders: WCAG contrast gates, and codified palette rules distilled from the themes people actually love.

⟨CLICK⟩

The theme generator is property-tested across hundreds of seeds — not 'we ran it twice and it looked fine.'

⟨CLICK⟩

And SPEC.md is the contract every subsystem builds against. When the docs and the code disagree, one of them is a bug — and we know which one.

One HTML File. No Build Step.

Two stylesheets, one script — view source on this deck to start yours

Press O to see everything you just watched, or / to jump back anywhere.

Quizzes

The last thing every presentation needs

What's the last thing everyone needs when they've just followed a presentation? A quiz, of course! So, Decklight:

Options are plain HTML inputs — the theme tokens style them
data-narration="hold" — voice mode waits while you answer
Live re-grading — change an answer, the verdict follows
A podium with bronze · silver · gold — under frantic confetti

So we've reached the end — and what is the last thing everyone needs when they've just followed a presentation? A quiz, of course! So, Decklight makes quizzes something you build out of nothing but slides.

⟨CLICK⟩

The options are plain HTML inputs — radios inside labels — and the theme tokens dress them, so your quiz reskins with the rest of the deck.

⟨CLICK⟩

Interactive slides carry data-narration hold: in voice mode the deck narrates right up to the question, then waits patiently while the room argues.

⟨CLICK⟩

Grading is live. Change an answer after the reveal and the verdict follows you — we don't do stale scores.

⟨CLICK⟩

And when you pass, there's a podium. Bronze at eighty, silver at ninety, gold for the perfect run — under confetti that does not know when to stop. Let's go earn it.

Pop Quiz

Twelve questions on what you just watched — 80% to pass

Click an answer on each slide, then → to move on. Your score is tallied on the last slide — nothing is graded until you ask for it.

Question 1 of 12

What attribute turns a container's children into Keynote-style progressive reveals?

data-fragment data-build data-step data-reveal

Question 2 of 12

Where do the deck's inline SVG diagrams get their color from?

Hardcoded hex values baked into each diagram A separate highlighter-style theme file, like the code blocks CSS custom-property tokens shared with the rest of the deck An exported PNG re-rendered per theme

Question 3 of 12

What makes two adjacent slides Magic-Move between each other?

Both carry data-auto-animate, with matching data-id elements Both carry data-transition="morph" A shared class="magic-move" wrapper around both They're really one <section>, rewritten by JS between clicks

Question 4 of 12

How many looping data-animate effects did the element-animations slide show?

5 6 9 12

Question 5 of 12

A slide centres its content. What happens when that content is taller than the slide?

It overflows evenly, half above the slide and half below The engine shrinks the font until it fits It falls back to top alignment, so the overflow only ever goes down The slide grows and the deck scrolls

Question 6 of 12

How are the deck's terminal recordings stored and replayed?

As an embedded screen-capture video file As a recorded event cast (.cast.json), replayed step by step As an animated GIF generated at build time As a live SSH session run during the talk

Question 7 of 12

How many themes, across how many packs, ship with this deck?

75 themes in 6 packs 46 themes in 2 packs 100 themes in 8 packs 30 themes in 3 packs

Question 8 of 12

Which key opens the theme picker while presenting?

P ⇧T T ⌃P

Question 9 of 12

Which CLI command flattens a whole deck — casts, themes and all — into one self-contained HTML file?

decklight export decklight bundle decklight pack decklight ship

Question 10 of 12

What marks a slide whose content doesn't fit, so both humans and headless tests can catch it?

A console.warn at runtime only The data-overflow attribute A red border injected by the active theme Nothing — it silently scrolls the slide

Question 11 of 12

In a data-layout="split" slide, what does a third content block become?

A third, narrower column beside the other two A second row, paired with the next block Nothing — the engine refuses to render it A full-width footer centred under both columns

Question 12 of 12

What does decklight import do with a PowerPoint chart it can't convert?

Falls back to a screenshot of the original slide Reports it with the slide number and what to rebuild it as Drops it silently — the import always succeeds cleanly Fails the whole import until you remove the chart

Your Score

Reveal it whenever the room's ready