Decklight

The presentation library that presents itself

Every feature on the next slides is demonstrated live, by the slide itself.
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 61 themes

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>

HTML or Markdown?

The same deck, two authoring surfaces — mix them per slide

	HTML · default	Markdown · opt-in
Surface	`<section>` + tags	`data-markdown` + template
Builds	`data-build` on the element	`::: build` fence
Notes	`<aside class="notes">`	`Note:` / `Rehearse:` blocks
Rich slides	SVG · auto-animate · layout, natively	drop to raw HTML inline
Best for	diagrams & fine control	prose · fast, agent-friendly

Both compile to the same DOM — this very tour ships as showcase.html and showcase-md.html.

So which one should you use? Wrong question, friends — both compile to the same DOM, and you can mix them slide by slide in a single deck. But let's compare anyway.

⟨CLICK⟩

Surface: a plain section of HTML tags, versus a data-markdown section wrapping a CommonMark template. Same destination, different commute.

⟨CLICK⟩

Builds: one attribute in HTML, a triple-colon fence in Markdown.

⟨CLICK⟩

Notes: an aside element, or Note: and Rehearse: blocks. Either way, they land in the speaker view.

⟨CLICK⟩

Now the honest part: diagrams, auto-animate, fine layout — that's HTML's home turf. In Markdown you drop back to raw HTML exactly where the visuals get ambitious.

⟨CLICK⟩

So: HTML when you want control, Markdown when you're moving fast — or when the author is an agent. Which, around here, is often.

⟨CLICK⟩

And it's not a religion. This very tour ships both ways, from the same feature set.

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 — watch the messages take turns. 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. Animated, labelled, theme-aware, from one English sentence. Go ahead — cycle themes on it. Nothing breaks, because nothing was hardcoded.

61 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-one 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.

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.

One File to Ship

The CLI records, refreshes, exports — and flattens

decklight rec demo.term.yaml        # record a cast in a real PTY
decklight refresh casts/            # re-record everything, report drift
decklight export demo.cast.json     # asciicast v2 for the asciinema world
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 61 themes embedded.

Verified by Construction

Built for authors who can prove their deck works

Overflow guardrail: clipped content marks itself with data-overflow
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

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

Ten 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 10

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

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

Question 2 of 10

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 10

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 10

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

5 6 9 12

Question 5 of 10

Inside a data-markdown slide, how do you make a list build progressively?

Wrap it in a ::: build fence Add a data-build attribute directly on the <ul>, same as HTML Declare it in YAML front matter above the slide Wrap it in an HTML  comment

Question 6 of 10

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 10

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

75 themes in 6 packs 61 themes in 5 packs 100 themes in 8 packs 30 themes in 3 packs

Question 8 of 10

Which key opens the theme picker while presenting?

P ⇧T T ⌃P

Question 9 of 10

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 10

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

Your Score

Reveal it whenever the room's ready