Frontend Slides

Frontend Slides

Zero-dependency, animation-rich HTML presentations that run entirely in the browser. Curated from the MIT-licensed 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)

Attribution

Design system, fixed-stage model, presets, and workflow come from the upstream MIT-licensed zarazhangrui/frontend-slides (© 2025 Zara Zhang). The LICENSE file ships in this plugin folder; keep it in place when redistributing.