Claude's Slide Engine
Animated slides
from plain HTML
Press → to start. Scroll the mouse wheel for an overview, H for all controls.
A deck is a list of sections
- Normal HTML and CSS, one section per slide
- Two files to link, no install
- Everything else is automatic
Came in with led-radial
<section data-enter="cube-y">
<h2>Second slide</h2>
<p>240 LED</p>
<img src="photo.png">
<aside>Notes</aside>
</section>
Numbers count up by themselves
240 LED
Big numbers count from zero
12,90 €
Decimal commas and spaces work
480 → 141
An arrow counts up, then down
Headings build letter by letter, boxes flip in like cards. Came in with cube-y.
Pick an effect per element
This tree uses data-fx="spin3d".
The iris opened from the first picture on the slide.
Tables slide in row by row
| Batch | 100 pcs | 1 000 pcs | 10 000 pcs |
|---|
| Parts and assembly | 3,83 € | 3,20 € | 1,98 € |
| Certification share | 27,00 € | 2,70 € | 0,27 € |
Right-aligned number cells count up. Came in with blinds.
Effects for pictures and boxes
Also: pop, flip, rise, letters, rows, list, tilt, fade, count. Came in with dissolve.
Video clips
An image with data-video becomes a muted loop that plays only while its slide is shown.
Came in with led-rain.
Every slide picks its entrance
led-radial
led-rain
led-spiral
led-diagonal
cube-y
cube-x
iris
blinds
dissolve
zoom
vortex
fade
data-enter="name" on the section. Going back plays it in reverse. Came in with zoom.
Controls
| Key or button | Does |
|---|
| → Space PgDn, click, side mouse forward | next slide |
| ← PgUp, click left edge, side mouse back | previous slide |
| scroll wheel, G | overview: scroll to pick, → opens, ← returns |
| F · N · T | full screen · speaker notes · timer |
| M · H | simple transitions · all controls |
Try it now
Scroll
The slide shrinks into a grid. Keep scrolling, then press →.
N
Shows the speaker notes of this slide.
T
The timer in the bottom right started with your first →.
Came in with cube-x.
Made for Claude to write
- You give Claude the material and the talk length
- Claude writes the slides and notes, following CLAUDE.md
- build.py packs everything into one HTML file
Came in with led-diagonal.
One file, any PC
python build.py deck.html -o talk.html
Came in with led-spiral. Scroll for the overview of all slides.