diff --git a/skills/hyperframes/references/multi-scene.md b/skills/hyperframes/references/multi-scene.md new file mode 100644 index 000000000..7de628db1 --- /dev/null +++ b/skills/hyperframes/references/multi-scene.md @@ -0,0 +1,188 @@ +# Multi-Scene Build Pipeline + +For compositions with 2 or more scenes, build in phases instead of one pass. A single pass produces shallow results — detail drops as context fills with boilerplate, and the authoring agent tends to under-decorate later scenes. Giving each scene its own subagent keeps per-scene density and decoration consistent. + +Single-pass is reserved for true one-scene compositions: title cards, standalone overlays, single-clip animations. + +## Who runs this pipeline + +The parallel dispatch in Phase 1 and Phase 2b requires the `Agent`/`Task` tool. In Claude Code, only the **top-level conversation agent** (the one that received the user's `/hyperframes` invocation) has this tool. Dispatched subagents typically do not. + +- **If you're the top-level agent:** run the full pipeline. Fan out scene subagents and evaluator subagents in parallel. +- **If you're a nested subagent** (you were dispatched with a `/hyperframes` task): you cannot fan out further. Author all scene fragments sequentially yourself, strictly following the Scene Fragment Spec below, then run the assembler and lint gates. Do not silently skip the pipeline — note in your final report that parallel dispatch was unavailable and you built serially. + +The assembler, scaffold markers, fragment spec, and gates are the same either way; only the dispatch shape changes. + +## Scene Fragment Spec + +Every scene file (`.hyperframes/scenes/sceneN.html`) must be a **fragment**, not a standalone document. The assembler splits on markers and injects verbatim — non-compliant files break assembly. + +### Structure + +Exactly three sections, in this order, each appearing exactly once: + +``` + +
...
+... + + +.s3-heading { color: var(--fg); ... } +... + + +var S3 = 14.3; +tl.set('#s3-heading', { opacity: 0, y: 30 }, 0); +tl.to('#s3-heading', { opacity: 1, y: 0, duration: 0.4 }, S3 + 0.5); +... +``` + +### Required + +- **Three markers, one each:** ``, ``, `` — no duplicates +- **ID prefix:** All IDs and classes use `s{N}-` prefix (e.g., `#s3-heading`, `.s7-chart`) +- **GSAP pattern:** `tl.set()` at time 0 for initial state, `tl.to()` at scene time for animation +- **Scene start var:** Define `var SN = {start_time};` at top of GSAP section, reference it for all tweens +- **Finite repeats:** All `repeat` values must be explicit numbers, never `-1` or `Infinity` + +### Prohibited + +- `` or `` tags — the CSS section is raw CSS, not wrapped in style tags. The scaffold's `