HyperFrames slideshow

HyperFrames Slideshow builds a live slide deck from a normal composition plus a JSON island defining slides and their connections. The deliverable is a running deck. Each slide is a top-level scene with its own identity, timing, label, and dimensions, without a master root composition wrapping the scenes.

One JSON island per composition is written directly in the HTML because the presentation command reads it statically. Slide entries identify scenes or explicit start and end times, and can add presenter-only notes. Fragments use absolute timeline times within the slide's boundaries. Navigation seeks directly to each hold state rather than playing through it, so the composition must look correct when reached without an animation lead-in. Slides without fragments enter at a rest frame.

Branch slides are normal scenes listed in named sequences rather than the main slide array. Hotspots target those sequence identities and can occupy a percentage-based region or the entire slide. Returning from a branch goes back to the slide containing the hotspot. Audience text should be at least 40 pixels at 1920 by 1080, and named visuals are searched in the HyperFrames catalog before custom construction.

Use it for live decks that need fragments, branching detail, or presenter notes, including ports of existing interactive pages. Do not render the deck to MP4: the render path retains only the first scene and can silently truncate the presentation. Snapshot individual slides when still images are needed.

When porting a page, preserve its appearance, motion, interactions, and media behavior rather than approximating widgets or players. Scroll, wheel, or camera-driven movement becomes direct camera movement between focal points during slide navigation, without visibly scrolling the page or inventing reversals.

Keep screenshots, posts, charts, code, and other readable evidence uncropped, preserve their aspect ratio, and inspect all four edges. Copied audio and video require timeline start and duration metadata, with audible media marked accordingly and preloading retained. Custom media controls follow native events and playback time rather than a separate timer. Hidden stacked slides need opacity, visibility, and pointer-event handling together to avoid swallowing clicks.

Inputs include composition scenes, slide ordering, fragment times, optional branch sequences, hotspot regions, and notes. Validation checks scene references, hotspot targets, fragment boundaries, and overlap between main-line slides:

npx hyperframes check --json

Run the check until clean, then serve the project through the presentation command and hand over its URL. The root page should open as a working deck, with the slideshow component wrapping the player and the raw composition moved to a subfolder if necessary. The built-in component owns presentation mode, previous and next navigation, slide count, global mute, fullscreen, swipe, hotspots, editable per-deck notes, and stopping media on exit; do not rebuild those controls.

A compatible HyperFrames CLI and required dependencies support the deck. Google Meet sharing uses the audience tab so rendering continues in the background. Zoom sharing uses a separate audience window, because a fully covered window freezes. A bare-player deployment needs the standalone-harness workarounds.

The skill retains Apache-2.0 licensing. Preserve project files and version pins, review downloads, and disable telemetry, skill updates, and update checks by default. External feedback, paid work, hosted deployment, publishing, and provider uploads require authorization covering the action and payer. Rights and consent apply to source media and recreated likeness or voices, and actual output and accessibility require verification.