My Deck — Slideshow Demo

# Standalone HyperFrames Slideshow Harness ## 1. Interim framing — why this exists These patterns are a **temporary workaround** for standalone demos. The durable solution is engine-hosted: a future `hyperframes preview --slideshow` / studio present mode will host the composition over the real HyperFrames engine, which drives seek-timelines frame-by-frame, owns the gesture frame, and reads the slideshow island directly from the composition. When that path ships, most of what follows collapses. Until then, a standalone slideshow opened via the bare player bundle must work around three facts: 1. The composition must expose a seekable `window.__timelines.root` timeline. Anything outside that seek path, such as Three.js loops or imperative entrance effects, must be self-driving. 2. `` reads the slideshow island from its **own innerHTML** (the wrapper element), not from the composition the player loads. The island must be duplicated into the wrapper. 3. The composition runs in the player's **iframe**; user keypresses and pointer events land on the **parent page**. Wrapper-owned SFX/global audio should live in the parent, where the activation token is reliable. Normal slide media stays in the composition and is stopped by the slideshow player on slide exit. Do not treat these as the blessed authoring model. When the engine-hosted path ships, compositions authored the normal way will just work. **Living reference implementations:** - `registry/examples/airbnb-deck/index.html` + `demo.html` — full pattern set (Three.js, fragments, SFX, branch slide) - `registry/examples/startup-pitch/index.html` — minimal version (no 3D), good starting point --- ## 2. The parent wrapper (`index.html` for deliverables, `demo.html` in examples) The parent page hosts the two dist bundles, wraps the components, duplicates the island, and owns all audio. For public or user-facing generated projects, make this wrapper the root `index.html` so opening the project in a browser runs the slideshow. Put the raw HyperFrames composition in a separate path such as `composition/index.html`. In repo examples you may still see this file called `demo.html`; that name is a reference pattern, not the preferred handoff for a standalone deck. ```html My Deck — Slideshow Demo

``` `interactive` is required for decks with clickable page content or media controls. Without it, iframe pointer events are disabled by the player shell and a click on the composition can be interpreted as a player play/pause toggle instead of a slide interaction. ### Per-slide `autoplay` Add `"autoplay": true` to a slide in the island to play that slide's first `