Rich Media,
Single File

One File to Rule Them All

• 📸 Images — embedded as base64 data URIs
• 🎬 Video — inline MP4 with full playback controls
• 🎨 Styling — CSS with custom properties
• ⚡ Interactivity — JavaScript for navigation & effects
• 📄 All in one .html file

Embedded Image

AI-generated · Imagen 3 · embedded as base64 PNG

Multiple Images Per Slide

Two AI-generated images, side by side — both inline in the HTML

Embedded Video

[Video: AI-generated holographic display animation — not printable]

AI-generated · Veo 3.1 · 8 seconds · embedded as base64 MP4

How It Works

<!-- Image as data URI -->
<img src="data:image/png;base64,iVBORw0KGgo...">

<!-- Video as data URI -->
<video controls>
  <source src="data:video/mp4;base64,AAAAIGZ0..."
          type="video/mp4">
</video>

The browser decodes base64 natively — zero overhead

Trade-off: ~33% larger file size vs. binary, but it's a single portable artifact

This File's Anatomy

• 📐 CSS — theme, layout, transitions, print styles
• 🖼️ 4 images — ~5.3 MB of PNG, base64-encoded inline
• 🎬 1 video — ~6 MB MP4, base64-encoded inline
• 📝 10 slides of HTML content with speaker notes
• ⚙️ JavaScript — navigation, fullscreen, fragments

What Else Can You Embed?

• 🔤 Custom fonts — base64 WOFF2 in @font-face
• 🔊 Audio — <audio> with data URI
• 📊 SVG graphics — inline, fully styleable with CSS
• 🗺️ JSON data — for live charts via <canvas>
• 🎮 WebGL shaders — 3D graphics, no plugin needed
• 📦 Entire libraries — Three.js, D3, Chart.js — all inlineable