HTML Slides — Animated, Viewport-Fitted Presentations

Generate single-file, self-contained HTML presentations with professional animations, responsive viewport fitting, and curated style presets. Zero external dependencies at runtime — all CSS/JS inline.

Architecture

Every HTML presentation follows this structure:

Single file — One .html file with inline CSS and JS (no build tools)
Viewport fitted — Each slide locks to 100vh/100dvh with overflow: hidden
CSS custom properties — All theming via :root variables for easy restyling
Semantic HTML — <section> per slide, <nav> for controls
Progressive enhancement — Works without JS, animations enhance with JS

Mandatory Viewport Rules

Apply the viewport base CSS from assets/viewport-base.css to EVERY presentation. Key rules:

Every slide: height: 100vh; height: 100dvh; overflow: hidden
All typography uses clamp(min, preferred, max) for responsive scaling
Images constrained to min(50vh, 400px) max height
Responsive breakpoints at 700px, 600px, 500px heights
prefers-reduced-motion support included
Grid fallback: grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr))

Never allow scrolling within a slide. If content exceeds capacity, split across multiple slides.

Edge Case: Negative Clamp Values Use calc(-1 * clamp(...)) when you need negative viewport-edge spacing (e.g., negative margins, negative padding). This pattern preserves the clamp function's responsiveness while inverting the value.

iOS Safari 100vh Bug The 100vh unit in iOS Safari includes the address bar, causing content to overflow. Always pair 100vh with 100dvh (dynamic viewport height) in fallback chains. Modern viewports ignore 100vh if 100dvh is present.

Animation System

CSS-First Approach (Default)

Use CSS animations as the baseline. Apply .reveal class with staggered transition-delay:

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

Trigger with Intersection Observer adding .visible class on viewport entry.

Easing: --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1) for all entrance animations.

GSAP Enhancement (When Requested)

For sophisticated animations, load GSAP from CDN and use timeline-based choreography. Consult references/animation-patterns.md for detailed GSAP recipes and the GSAP docs for API reference. Key integration points:

Load GSAP + ScrollTrigger from https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js
Use gsap.timeline() for sequenced slide entrance animations
Apply gsap.matchMedia() for responsive animation behavior
Respect prefers-reduced-motion — disable animations when active

Timeline Entrance with Position Parameter Stagger reveals without explicit delays using the position parameter in timeline. Example:

const tl = gsap.timeline();
tl.to('.heading', { opacity: 1, duration: 0.6 })
  .to('.subtitle', { opacity: 1, duration: 0.4 }, '<0.2') // Starts 0.2s before heading ends
  .to('.bullet', { opacity: 1, stagger: 0.1 }, '<0.15');

SplitText for Headlines and Word/Char Reveals Animate individual words or characters in headlines:

gsap.registerPlugin(SplitText);
const split = new SplitText('.headline', { type: 'words,chars' });
gsap.from(split.chars, { 
  opacity: 0, 
  duration: 0.4, 
  stagger: 0.05,
  ease: 'back.out'
});

ScrollTrigger for Slide-by-Slide Navigation Tie slide transitions to scroll position for interactive presentations:

gsap.registerPlugin(ScrollTrigger);
gsap.to('.slide', {
  scrollTrigger: {
    trigger: '.slide-container',
    pin: true,
    scrub: 1,
    snap: 1 / slideCount
  }
});

Spring Physics Timing from Remotion Translate Remotion spring physics into GSAP elastic easing for natural motion:

Smooth (damping: 200) → elastic.out(1, 0.1) — subtle bounce, feels polished
Snappy (damping: 20) → elastic.out(1, 0.35) — noticeable spring, modern feel
Bouncy (damping: 8) → elastic.out(1, 0.5) — playful bounce, energetic

Animation Inventory

Animation	CSS Class	Use Case
Fade + slide up	`.reveal`	Default entrance for text/cards
Scale in	`.reveal-scale`	Images, feature cards
Slide from left	`.reveal-left`	Two-column content
Blur in	`.reveal-blur`	Background elements, overlays
Stagger	`:nth-child(n)` delay	Lists, grid items

Animation Guidelines

Playful: Bouncy easing, 400-600ms, staggered reveals
Professional: Subtle fades, 200-300ms, minimal movement
Cinematic: Slow fades 1-1.5s, parallax, scale transitions
Technical: Sharp, fast (150-200ms), no bounce

