html-slides

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);
}