hyperframes-slideshow

Overview

This skill builds a timed slideshow video from a set of images with transitions, as a HyperFrames composition. Use it for portfolios, recaps, or gallery sequences. It renders the final MP4 with exact per-slide timing.

HyperFrames — Slideshow / Deck

A presentation, pitch deck, or interactive deck. Discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.

When to Use

• User wants a presentation or pitch deck
• User wants slides with animated reveals
• User wants an interactive deck (branching, hotspots)
• User wants a slide deck that can also render to video
• User says "make me slides" or "pitch deck"

When NOT to Use

• User wants a rendered MP4 video (use hyperframes-product-launch-video)
• User wants a PowerPoint file (use document-creator skill)
• User wants a single motion graphic (use hyperframes-motion-graphics)

Workflow

1 · Plan the deck

• Slide count: 5-15 for pitches, 10-30 for deep dives
• Structure: title → problem → solution → proof → CTA
• Timing: if rendering to video, 5-10s per slide

2 · Author slides as scenes

Each slide is a clip with full-canvas duration:

<div class="slide" data-start="0" data-duration="8" data-track-index="0">
  <h1 class="slide-title">Problem</h1>
  <p class="slide-body">Customers waste 3 hours daily on manual reports.</p>
</div>
<div class="slide" data-start="8" data-duration="8" data-track-index="1">
  <h1 class="slide-title">Solution</h1>
  <p class="slide-body">Automated pipeline in one click.</p>
</div>

3 · Add fragment reveals

Within a slide, stagger element entrances for presenter-paced reveals:

.fragment { opacity: 0; }
.fragment.visible { animation: fadeInUp 0.5s forwards; }
.fragment:nth-child(2) { animation-delay: 0.3s; }
.fragment:nth-child(3) { animation-delay: 0.6s; }

4 · Wire navigation (interactive mode)

• Linear: arrow keys / click advance __player.seek(nextSlide)
• Branching: hotspot buttons jump to named slides
• Presenter mode: speaker notes in separate pane, synced via same clock