Slide Navigation

Include keyboard navigation (arrows, space, Page Up/Down), touch/swipe support, and optional progress indicator. Template in references/html-template.md.

Style Preset Application

Read style preset definitions from the parent slide-design skill's references/style-presets.md. Each preset maps to CSS custom properties:

:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #1a1a1a;
  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --accent: #4a9eff;
  --accent-secondary: #ff6b6b;
  --font-heading: 'Clash Display', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --title-size: clamp(2rem, 6vw, 5rem);
  --body-size: clamp(0.9rem, 2vw, 1.25rem);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

Load fonts from Google Fonts or Fontshare — never rely on system fonts for headings.

Slide Type Templates

For each slide type, follow the HTML patterns in references/html-template.md. Key templates:

Title slide — Full-viewport hero with heading, subtitle, optional background image
Content slide — Heading + bullet list or paragraphs with staggered reveal
Two-column — Side-by-side layout with image + text or code + explanation
Image focus — Full-bleed or centered image with caption overlay
Code slide — Syntax-highlighted code block with Prism.js (CDN loaded)
Comparison — Side-by-side cards or before/after layout
Quote — Centered blockquote with attribution
Feature grid — CSS Grid cards (max 6) with icons/titles/descriptions
Timeline — Horizontal or vertical milestone layout

Mermaid Diagram Support

For technical presentations, embed Mermaid diagrams:

Include Mermaid CDN: https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.0/mermaid.min.js
Use <pre class="mermaid"> blocks for diagrams
Support flowcharts, sequence diagrams, class diagrams, and ER diagrams
Style with theme variables matching the presentation palette

PDF Export Support

Include an optional print stylesheet for PDF export via browser print:

@media print {
  .slide { page-break-after: always; height: 100vh; }
  .nav, .progress { display: none; }
  .reveal { opacity: 1; transform: none; }
}

Anti-Patterns

Avoid these common mistakes:

Scrolling within slides (always overflow: hidden)
System fonts for headings (always load web fonts)
Generic "AI slop" aesthetics (purple gradients, Inter everywhere)
Inline styles (use CSS custom properties)
Missing prefers-reduced-motion support
Images without size constraints
More than 6 items in a feature grid

Show Don't Tell

Embody the principle of visual communication. Enhance instructions with visual weight and intentionality:

"Make it bold" — Pair font weight increase with size increase AND accent color. A truly bold element dominates the hierarchy.
"Make it stand out" — Combine z-index layering, scale transformation, AND contrasting color simultaneously. Isolation requires all three.
"One idea per slide" — When content exceeds capacity, split across slides. Never shrink fonts below the minimum size threshold. Cramping is a design failure.
Visual hierarchy rule: The most important element should be 3x the size of supporting elements. If a headline is 3rem, body text should be ~1rem. Apply this ratio consistently.

Mixed-Background Decks

Many professional presentations alternate background colors across slide groups. To implement this:

Define a data-theme attribute per <section> (e.g., data-theme="coral", data-theme="dark", data-theme="cream")
Map each theme to CSS custom property overrides via [data-theme="coral"] { --bg-primary: #E8845C; --text-primary: #fff; }
Maintain font and layout consistency even when backgrounds change
Use contrasting backgrounds to signal section transitions (e.g., black for demo sections, cream for infographics)

Inline Edit Mode

Generated HTML can include contenteditable="true" attributes on text elements, allowing users to edit slides directly in the browser before presenting.

To enable inline editing, add contenteditable="true" to text elements:

<h1 contenteditable="true">Edit this headline</h1>
<p contenteditable="true">Edit this paragraph</p>

Include this CSS for visual feedback:

[contenteditable]:hover {
  outline: 2px dashed var(--accent);
  cursor: text;
}

[contenteditable]:focus {
  outline: 2px solid var(--accent);
}

Users can click any editable element, make changes live, and present without exporting. Disable with contenteditable="false" if read-only mode is preferred.

Additional Resources

Reference Files

references/html-template.md — Complete HTML boilerplate with navigation, all slide type templates
references/animation-patterns.md — CSS and GSAP animation recipes with timing and easing

Asset Files

assets/viewport-base.css — Mandatory viewport CSS (include in every presentation)

Script Files

scripts/extract-pptx.py — Extract text, images, and notes from PPTX files to JSON for HTML conversion

html-slides