/html-slides

name: html-slides
description: Used when the user asks to "create HTML slides", "generate an HTML presentation", "make animated slides", "build interactive slides", "create web slides", "GSAP presentation", "browser-based slides", "convert PPTX to HTML", "animated deck", "reveal.js slides", or when the output format is HTML for any presentation task. Also triggers on "single-file presentation", "CSS animations in slides", "scroll-based slides", or "web presentation". Generates self-contained, single-file HTML with viewport fitting, CSS/GSAP animations, and curated style presets.
version: 0.2.1

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:

1. **Single file** — One `.html` file with inline CSS and JS (no build tools) 2. **Viewport fitted** — Each slide locks to `100vh`/`100dvh` with `overflow: hidden` 3. **CSS custom properties** — All theming via `:root` variables for easy restyling 4. **Semantic HTML** — `<section>` per slide, `<nav>` for controls 5. **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](https://gsap.com/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-