frontend-slides

# Frontend Slides Zero-dependency, animation-rich HTML presentations that run entirely in the browser. Curated from the MIT-licensed [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides). **Start from `example.html` in this plugin folder. It is the proven seed: copy its stage CSS, slide shell, and the entire `SlidePresentation` controller script verbatim, then replace slide content. Do not rewrite the stage system, the navigation script, or the design tokens architecture from scratch.** ## Hard spec (locked — every deck must satisfy all of these) ### Fixed 16:9 stage — NON-NEGOTIABLE - Every deck is authored on a fixed **1920×1080** canvas: `.deck-viewport` (fills the window) wraps `.deck-stage` (1920×1080, `transform-origin: 0 0`). - JavaScript scales the whole stage uniformly: `factor = min(innerWidth/1920, innerHeight/1080)`, then `translate(x, y) scale(factor)` to center with letterbox/pillarbox. Re-run on `resize`. - Never reflow slide content per device. No responsive breakpoints inside slides. All slide measurements are fixed px at the 1920×1080 design size. - Include the FULL contents of `references/viewport-base.css` in the `<style>` block (the seed already embeds it). ### Slide structure - Each page is one `<section class="slide">` directly inside `.deck-stage`. Around 10 slides for a standard deck; split content into more slides rather than shrinking type. - Slide switching uses `.active` / `.visible` classes toggling `visibility`, `opacity`, `pointer-events` — **never `display: none/block`** (layout classes like `display: flex` on children would override it and show every slide at once). - No scrolling, no overflow, no overlapping panels, no text below comfortable reading size at 1920×1080. ### Navigation runtime (keep the seed's script) - Keyboard: `←`/`→`, `↑`/`↓`, `Space`, `PageUp`/`PageDown`, `Home`/`End`. - Hash routing: current slide mirrored to `#/<index>`; deep links and `hashchange` restore the slide. - Mouse wheel (debounced ~650ms) and touch swipe (≥40px threshold). - Page counter chrome lives in `.deck-controls`, fixed-positioned **outside** the scaled stage. ### Design tokens - All colors, fonts, sizes, and easing live in `:root` CSS custom properties; retheme by editing tokens only. - Typography: distinctive webfonts from Google Fonts or Fontshare — **never** Inter, Roboto, Arial, or system fonts as display type. Avoid `#6366f1` indigo and purple-gradient-on-white clichés. - Pick one preset from `references/STYLE_PRESETS.md` (12 curated presets: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink) or design a custom system with the same discipline. The seed ships **Bold Signal**. ### Layout vocabulary (compose slides from these) `title-card` (colored focal card), `agenda` (numbered editorial list), `section divider` (giant outlined number), `bullets` (icon + heading + support line, max 4-6), `big-stat` (oversized number + side note), `quote`, `two-column comparison`, `principle grid` (2×2 cards), `CSS bar chart` (scaleY-animated bars), `closing`. Keep the slide-number top-left, breadcrumb nav top-right, and baseline rule bottom — that chrome is the deck's signature. ### Motion - Entrances via `.reveal` elements that transition when the slide gains `.visible`; stagger with `transition-delay` steps (~0.1s). - One signature easing per deck (seed: `cubic-bezier(0.16, 1, 0.3, 1)`); animate only `transform` and `opacity`. - `prefers-reduced-motion` support is mandatory (included in viewport-base.css). - Match animation character to the content's feeling using `references/animation-patterns.md`. ### Density modes Ask (or infer) whether the deck is speaker-led or reading-first: - **Low density / speaker-led** — one idea per slide, large type, 1-3 bullets max, more slides. - **High density / reading-first** — self-contained slides, structured grids/tables, 4-6 cards max, still no overflow. ### Output contract - Single self-contained `.html` file: all CSS and JS inline, no build step, no external JS libraries, no CDN scripts. - Icons are inline SVG. No remote images from slow CDNs; CSS-generated visuals (gradients, shapes, patterns) are a first-class path. - Comment every section: `/* === SECTION NAME === */`. - CSS gotcha: never negate CSS functions directly (`-clamp()` is silently ignored) — use `calc(-1 * clamp(...))`. ## References (read on demand) | File | When | | ---- | ---- | | `references/STYLE_PRESETS.md` | Choosing the visual direction | | `references/viewport-base.css` | Mandatory stage CSS — embed in full | | `references/html-template.md` | Controller architecture, inline-editing pattern, image pipeline | | `references/animation-patterns.md` | Matching effects to feeling | ## Attribution Design system, fixed-stage model, presets, and workflow come from the upstream MIT-licensed [zarazhangrui/frontend-slides](https://github.com/zarazhangrui/frontend-slides) (© 2025 Zara Zhang). The LICENSE file ships in this plugin folder; keep it in place when redistributing.