| name | frontend-slides |
| description | Create animation-rich, zero-dependency HTML presentations on a fixed 1920×1080 stage that scales to any viewport. Distinctive typography, committed palettes, choreographed reveals — no generic AI-slop aesthetics. |
| triggers | ["html slides","animation slides","interactive deck","web ppt","frontend slides","presentation"] |
| od | {"mode":"deck","surface":"web","category":"slides","upstream":"https://github.com/zarazhangrui/frontend-slides","preview":{"type":"html","entry":"example.html"},"example_prompt":"Use Frontend Slides to turn my content into an animation-rich single-file HTML deck on a fixed 1920×1080 stage: distinctive typography, a committed palette, staggered reveals, keyboard navigation, and hash routing. Start from example.html and replace the content — keep the design system.","example_prompt_i18n":{"zh-CN":"用 Frontend Slides 把我的内容做成一套动画丰富的单文件 HTML 幻灯片：固定 1920×1080 舞台等比缩放、个性化字体排印、克制而坚定的配色、错峰入场动画、键盘导航和 hash 路由。从 example.html 出发只替换内容，保留设计系统。"}} |
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)
| 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 (© 2025 Zara Zhang). The LICENSE file ships in this plugin folder; keep it in place when redistributing.
