Build a tech talk
that reads like a magazine

24 themes · 30 layouts · 25 animations · zero build

tokens keyboard first PNG export CN + EN

Hi, today I will show you how the html-ppt presentation system works. This demo was built with it too: every slide is just a few lines of HTML plus a class.

Agenda

Three things in 10 minutes

① Why

Every deck means repeating the same work, and 99% of it can be templated.

② How

tokens + layouts + animations, three separate layers.

③ Result

One deck, 24 themes at the press of a key.

A three-part structure: Why / How / Result. It is the safest way to present.

"

A good talk is written,
not "made".

— Everyone who has been tortured by PowerPoint

Pause for a second here. Let the line speak for itself.

The result

0%

The time you spend on slides can be saved

Average results from 10 real decks.

Stress the data source: our own 10 real decks.

How · Core idea

Pull "what it looks like" into `:root`

Concept

Every visual property (colour, font, radius, shadow) becomes a semantic variable.

--text-1 / --text-2 / --text-3
--surface / --surface-2
--accent / --accent-2 / --accent-3
--radius / --shadow / --grad

Example

/* assets/themes/aurora.css */
:root {
  --bg: #06091c;
  --text-1: #e8f0ff;
  --accent: #5ef2c6;
  --accent-2: #7aa2ff;
  --accent-3: #c984ff;
  --radius: 20px;
}

That is the whole aurora theme.

The key point: base.css only knows variable names, not actual colour values. Switching theme means switching one set of variables.

Numbers · Real results

Where deck time goes, before / after

After: the share of time spent writing content rises sharply and everything else drops. Exactly what we want.

Your turn

Start your first one

Copy a deck, swap in your content, press T to pick the theme that suits you, and export to PNG in one click when you are done.

./scripts/new-deck.sh my-talk

←/→ Pages · T Theme · A Animation · F Fullscreen · O Overview · S Notes

End with one concrete action: a single command. Do not stop at "I will give it a try later".

Thanks

lewis · sudolewis@gmail.com · MIT 2026

Thank you, everyone. Time for Q&A.

Build a tech talkthat reads like a magazine