Frontend Slides

Create beautiful, single-file HTML slide presentations. Each slide fills exactly one viewport — no scrolling within slides, no build tools, no frameworks. Inspired by zarazhangrui/frontend-slides.

Output: One .html file containing all CSS, JS, and slide content inline.

Font strategy: Every theme specifies a Google Fonts / Fontshare web font AND a system font fallback stack. Web fonts enhance — they are not required. Presentations must look good offline.

Reference files contain complete code templates. Load them on-demand — only read what you need for the current task.

Core Principles

1. One slide = one viewport. 100dvh, overflow: hidden, scroll-snap-align: start. Content that overflows → split into more slides.
2. All sizes use clamp(). No fixed px/rem for typography or spacing. Everything scales with the viewport.
3. Content density limits are hard rules. See the table below — never exceed them.
4. Single-file output. Fonts via CDN <link>, everything else inline. No external CSS/JS files.
5. Respect prefers-reduced-motion. All animations must have a reduced-motion fallback.

Viewport Fitting (Single Source of Truth)