---
name: opendeck
description: Build animated, narrated HTML presentation decks — slides that reveal step-by-step as you click, hover tooltips, a thumbnail rail, fullscreen, and print-to-PDF, plus AI voice narration generated in-browser via ElevenLabs that can be baked into a fully offline file. Use when the user wants a presentation, deck, or slides that animate step-by-step, a self-running or narrated presentation, a deck to present and export, or anything described as "click through and it talks." Can also package the deck as a portable `.deck` file (deck.json + zipped standalone HTML) for playback in a compatible deck player app.
license: MIT
metadata:
author: Sinisha Djukic
version: 1.0.0
created: "2026-06"
---
# OpenDeck — Narrated Animated Presentations
Build an HTML slide deck with **in-slide step animations, hover tooltips, a thumbnail rail, fullscreen, print-to-PDF, and AI voice narration** — including an in-page "Audio Studio" that generates the voiceover with ElevenLabs and can bake it into a fully offline file.
Use this skill when the user asks for: a presentation/deck/slides that animates step-by-step, a self-running or narrated presentation, a deck they can present and also export, anything describing "click through and it talks," or to **package a deck as a portable `.deck` file** for a compatible player app.
---
## What you ship
The shippable kit lives in this skill's **`assets/`** folder. A deck is a single deck file (`starter-deck.html`, or a `.dc.html` Design Component when building inside a Claude design project) plus five companion files (all copied into the **same folder** as the deck), and a zero-dependency bundler for offline export:
| File | Role | You edit it? |
|---|---|---|
| `deck-stage.js` | Slide engine: auto-scaling, keyboard nav, thumbnail rail, speaker notes, print→PDF. | No — drop in as-is |
| `deck-enhance.js` | `data-step` reveals + step dots, `data-tip` tooltips, Fullscreen (`F`) & Slides (`S`) buttons, edit-mode guard. | No — drop in as-is |
| `narration-script.js` | The narration **text**, one line per slide/step. | **Yes** — this is where you write narration |
| `deck-narration.js` | Narrate + Auto-play controls (merged into the deck overlay) and the Audio Studio. | No — drop in as-is |
| `narration-audio.js` | **Generated**, not shipped. Holds the audio clips as base64 so narration plays offline. Created by the Studio's "Download audio". | No — produced by the user |
| `deck-export.js` | **In-browser bundler**: `deckExport.standalone()` inlines every local script, the baked audio, and the web fonts into one self-contained offline `.html`; `deckExport.deck()` wraps that as a portable `.deck` package (deck.json + zip). Plain browser JS — no build step. | No — drop in as-is |
`deck-animation.css` is the **required CSS** for reveals/dots/tooltips — paste it into the deck's `
```
(Do **not** hand-write a `.dc.html` as a raw file and ship it — a DC needs the project's runtime to hydrate. The portable, openable artifact is always the plain-HTML form.)
Rules that matter either way:
- **Slides are the direct `` children** of the stage. Author content at the **1920×1080** design size; the stage scales to fit.
- Each slide: `data-label="…"` (rail label) and `data-speaker-notes="…"` (presenter note, travels with the slide on reorder).
- Don't set `position`/`inset` on `` — the stage positions them.
- Keep the `deck-stage:not(:defined){visibility:hidden}` rule to avoid an unstyled flash.
- `narration-audio.js` is commented out until audio is baked.
---
## Step 2 — Add step animations
Give any element a `data-step="N"` (N = 1, 2, 3…). It starts hidden and reveals when the viewer reaches step N (→ / click / Space). Advancing past the last step moves to the next slide; ← steps back.
```html
Three pillars
First
Second
Third
```
- **Step dots** are auto-injected (bottom-left) on any slide that has steps — no markup needed.
- Multiple elements can share the same `data-step` to reveal together.
- The **required CSS** (`deck-animation.css`) defines what `.step-visible` / `.step-current` / `.step-past` look like. Without it, `data-step` elements just stay hidden. Paste it into your `