diff --git a/README.md b/README.md
index 0f0ddb34..56f5c89a 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ vibe build my-film --max-cost 12  # animate the approved stills (image-to-video)
 — one photographer across a single arctic night (trek → first aurora → the
 whole sky → dawn), 1080p, generated end-to-end. Open source, MIT.
 
-![One consistent character across a directed arctic night: a trek under the stars, the first aurora, the whole sky ablaze, and the walk home at dawn](docs/media/showcase.gif)
+![One consistent character across a directed arctic night: a trek under the stars, the first aurora, the whole sky ablaze, and the walk home at dawn](docs/media/showcase-aurora.gif)
 
 Prompt craft for both models lives in the
 [AI video prompting playbook](docs/ai-video-prompting.md); the storyboard cues
diff --git a/docs/media/showcase.gif b/docs/media/showcase-aurora.gif
similarity index 100%
rename from docs/media/showcase.gif
rename to docs/media/showcase-aurora.gif
diff --git a/showcase-aurora/.gitignore b/showcase-aurora/.gitignore
new file mode 100644
index 00000000..622744e0
--- /dev/null
+++ b/showcase-aurora/.gitignore
@@ -0,0 +1,17 @@
+# VibeFrame — caches, checkpoints, and project-scope config.yaml (may contain API keys)
+.vibeframe/
+
+# Render outputs
+renders/*.mp4
+tmp/
+
+# Vendored Hyperframes skill copies — regenerable via 'vibe scene install-skill'.
+# Delete these lines if you eject and want to commit per-project customizations.
+/SKILL.md
+/references/
+/.claude/skills/hyperframes/
+/.cursor/rules/hyperframes.mdc
+
+# OS / editor
+.DS_Store
+*.log
diff --git a/showcase-aurora/AGENTS.md b/showcase-aurora/AGENTS.md
new file mode 100644
index 00000000..3ba95385
--- /dev/null
+++ b/showcase-aurora/AGENTS.md
@@ -0,0 +1,218 @@
+# showcase-aurora — Scene Authoring Project
+
+This is the canonical cross-agent guidance file for this scene project.
+Claude Code imports it through `CLAUDE.md`; Codex, Cursor, Aider,
+Gemini CLI, OpenCode, and other bash-capable agents should read it
+directly.
+
+This project is **bilingual**: it works with both VibeFrame (`vibe`) and
+HeyGen Hyperframes (`hyperframes`). You can run either CLI inside this
+directory.
+
+## Route the request first
+
+Before opening DESIGN.md, loading the hyperframes skill, or planning
+scenes, decide which flow the user actually wants:
+
+- **ASSET (default for ambiguous prompts).** Single image, single video
+  clip, single TTS line. Even a verb-less paste of a visual brief lands
+  here. Just run `vibe generate image|video|speech "<paste>" -o assets/<name>`.
+  Skip DESIGN.md, skip the hyperframes skill.
+- **BUILD.** Multi-scene / storyboard / composed video. Triggered when
+  the user explicitly asks for "a video built from scenes", "a
+  storyboard", "a multi-scene composition", or names `vibe build` /
+  `vibe scene ...`. Only here does the hard-gate below apply.
+- **REMIX.** Transform a media file already on disk: `vibe remix`,
+  `vibe edit`, `vibe audio`.
+
+If you can't tell, ask: *"single asset or multi-scene project?"* before
+authoring DESIGN.md or invoking a skill.
+
+## Visual identity hard-gate (BUILD flow only)
+
+**Within the BUILD flow,** author `DESIGN.md` before any scene HTML.
+It defines palette, typography, motion, and transition rules. Both the
+agent-driven path and the fallback emit reference it; scenes that
+contradict DESIGN.md are rejected by the Hyperframes `hyperframes`
+skill.
+
+Single-asset requests (`vibe generate image|video|speech|...`) do NOT
+consult this file — run the generate command directly.
+
+Browse named styles: `vibe scene list-styles`. Re-seed from one with
+`vibe scene init . --visual-style "Swiss Pulse"` (idempotent).
+
+## Brief and local media
+
+`brief.md` is raw intent, not a strict schema. It may contain messy notes,
+pasted research, links, product requirements, or a one-line idea. `vibe init
+--from brief.md` uses it only to seed `STORYBOARD.md` and `DESIGN.md`;
+after init, those two files are the working source of truth.
+
+Use `media/` for user-provided source files: product photos, screenshots,
+logos, B-roll, recorded narration, or reference clips. Keep those inputs
+inside this project so build references stay project-relative. Do not put user
+media in `references/`; that directory is reserved for local composition
+rules installed by VibeFrame.
+
+When a beat should reuse a local file, reference it from `STORYBOARD.md`
+with a project-relative path:
+
+```yaml
+backdrop: "media/product-shot.png" # existing still image
+video: "media/broll.mp4"           # existing video/B-roll
+narration: "media/voice.wav"       # existing recorded narration
+asset: "media/logo.png"            # generic local asset reference
+```
+
+Use text cues when you want VibeFrame to generate an asset. Use path cues
+when you want VibeFrame to reuse a local file. Avoid absolute paths or parent
+directory references; copy files into `media/` first.
+
+## Provider keys and project scope
+
+Use VibeFrame CLI generation for project assets:
+`vibe generate image|video|speech ...`. This lets VibeFrame use keys
+from `vibe setup --scope project`.
+
+Project-scope keys may live in a parent directory, for example
+`../.vibeframe/config.yaml` when this scene was created by
+`vibe init launch`. The `vibe` CLI searches upward automatically, so do
+not decide keys are missing just because `.vibeframe/config.yaml` is not
+inside this scene folder.
+
+To verify scope without exposing secrets, run `vibe doctor --json` from
+this directory and inspect `data.scope.activeScope` plus
+`data.scope.project.configPath`. Never print config contents. Do not use
+a host agent's built-in image/audio generation tool for VibeFrame project
+assets unless the user explicitly requests an external, non-VibeFrame
+asset.
+
+## App host setup
+
+VibeFrame is CLI-first, not terminal-only. Codex, Claude Code, and Cursor can
+drive this project through shell commands, and app hosts can use the MCP server
+as a typed tool surface.
+
+```bash
+vibe host setup all         # print Codex/Claude/Cursor snippets
+vibe host setup all --write # write project/app config
+vibe host doctor all --json # verify readiness
+```
+
+## Host agent loop
+
+For long-running work, use your host's agent loop (Claude Code, Codex, Cursor,
+or another coding-agent host) as the outer loop. VibeFrame should not run a competing
+project-level agent loop; it provides `--json` commands, dry runs, cost caps,
+`build-report.json`, `review-report.json`, `nextActions`, `safeToAutoRun`,
+`requiresConfirmation`, `fixOwner`, deterministic repair, and render
+inspection for the host agent to reason over.
+
+Copy-paste agent prompts — plain prompts, not a built-in command:
+
+```text
+Build this VibeFrame project into renders/final.mp4. Use --json for every
+vibe command, run --dry-run before paid operations, use --max-cost 5 for builds
+unless the user sets another budget, read build-report.json and
+review-report.json before deciding the next action, prefer nextActions before
+guessing, run only safeToAutoRun:true actions automatically, and ask before
+requiresConfirmation:true actions. Treat retryWith as the compatibility
+fallback, fixOwner:"vibe" as CLI repair work, and fixOwner:"host-agent" as
+STORYBOARD.md, DESIGN.md, or composition edits.
+Stop only when renders/final.mp4 exists, duration and aspect ratio match the
+brief, inspect render --cheap has no errors, any AI review score is >= 90 when AI review is requested, and every
+remaining host-agent issue is fixed, accepted with rationale, or reported as
+blocked.
+```
+
+```text
+Finish this VibeFrame render using your host's agent loop as the outer
+loop. Use vibe context/schema when unsure, --json everywhere, dry-run before
+paid operations, budget cap via --max-cost 5, nextActions before guessing,
+build-report.json/review-report.json as loop state, and safeToAutoRun,
+requiresConfirmation, and fixOwner to decide between vibe scene repair and
+host-agent edits. Stop only after final MP4,
+target duration/aspect ratio, clean render inspection, any AI review score >= 90 when AI review is requested, and
+no unresolved unacknowledged host-agent issues.
+```
+
+## Skills — USE THESE FIRST
+
+**Load the `hyperframes` skill before authoring scenes** — it encodes the
+composition rules, motion principles, type system, and visual-identity gate.
+If your agent has it installed globally it is already available; otherwise run
+`vibe scene install-skill` to eject a local, editable copy (`SKILL.md` +
+`references/`, gitignored by default) and read `SKILL.md`.
+
+**Always invoke the relevant skill before authoring scenes.** Skills encode
+framework-specific patterns (GSAP timeline registration, data-attribute
+semantics, VibeFrame pipeline conventions) that are NOT in generic web docs.
+
+| Skill             | Command          | When to use                                                                           |
+| ----------------- | ---------------- | ------------------------------------------------------------------------------------- |
+| **hyperframes**   | `/hyperframes`   | Cinematic-quality composition — DESIGN.md hard-gate, named styles, motion principles  |
+| **vibe-scene**    | `/vibe-scene`    | VibeFrame's authoring loop, AI assets, lint feedback, pipeline integration            |
+| **gsap**          | `/gsap`          | GSAP tweens, timelines, easing                                                        |
+
+Optional: install the upstream Hyperframes skills once per machine when your agent supports skill commands:
+
+```bash
+npx skills add heygen-com/hyperframes
+```
+
+Restart your agent session (or reload the skill list) after installing.
+If skills aren't available, follow the **Key Rules** below — they cover
+the framework-level minimum, not the cinematic craft layer.
+
+## Project structure
+
+- `DESIGN.md` — visual identity contract (palette, type, motion, transitions)
+- `STORYBOARD.md` — per-beat narration/backdrop/duration cues for `vibe build`
+- `media/` — user-provided source files (photos, logos, clips, voice recordings)
+- `index.html` — root composition (timeline)
+- `compositions/scene-*.html` — per-scene HTML authored by you or the agent
+- `assets/` — generated/canonical build media (narration audio, images, video)
+- `references/` — composition rule docs, only when ejected via `vibe scene install-skill` (not user media)
+- `transcript.json` — Whisper word-level transcript (if narration exists)
+- `hyperframes.json` — HF registry config (speak to both toolchains)
+- `vibe.config.json` — canonical VibeFrame config (providers, budget)
+- `renders/` — output MP4s
+
+## Commands
+
+```bash
+vibe scene add <name> --narration "..." --visuals "..."   # Author a new scene via AI
+vibe build                                                 # STORYBOARD.md → narrated MP4
+vibe scene lint                                             # Validate scenes (in-process HF linter)
+vibe render                                                 # Render to MP4
+
+# Hyperframes CLI (if installed — works in this project too)
+npx hyperframes preview
+npx hyperframes render
+```
+
+## Key Rules (for hand-authored scene HTML)
+
+1. Every timed element needs `data-start`, `data-duration`, and `data-track-index`.
+2. Elements with timing **MUST** have `class="clip"` — the framework uses this for visibility control.
+3. Timelines must be paused and registered on `window.__timelines`:
+   ```js
+   window.__timelines = window.__timelines || {};
+   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+   ```
+4. Videos use `muted` with a separate `<audio>` element for the audio track.
+5. Sub-compositions use `data-composition-src="compositions/file.html"`.
+6. For render-stable text, do not apply continuous `scale`, `x`, `y`, or
+   `filter` tweens to `.scene-content` or any ancestor containing live text.
+   Animate background/media layers instead; text/cards should enter briefly and
+   then hold still at their final CSS positions.
+7. Only deterministic logic — no `Date.now()`, `Math.random()`, or network fetches.
+
+## Linting — run after changes
+
+```bash
+vibe scene lint           # preferred — in-process, no network
+vibe scene lint --fix     # auto-fix mechanical issues
+vibe scene lint --json    # structured output for agent loops
+```
diff --git a/showcase-aurora/CHARACTERS.md b/showcase-aurora/CHARACTERS.md
new file mode 100644
index 00000000..2d3ee7e3
--- /dev/null
+++ b/showcase-aurora/CHARACTERS.md
@@ -0,0 +1,16 @@
+# showcase-aurora — Characters
+
+> Each character is referenced from STORYBOARD beats via the `characters:` cue.
+> The reference sheet + identity block keep keyframes and image-to-video on-model
+> across scenes (the Director continuity contract).
+
+## hero
+
+- **Reference sheet:** `assets/characters/hero.png` (a clean, front-lit full-body
+  or portrait sheet — the identity anchor for keyframe edits).
+- **Identity:** one paragraph of fixed, on-model traits — age, build, hair,
+  wardrobe, palette. Keep this stable across every beat.
+- **Range:** expressions / poses this character should hit.
+
+<!-- Add one ## block per recurring character. Delete this file for kinds with
+     no recurring cast. -->
diff --git a/showcase-aurora/CLAUDE.md b/showcase-aurora/CLAUDE.md
new file mode 100644
index 00000000..e0cd76c6
--- /dev/null
+++ b/showcase-aurora/CLAUDE.md
@@ -0,0 +1,8 @@
+@AGENTS.md
+
+# showcase-aurora — Claude Code Overrides
+
+This file imports `AGENTS.md`; keep cross-agent VibeFrame and
+Hyperframes instructions there so Codex, Cursor, Aider, Gemini CLI, and
+OpenCode see the same project rules. Add Claude-Code-specific notes below
+only when this project needs them.
diff --git a/showcase-aurora/DESIGN.md b/showcase-aurora/DESIGN.md
new file mode 100644
index 00000000..aef6f001
--- /dev/null
+++ b/showcase-aurora/DESIGN.md
@@ -0,0 +1,58 @@
+---
+name: Chasing Light
+colors:
+  primary: "#F4F1EA"
+  ground: "#0B1622"
+  accent: "#D8452E"
+---
+
+# Chasing Light — Design
+
+Visual identity for **Chasing Light**: a cinematic, music-driven aurora short.
+The generated video is the hero of every scene — full-bleed, no busy overlays.
+Type is minimal and reverent: it names the piece, then gets out of the way.
+
+## Style
+
+**Mood:** quiet awe. Vast, cold, and beautiful — a single warm figure under an
+enormous living sky. The viewer should feel the hush before the aurora breaks.
+
+## Palette
+
+- `#F4F1EA` — primary (warm off-white, for the sparse type)
+- `#0B1622` — ground (deep arctic night behind letterboxing)
+- `#D8452E` — accent (Mira's crimson parka; the one warm note, used sparingly)
+
+The scene palette itself travels: starlit blue → aurora teal-green → violet →
+dawn amber. Type never competes with it.
+
+## Typography
+
+One family, two weights. **Headline:** a light, wide serif or elegant sans in
+thin weight for the title ("Chasing Light") — cinematic, restrained. **Label:**
+the same family, small caps, letter-spaced, for a single end line. No body copy.
+
+## Composition
+
+Full-bleed video with a thin cinematic letterbox. Type lives in the lower third
+or dead-center on the title card only, with generous negative space. One text
+element on screen at a time. Never cover Mira or the aurora.
+
+## Motion
+
+Fluid and slow — everything drifts. Type fades in over ~1s and holds still; no
+kinetic bouncing. Let the video's own camera move be the motion; overlays are
+calm.
+
+**GSAP signature:** `sine.inOut` (gentle ease), long durations.
+
+## Transition
+
+Slow cinematic cross-dissolve between scenes (a soft fade through near-black),
+matching the contemplative pace. No glitch, no hard wipes.
+
+## What NOT to do
+
+- No kinetic/bouncy typography, no fast cuts, no gimmicky effects.
+- No plastic 3D-render look, no uncanny faces, no sci-fi elements (no glowing eyes).
+- No busy overlays, dashboards, or readable UI over the footage.
diff --git a/showcase-aurora/SCRIPT.md b/showcase-aurora/SCRIPT.md
new file mode 100644
index 00000000..fa9c033f
--- /dev/null
+++ b/showcase-aurora/SCRIPT.md
@@ -0,0 +1,25 @@
+# showcase-aurora — Script
+
+> **Authoring order:** SCRIPT.md (this file) → STORYBOARD.md (beats + cues) → CHARACTERS.md (cast bible).
+> Narrative script — scene-by-scene story, dialogue, and voiceover.
+
+## Logline
+
+One or two sentences: who/what this is for and the single takeaway.
+
+## Script
+
+Write the spoken/voiceover line and the on-screen intent for each moment. Each
+`##`-level section below maps to one STORYBOARD beat.
+
+### 1. Open
+
+Voiceover / on-screen: …
+
+### 2. Develop
+
+Voiceover / on-screen: …
+
+### 3. Close
+
+Voiceover / on-screen: …
diff --git a/showcase-aurora/STORYBOARD.md b/showcase-aurora/STORYBOARD.md
new file mode 100644
index 00000000..841fb776
--- /dev/null
+++ b/showcase-aurora/STORYBOARD.md
@@ -0,0 +1,58 @@
+---
+title: Chasing Light
+aspect: "16:9"
+tts: none
+imageProvider: openai
+characters:
+  mira: "woman in her late 20s, warm oval face with faint freckles, calm expressive brown eyes, dark hair tucked under a charcoal knit beanie, deep crimson-red down parka with a fur-lined hood, a vintage camera on a worn leather strap across her chest. Cinematic, natural skin, painterly realism — never plastic or 3D-render looking. The red parka is her constant across every scene."
+---
+
+# Chasing Light — Storyboard
+
+One character, one night, four scenes. Mira chases the aurora across an arctic
+plain while the sky transforms around her — proof that the *same* person and
+wardrobe hold across wildly different cinematic shots. Music-driven, no
+voiceover; the visuals carry it. ~24s, four 6s beats.
+
+Palette arc: starlit blue → aurora teal-green → violet → dawn amber.
+Camera language: slow, deliberate, anamorphic. No fast cuts, no gimmicks.
+
+## Beat trek — Into the dark
+
+```yaml
+duration: 6
+characters: [mira]
+keyframe: "wide cinematic shot, Mira trekking alone across a moonlit snowfield beneath a vast field of stars, a soft headlamp beam cutting the dark, her breath fogging in the freezing air, distant mountains on the horizon, cold blue-silver palette, anamorphic, film grain, painterly realism"
+video: "slow tracking push-in following her from behind as she walks deeper into the snow, gentle drifting snow particles, stars faintly twinkling, breath fog rising"
+music: "sparse, cold, hopeful — a single held synth pad and a distant piano note"
+```
+
+## Beat ignite — First ribbon
+
+```yaml
+duration: 6
+characters: [mira]
+keyframe: "medium cinematic shot, Mira kneeling at her tripod on a frozen ridge, hands adjusting the camera, the first faint green ribbon of aurora igniting low on the horizon behind her, teal-green glow rising against a deep indigo sky, snow catching the color, anamorphic, film grain, painterly realism"
+video: "the green aurora ribbon slowly brightens and drifts across the horizon, Mira turns her head to notice it, subtle camera drift closer"
+music: "the pad swells, a soft heartbeat of low strings enters"
+```
+
+## Beat wonder — The whole sky
+
+```yaml
+duration: 6
+characters: [mira]
+keyframe: "wide hero shot, Mira standing on the ice, camera lowered in one hand, looking up in awe as the aurora explodes across the entire sky in luminous green and violet, the whole scene mirrored on the frozen surface at her feet, her red parka the only warm color, breathtaking, anamorphic, cinematic, painterly realism"
+video: "slow majestic tilt up as the aurora ripples and pulses across the sky, reflections shimmering on the ice, Mira perfectly still in wonder — the emotional peak"
+music: "full swell — strings and a rising melody bloom, the peak of the piece"
+```
+
+## Beat dawn — The long walk home
+
+```yaml
+duration: 6
+characters: [mira]
+keyframe: "epic wide shot, Mira a small lone figure crossing a vast white plain, walking away from camera toward a horizon where the first amber sun breaks, the aurora fading into pale dawn, long soft shadows on the snow, warm gold meeting cool blue, anamorphic, cinematic, painterly realism"
+video: "very slow wide push-in as she walks toward the rising sun, warm light spreading across the snow, a quiet resolved ending"
+music: "the melody resolves warmly and softly fades, one last piano note"
+```
diff --git a/showcase-aurora/assets/character-mira-v2.png b/showcase-aurora/assets/character-mira-v2.png
new file mode 100644
index 00000000..f4138794
Binary files /dev/null and b/showcase-aurora/assets/character-mira-v2.png differ
diff --git a/showcase-aurora/assets/character-mira.png b/showcase-aurora/assets/character-mira.png
new file mode 100644
index 00000000..5606d283
Binary files /dev/null and b/showcase-aurora/assets/character-mira.png differ
diff --git a/showcase-aurora/assets/keyframe-dawn.png b/showcase-aurora/assets/keyframe-dawn.png
new file mode 100644
index 00000000..f9826a17
Binary files /dev/null and b/showcase-aurora/assets/keyframe-dawn.png differ
diff --git a/showcase-aurora/assets/keyframe-ignite.png b/showcase-aurora/assets/keyframe-ignite.png
new file mode 100644
index 00000000..e15e8005
Binary files /dev/null and b/showcase-aurora/assets/keyframe-ignite.png differ
diff --git a/showcase-aurora/assets/keyframe-trek.png b/showcase-aurora/assets/keyframe-trek.png
new file mode 100644
index 00000000..8b81dc10
Binary files /dev/null and b/showcase-aurora/assets/keyframe-trek.png differ
diff --git a/showcase-aurora/assets/keyframe-wonder.png b/showcase-aurora/assets/keyframe-wonder.png
new file mode 100644
index 00000000..960496c4
Binary files /dev/null and b/showcase-aurora/assets/keyframe-wonder.png differ
diff --git a/showcase-aurora/assets/kf-dawn.png b/showcase-aurora/assets/kf-dawn.png
new file mode 100644
index 00000000..8bb5d1c9
Binary files /dev/null and b/showcase-aurora/assets/kf-dawn.png differ
diff --git a/showcase-aurora/assets/kf-detail.png b/showcase-aurora/assets/kf-detail.png
new file mode 100644
index 00000000..8b978ae1
Binary files /dev/null and b/showcase-aurora/assets/kf-detail.png differ
diff --git a/showcase-aurora/assets/kf-ignite.png b/showcase-aurora/assets/kf-ignite.png
new file mode 100644
index 00000000..a25b8b53
Binary files /dev/null and b/showcase-aurora/assets/kf-ignite.png differ
diff --git a/showcase-aurora/assets/kf-trek.png b/showcase-aurora/assets/kf-trek.png
new file mode 100644
index 00000000..4a33b3d4
Binary files /dev/null and b/showcase-aurora/assets/kf-trek.png differ
diff --git a/showcase-aurora/assets/kf-wonder.png b/showcase-aurora/assets/kf-wonder.png
new file mode 100644
index 00000000..19b7f87f
Binary files /dev/null and b/showcase-aurora/assets/kf-wonder.png differ
diff --git a/showcase-aurora/assets/music-dawn.mp3 b/showcase-aurora/assets/music-dawn.mp3
new file mode 100644
index 00000000..706564cf
Binary files /dev/null and b/showcase-aurora/assets/music-dawn.mp3 differ
diff --git a/showcase-aurora/assets/music-trek.mp3 b/showcase-aurora/assets/music-trek.mp3
new file mode 100644
index 00000000..b5ef35b2
Binary files /dev/null and b/showcase-aurora/assets/music-trek.mp3 differ
diff --git a/showcase-aurora/assets/score.mp3 b/showcase-aurora/assets/score.mp3
new file mode 100644
index 00000000..c20b948f
Binary files /dev/null and b/showcase-aurora/assets/score.mp3 differ
diff --git a/showcase-aurora/assets/sv-dawn-kb.mp4 b/showcase-aurora/assets/sv-dawn-kb.mp4
new file mode 100644
index 00000000..e61b67f6
Binary files /dev/null and b/showcase-aurora/assets/sv-dawn-kb.mp4 differ
diff --git a/showcase-aurora/assets/sv-detail.mp4 b/showcase-aurora/assets/sv-detail.mp4
new file mode 100644
index 00000000..9132c9d1
Binary files /dev/null and b/showcase-aurora/assets/sv-detail.mp4 differ
diff --git a/showcase-aurora/assets/sv-ignite.mp4 b/showcase-aurora/assets/sv-ignite.mp4
new file mode 100644
index 00000000..c5349451
Binary files /dev/null and b/showcase-aurora/assets/sv-ignite.mp4 differ
diff --git a/showcase-aurora/assets/sv-trek.mp4 b/showcase-aurora/assets/sv-trek.mp4
new file mode 100644
index 00000000..bd8c9339
Binary files /dev/null and b/showcase-aurora/assets/sv-trek.mp4 differ
diff --git a/showcase-aurora/assets/sv-wonder.mp4 b/showcase-aurora/assets/sv-wonder.mp4
new file mode 100644
index 00000000..cae024a5
Binary files /dev/null and b/showcase-aurora/assets/sv-wonder.mp4 differ
diff --git a/showcase-aurora/assets/v2-score.mp3 b/showcase-aurora/assets/v2-score.mp3
new file mode 100644
index 00000000..abffc211
Binary files /dev/null and b/showcase-aurora/assets/v2-score.mp3 differ
diff --git a/showcase-aurora/assets/v2-video-dawn.mp4 b/showcase-aurora/assets/v2-video-dawn.mp4
new file mode 100644
index 00000000..227a30a7
Binary files /dev/null and b/showcase-aurora/assets/v2-video-dawn.mp4 differ
diff --git a/showcase-aurora/assets/v2-video-ignite.mp4 b/showcase-aurora/assets/v2-video-ignite.mp4
new file mode 100644
index 00000000..e9dad26b
Binary files /dev/null and b/showcase-aurora/assets/v2-video-ignite.mp4 differ
diff --git a/showcase-aurora/assets/v2-video-trek.mp4 b/showcase-aurora/assets/v2-video-trek.mp4
new file mode 100644
index 00000000..4e8c0303
Binary files /dev/null and b/showcase-aurora/assets/v2-video-trek.mp4 differ
diff --git a/showcase-aurora/assets/v2-video-wonder.mp4 b/showcase-aurora/assets/v2-video-wonder.mp4
new file mode 100644
index 00000000..8b9747e7
Binary files /dev/null and b/showcase-aurora/assets/v2-video-wonder.mp4 differ
diff --git a/showcase-aurora/assets/v3-silent.mp4 b/showcase-aurora/assets/v3-silent.mp4
new file mode 100644
index 00000000..b9f752f4
Binary files /dev/null and b/showcase-aurora/assets/v3-silent.mp4 differ
diff --git a/showcase-aurora/assets/video-dawn.mp4 b/showcase-aurora/assets/video-dawn.mp4
new file mode 100644
index 00000000..2b5565c5
Binary files /dev/null and b/showcase-aurora/assets/video-dawn.mp4 differ
diff --git a/showcase-aurora/assets/video-ignite.mp4 b/showcase-aurora/assets/video-ignite.mp4
new file mode 100644
index 00000000..b772973e
Binary files /dev/null and b/showcase-aurora/assets/video-ignite.mp4 differ
diff --git a/showcase-aurora/assets/video-trek.mp4 b/showcase-aurora/assets/video-trek.mp4
new file mode 100644
index 00000000..6d2c1c97
Binary files /dev/null and b/showcase-aurora/assets/video-trek.mp4 differ
diff --git a/showcase-aurora/assets/video-wonder.mp4 b/showcase-aurora/assets/video-wonder.mp4
new file mode 100644
index 00000000..599d99cf
Binary files /dev/null and b/showcase-aurora/assets/video-wonder.mp4 differ
diff --git a/showcase-aurora/compositions/scene-dawn.html b/showcase-aurora/compositions/scene-dawn.html
new file mode 100644
index 00000000..661c2d0c
--- /dev/null
+++ b/showcase-aurora/compositions/scene-dawn.html
@@ -0,0 +1,193 @@
+<template id="scene-dawn-template">
+  <div data-composition-id="scene-dawn" data-start="0" data-duration="6" data-width="1920" data-height="1080">
+    <style>
+      [data-composition-id="scene-dawn"] {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #0B1622;
+        overflow: hidden;
+      }
+
+      [data-composition-id="scene-dawn"] .clip {
+        position: absolute;
+        inset: 0;
+      }
+
+      [data-composition-id="scene-dawn"] .video-layer {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      [data-composition-id="scene-dawn"] #dawn-video {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+      }
+
+      /* Thin cinematic letterbox bars */
+      [data-composition-id="scene-dawn"] .letterbox-top,
+      [data-composition-id="scene-dawn"] .letterbox-bottom {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 72px;
+        background: #0B1622;
+        z-index: 10;
+      }
+      [data-composition-id="scene-dawn"] .letterbox-top { top: 0; }
+      [data-composition-id="scene-dawn"] .letterbox-bottom { bottom: 0; }
+
+      /* Subtle warm amber vignette to frame the dawn horizon */
+      [data-composition-id="scene-dawn"] .vignette {
+        position: absolute;
+        inset: 0;
+        z-index: 5;
+        background: radial-gradient(ellipse 120% 80% at 50% 60%, rgba(0,0,0,0) 40%, rgba(11,22,34,0.55) 100%);
+        pointer-events: none;
+      }
+
+      /* Warm glow from the horizon — dawn amber bloom */
+      [data-composition-id="scene-dawn"] .dawn-bloom {
+        position: absolute;
+        left: 50%;
+        bottom: 72px;
+        transform: translateX(-50%);
+        width: 1400px;
+        height: 340px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse 100% 100% at 50% 100%, rgba(216,150,60,0.28) 0%, rgba(216,69,46,0.10) 55%, rgba(11,22,34,0) 100%);
+        z-index: 6;
+        pointer-events: none;
+      }
+
+      /* Closing title — lower third */
+      [data-composition-id="scene-dawn"] .scene-content {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: center;
+        padding-bottom: 148px;
+        z-index: 20;
+        pointer-events: none;
+      }
+
+      [data-composition-id="scene-dawn"] .title-line {
+        font-family: "Cormorant", "Georgia", serif;
+        font-weight: 300;
+        font-size: 68px;
+        letter-spacing: 0.28em;
+        color: #F4F1EA;
+        text-transform: uppercase;
+        line-height: 1;
+        opacity: 0; /* animated in */
+      }
+
+      [data-composition-id="scene-dawn"] .rule-line {
+        width: 320px;
+        height: 1px;
+        background: #F4F1EA;
+        margin-top: 20px;
+        opacity: 0;
+        transform-origin: center center;
+      }
+
+      [data-composition-id="scene-dawn"] .subtitle-line {
+        font-family: "Cormorant", "Georgia", serif;
+        font-weight: 300;
+        font-size: 22px;
+        letter-spacing: 0.38em;
+        color: #F4F1EA;
+        text-transform: uppercase;
+        margin-top: 18px;
+        opacity: 0;
+      }
+    </style>
+
+    <!-- Full-bleed video — direct child of composition root, NOT inside a timed clip -->
+    <div class="video-layer">
+      <video
+        id="dawn-video"
+        src="assets/video-dawn.mp4"
+        data-start="0"
+        data-duration="6"
+        data-media-start="0"
+        data-track-index="0"
+        muted
+        playsinline
+        style="width:100%;height:100%;object-fit:cover;display:block;"
+      ></video>
+    </div>
+
+    <!-- Letterbox bars -->
+    <div class="letterbox-top"></div>
+    <div class="letterbox-bottom"></div>
+
+    <!-- Radial vignette -->
+    <div class="vignette"></div>
+
+    <!-- Dawn amber bloom on horizon -->
+    <div class="dawn-bloom"></div>
+
+    <!-- Text overlay clip — full window, non-timed wrapper -->
+    <div class="clip" data-start="0" data-duration="6" data-track-index="1">
+      <div class="scene-content">
+        <div class="title-line">Chasing Light</div>
+        <div class="rule-line"></div>
+        <div class="subtitle-line">A short film</div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Idle anchor: gentle Ken-Burns on the dawn bloom, keeps timeline alive for full 6s
+      tl.fromTo(".dawn-bloom",
+        { scale: 1.0, opacity: 0.7 },
+        { scale: 1.08, opacity: 1.0, duration: 6, ease: "sine.inOut" },
+        0
+      );
+
+      // Subtle ambient breath on vignette — barely perceptible
+      tl.fromTo(".vignette",
+        { opacity: 0.85 },
+        { opacity: 1.0, duration: 6, ease: "sine.inOut" },
+        0
+      );
+
+      // Title fade-in — slow, reverent, after a moment of hush
+      tl.to(".title-line", {
+        opacity: 1,
+        duration: 1.4,
+        ease: "power1.out"
+      }, 1.6);
+
+      // Rule line — scales in from center after title settles
+      tl.to(".rule-line", {
+        opacity: 0.55,
+        scaleX: 1,
+        duration: 0.9,
+        ease: "sine.inOut"
+      }, 2.6);
+
+      // Subtitle — drifts up softly into place
+      tl.fromTo(".subtitle-line",
+        { opacity: 0, y: 10 },
+        { opacity: 0.72, y: 0, duration: 1.1, ease: "power2.out" },
+        3.2
+      );
+
+      // End anchor — hold natural state at t=5.999
+      tl.set(".dawn-bloom", { scale: 1.08, opacity: 1.0 }, 5.999);
+
+      window.__timelines["scene-dawn"] = tl;
+    </script>
+  </div>
+</template>
\ No newline at end of file
diff --git a/showcase-aurora/compositions/scene-ignite.html b/showcase-aurora/compositions/scene-ignite.html
new file mode 100644
index 00000000..99cd90c3
--- /dev/null
+++ b/showcase-aurora/compositions/scene-ignite.html
@@ -0,0 +1,153 @@
+<template id="scene-ignite-template">
+  <div data-composition-id="scene-ignite" data-start="0" data-duration="6" data-width="1920" data-height="1080">
+    <style>
+      [data-composition-id="scene-ignite"] {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #0B1622;
+        overflow: hidden;
+      }
+
+      [data-composition-id="scene-ignite"] .clip {
+        position: absolute;
+        inset: 0;
+      }
+
+      [data-composition-id="scene-ignite"] .video-layer {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      [data-composition-id="scene-ignite"] .letterbox-top,
+      [data-composition-id="scene-ignite"] .letterbox-bottom {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 72px;
+        background: #0B1622;
+        z-index: 10;
+        pointer-events: none;
+      }
+
+      [data-composition-id="scene-ignite"] .letterbox-top {
+        top: 0;
+      }
+
+      [data-composition-id="scene-ignite"] .letterbox-bottom {
+        bottom: 0;
+      }
+
+      [data-composition-id="scene-ignite"] .overlay-clip {
+        position: absolute;
+        inset: 0;
+        z-index: 20;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        align-items: flex-start;
+        padding: 0 160px 140px 160px;
+        box-sizing: border-box;
+        pointer-events: none;
+      }
+
+      [data-composition-id="scene-ignite"] .scene-label {
+        font-family: 'Georgia', serif;
+        font-weight: 300;
+        font-size: 22px;
+        letter-spacing: 0.22em;
+        text-transform: uppercase;
+        color: #D8452E;
+        opacity: 0;
+        margin-bottom: 18px;
+        font-variant-caps: all-small-caps;
+      }
+
+      [data-composition-id="scene-ignite"] .scene-title {
+        font-family: 'Georgia', serif;
+        font-weight: 300;
+        font-size: 72px;
+        letter-spacing: 0.06em;
+        color: #F4F1EA;
+        opacity: 0;
+        line-height: 1.1;
+      }
+
+      [data-composition-id="scene-ignite"] .aurora-glow {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 72px;
+        height: 320px;
+        background: radial-gradient(ellipse 120% 60% at 50% 100%, rgba(64,210,140,0.18) 0%, rgba(32,160,110,0.08) 50%, rgba(11,22,34,0) 100%);
+        z-index: 5;
+        pointer-events: none;
+        opacity: 0;
+      }
+    </style>
+
+    <!-- Video layer: direct child of composition root, NOT inside a timed wrapper -->
+    <video
+      id="ignite-video"
+      class="video-layer"
+      src="assets/video-ignite.mp4"
+      data-start="0"
+      data-duration="6"
+      data-track-index="0"
+      data-media-start="0"
+      muted
+      playsinline
+      style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;"
+    ></video>
+
+    <!-- Aurora horizon glow overlay -->
+    <div class="aurora-glow"></div>
+
+    <!-- Cinematic letterbox bars -->
+    <div class="letterbox-top"></div>
+    <div class="letterbox-bottom"></div>
+
+    <!-- Text overlay clip — full-window, timed to full beat -->
+    <div class="clip" data-start="0" data-duration="6" data-track-index="2">
+      <div class="overlay-clip">
+        <div class="scene-label">First Light</div>
+        <div class="scene-title">Chasing Light</div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Idle anchor: subtle Ken-Burns on aurora glow to hold timeline to full 6s
+      tl.fromTo(".aurora-glow",
+        { opacity: 0, scaleY: 1.0 },
+        { opacity: 1, scaleY: 1.08, duration: 6, ease: "sine.inOut" },
+        0
+      );
+
+      // Scene label fades in gently at t=0.8s
+      tl.fromTo(".scene-label",
+        { opacity: 0, y: 10 },
+        { opacity: 1, y: 0, duration: 1.2, ease: "sine.out" },
+        0.8
+      );
+
+      // Title drifts in slowly at t=1.3s — restrained, cinematic
+      tl.fromTo(".scene-title",
+        { opacity: 0, y: 18 },
+        { opacity: 1, y: 0, duration: 1.6, ease: "sine.out" },
+        1.3
+      );
+
+      // Timeline anchor at full beat duration — keeps hold phase from going black
+      tl.set(".aurora-glow", { opacity: 1 }, 5.999);
+
+      window.__timelines["scene-ignite"] = tl;
+    </script>
+  </div>
+</template>
\ No newline at end of file
diff --git a/showcase-aurora/compositions/scene-trek.html b/showcase-aurora/compositions/scene-trek.html
new file mode 100644
index 00000000..e63eabea
--- /dev/null
+++ b/showcase-aurora/compositions/scene-trek.html
@@ -0,0 +1,159 @@
+<template id="scene-trek-template">
+  <div data-composition-id="scene-trek" data-start="0" data-duration="6" data-width="1920" data-height="1080">
+    <style>
+      [data-composition-id="scene-trek"] {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #0B1622;
+        overflow: hidden;
+      }
+
+      [data-composition-id="scene-trek"] .clip {
+        position: absolute;
+        inset: 0;
+      }
+
+      /* Letterbox bars */
+      [data-composition-id="scene-trek"] .letterbox-top,
+      [data-composition-id="scene-trek"] .letterbox-bottom {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 80px;
+        background: #0B1622;
+        z-index: 20;
+        pointer-events: none;
+      }
+      [data-composition-id="scene-trek"] .letterbox-top {
+        top: 0;
+      }
+      [data-composition-id="scene-trek"] .letterbox-bottom {
+        bottom: 0;
+      }
+
+      /* Lower-third label */
+      [data-composition-id="scene-trek"] .lower-label {
+        position: absolute;
+        bottom: 108px;
+        left: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 30;
+        pointer-events: none;
+      }
+
+      [data-composition-id="scene-trek"] .label-text {
+        font-family: "Georgia", serif;
+        font-weight: 300;
+        font-size: 22px;
+        letter-spacing: 0.28em;
+        text-transform: uppercase;
+        color: #F4F1EA;
+        opacity: 0.72;
+      }
+
+      /* Vignette overlay */
+      [data-composition-id="scene-trek"] .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at 50% 50%, rgba(11,22,34,0) 38%, rgba(11,22,34,0.72) 100%);
+        z-index: 10;
+        pointer-events: none;
+      }
+
+      /* Cold blue color-grade tint */
+      [data-composition-id="scene-trek"] .color-grade {
+        position: absolute;
+        inset: 0;
+        background: rgba(20, 38, 68, 0.18);
+        z-index: 11;
+        pointer-events: none;
+      }
+
+      /* Grain overlay using SVG noise */
+      [data-composition-id="scene-trek"] .grain {
+        position: absolute;
+        inset: 0;
+        z-index: 12;
+        opacity: 0.06;
+        pointer-events: none;
+        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
+        background-size: 256px 256px;
+      }
+    </style>
+
+    <!-- Video: direct child of composition root, NOT nested in a timed clip -->
+    <video
+      id="trek-video"
+      data-start="0"
+      data-duration="6"
+      data-media-start="0"
+      data-track-index="0"
+      src="assets/video-trek.mp4"
+      muted
+      playsinline
+      style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;"
+    ></video>
+
+    <!-- Vignette + color grade + grain — non-timed visual containers -->
+    <div class="vignette"></div>
+    <div class="color-grade"></div>
+    <div class="grain"></div>
+
+    <!-- Letterbox bars -->
+    <div class="letterbox-top"></div>
+    <div class="letterbox-bottom"></div>
+
+    <!-- Lower-third label: full-window clip, GSAP drives visibility -->
+    <div class="clip" data-start="0" data-duration="6" data-track-index="1">
+      <div class="lower-label">
+        <span class="label-text">Into the Dark</span>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Idle Ken-Burns on the color-grade overlay — anchors timeline to full 6s
+      // without transforming text ancestors or the video element.
+      tl.fromTo(".color-grade",
+        { opacity: 0.18 },
+        { opacity: 0.26, duration: 6, ease: "sine.inOut" },
+        0
+      );
+
+      // Vignette breathes very subtly
+      tl.fromTo(".vignette",
+        { opacity: 0.85 },
+        { opacity: 1.0, duration: 6, ease: "sine.inOut" },
+        0
+      );
+
+      // Letterbox bars slide in from top and bottom
+      tl.from(".letterbox-top",
+        { y: -80, duration: 1.1, ease: "power2.out" },
+        0.1
+      );
+      tl.from(".letterbox-bottom",
+        { y: 80, duration: 1.1, ease: "power2.out" },
+        0.1
+      );
+
+      // Lower-third label fades in after bars settle
+      tl.from(".label-text",
+        { opacity: 0, duration: 1.4, ease: "sine.inOut" },
+        1.5
+      );
+
+      // Anchor — hold label at natural state through end of beat
+      tl.set(".label-text", { opacity: 0.72 }, 5.999);
+
+      window.__timelines["scene-trek"] = tl;
+    </script>
+  </div>
+</template>
\ No newline at end of file
diff --git a/showcase-aurora/compositions/scene-wonder.html b/showcase-aurora/compositions/scene-wonder.html
new file mode 100644
index 00000000..015eb4c8
--- /dev/null
+++ b/showcase-aurora/compositions/scene-wonder.html
@@ -0,0 +1,190 @@
+<template id="scene-wonder-template">
+  <div data-composition-id="scene-wonder" data-start="0" data-duration="6" data-width="1920" data-height="1080">
+    <style>
+      [data-composition-id="scene-wonder"] {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #0B1622;
+        overflow: hidden;
+      }
+
+      [data-composition-id="scene-wonder"] .clip {
+        position: absolute;
+        inset: 0;
+      }
+
+      [data-composition-id="scene-wonder"] .backdrop-video {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      [data-composition-id="scene-wonder"] .overlay-clip {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+
+      /* Letterbox bars */
+      [data-composition-id="scene-wonder"] .letterbox-top,
+      [data-composition-id="scene-wonder"] .letterbox-bottom {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 72px;
+        background: #0B1622;
+        z-index: 10;
+      }
+      [data-composition-id="scene-wonder"] .letterbox-top    { top: 0; }
+      [data-composition-id="scene-wonder"] .letterbox-bottom { bottom: 0; }
+
+      /* Lower-third title area */
+      [data-composition-id="scene-wonder"] .lower-third {
+        position: absolute;
+        bottom: 120px;
+        left: 0;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 14px;
+        z-index: 20;
+      }
+
+      [data-composition-id="scene-wonder"] .wonder-title {
+        font-family: 'Cormorant', 'Georgia', serif;
+        font-weight: 300;
+        font-size: 72px;
+        letter-spacing: 0.22em;
+        color: #F4F1EA;
+        text-transform: uppercase;
+        line-height: 1;
+        opacity: 0;
+      }
+
+      [data-composition-id="scene-wonder"] .wonder-rule {
+        width: 0px;
+        height: 1px;
+        background: #F4F1EA;
+        opacity: 0;
+      }
+
+      [data-composition-id="scene-wonder"] .wonder-label {
+        font-family: 'Cormorant', 'Georgia', serif;
+        font-weight: 400;
+        font-size: 18px;
+        letter-spacing: 0.38em;
+        color: #F4F1EA;
+        text-transform: uppercase;
+        opacity: 0;
+      }
+
+      /* Subtle vignette */
+      [data-composition-id="scene-wonder"] .vignette {
+        position: absolute;
+        inset: 0;
+        background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 40%, rgba(11,22,34,0.55) 100%);
+        z-index: 5;
+        pointer-events: none;
+      }
+
+      /* Accent glow — warm parka echo at bottom centre */
+      [data-composition-id="scene-wonder"] .parka-glow {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 320px;
+        height: 120px;
+        border-radius: 50%;
+        background: radial-gradient(ellipse at 50% 60%, rgba(216,69,46,0.18) 0%, rgba(216,69,46,0) 100%);
+        z-index: 6;
+        opacity: 0;
+        pointer-events: none;
+      }
+    </style>
+
+    <!-- Full-bleed video — direct child of composition root, NOT nested in a timed clip -->
+    <video
+      id="video-wonder"
+      src="assets/video-wonder.mp4"
+      data-start="0"
+      data-duration="6"
+      data-media-start="0"
+      data-track-index="0"
+      class="backdrop-video"
+      muted
+      playsinline
+    ></video>
+
+    <!-- Vignette (non-timed decorative) -->
+    <div class="vignette"></div>
+
+    <!-- Parka warm glow (non-timed decorative) -->
+    <div class="parka-glow"></div>
+
+    <!-- Letterbox (non-timed) -->
+    <div class="letterbox-top"></div>
+    <div class="letterbox-bottom"></div>
+
+    <!-- Overlay text — full-window clip, no nested data-start on the video -->
+    <div class="clip overlay-clip" data-start="0" data-duration="6" data-track-index="1">
+      <div class="lower-third">
+        <div class="wonder-title">The Whole Sky</div>
+        <div class="wonder-rule"></div>
+        <div class="wonder-label">Chasing Light</div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+      const tl = gsap.timeline({ paused: true });
+
+      // Idle Ken-Burns on the video wrapper kept off the text ancestors.
+      // The video itself can't be directly scaled (framework owns it),
+      // so we animate the vignette plane as a subtle breathing layer.
+      tl.fromTo(".vignette",
+        { opacity: 0.85 },
+        { opacity: 1.0, duration: 6, ease: "sine.inOut" },
+        0
+      );
+
+      // Parka glow pulses in during the emotional peak
+      tl.fromTo(".parka-glow",
+        { opacity: 0, scale: 0.8 },
+        { opacity: 1, scale: 1.1, duration: 2.4, ease: "sine.inOut" },
+        1.2
+      );
+
+      // Title fades up from slight lift — slow, reverent
+      tl.fromTo(".wonder-title",
+        { opacity: 0, y: 18 },
+        { opacity: 1, y: 0, duration: 1.4, ease: "sine.inOut" },
+        0.8
+      );
+
+      // Hairline rule expands outward from centre
+      tl.fromTo(".wonder-rule",
+        { width: 0, opacity: 0 },
+        { width: 180, opacity: 0.55, duration: 1.0, ease: "power2.inOut" },
+        1.8
+      );
+
+      // Label small-caps attribution rises last
+      tl.fromTo(".wonder-label",
+        { opacity: 0, y: 8 },
+        { opacity: 0.7, y: 0, duration: 0.9, ease: "sine.inOut" },
+        2.4
+      );
+
+      // Timeline anchor — holds final state to beat boundary
+      tl.set(".wonder-title", { opacity: 1, y: 0 }, 5.999);
+
+      window.__timelines["scene-wonder"] = tl;
+    </script>
+  </div>
+</template>
\ No newline at end of file
diff --git a/showcase-aurora/hyperframes.json b/showcase-aurora/hyperframes.json
new file mode 100644
index 00000000..5fb1d6d8
--- /dev/null
+++ b/showcase-aurora/hyperframes.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  }
+}
diff --git a/showcase-aurora/index.html b/showcase-aurora/index.html
new file mode 100644
index 00000000..e0d771e0
--- /dev/null
+++ b/showcase-aurora/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="24"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- Scenes added via `vibe scene add` are inserted here. -->
+      <!-- Each scene reference: data-composition-id, data-composition-src, data-start, data-duration, data-track-index. -->
+      <!-- See compositions/*.html for sub-composition contents. -->
+      <!-- vibe-scene-build: clip refs (auto-generated; safe to re-run) -->
+      <div class="clip" data-composition-id="scene-trek" data-composition-src="compositions/scene-trek.html" data-start="0" data-duration="6" data-track-index="0"></div>
+      <div class="clip" data-composition-id="scene-ignite" data-composition-src="compositions/scene-ignite.html" data-start="6" data-duration="6" data-track-index="0"></div>
+      <div class="clip" data-composition-id="scene-wonder" data-composition-src="compositions/scene-wonder.html" data-start="12" data-duration="6" data-track-index="0"></div>
+      <div class="clip" data-composition-id="scene-dawn" data-composition-src="compositions/scene-dawn.html" data-start="18" data-duration="6" data-track-index="0"></div>
+      <audio id="music-trek" src="assets/music-trek.mp3" data-start="0" data-duration="6" data-track-index="1" data-volume="0.22"></audio>
+      <audio id="music-dawn" src="assets/music-dawn.mp3" data-start="18" data-duration="6" data-track-index="1" data-volume="0.22"></audio>
+      <!-- /vibe-scene-build -->
+    
+
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
diff --git a/showcase-aurora/meta.json b/showcase-aurora/meta.json
new file mode 100644
index 00000000..5baafd18
--- /dev/null
+++ b/showcase-aurora/meta.json
@@ -0,0 +1,5 @@
+{
+  "id": "showcase-aurora",
+  "name": "showcase-aurora",
+  "createdAt": "2026-07-01T04:31:12.062Z"
+}
diff --git a/showcase-aurora/render-report.json b/showcase-aurora/render-report.json
new file mode 100644
index 00000000..3f36ff43
--- /dev/null
+++ b/showcase-aurora/render-report.json
@@ -0,0 +1,20 @@
+{
+  "schemaVersion": "1",
+  "kind": "render",
+  "project": "/Users/kiyeonjeon/dev/vericontext/vibeframe/showcase-aurora",
+  "beat": null,
+  "root": "index.html",
+  "outputPath": "/Users/kiyeonjeon/dev/vericontext/vibeframe/showcase-aurora/renders/showcase-aurora-2026-07-01-04-31-12.mp4",
+  "absoluteOutputPath": "/Users/kiyeonjeon/dev/vericontext/vibeframe/showcase-aurora/renders/showcase-aurora-2026-07-01-04-31-12.mp4",
+  "openCommand": "open /Users/kiyeonjeon/dev/vericontext/vibeframe/showcase-aurora/renders/showcase-aurora-2026-07-01-04-31-12.mp4",
+  "revealCommand": "open -R /Users/kiyeonjeon/dev/vericontext/vibeframe/showcase-aurora/renders/showcase-aurora-2026-07-01-04-31-12.mp4",
+  "fps": 30,
+  "quality": "standard",
+  "format": "mp4",
+  "durationMs": 102319,
+  "framesRendered": 720,
+  "totalFrames": 720,
+  "audioCount": 2,
+  "audioMuxApplied": true,
+  "updatedAt": "2026-07-01T04:32:54.396Z"
+}
diff --git a/showcase-aurora/vibe.config.json b/showcase-aurora/vibe.config.json
new file mode 100644
index 00000000..85a8ab9e
--- /dev/null
+++ b/showcase-aurora/vibe.config.json
@@ -0,0 +1,33 @@
+{
+  "schemaVersion": "1",
+  "name": "showcase-aurora",
+  "aspect": "16:9",
+  "kind": "cinema",
+  "defaults": {
+    "sceneDurationSec": 5,
+    "narrationPaddingSec": 0.5,
+    "fps": 30,
+    "quality": "standard"
+  },
+  "providers": {
+    "image": null,
+    "video": null,
+    "narration": null,
+    "music": null,
+    "composer": null
+  },
+  "build": {
+    "mode": "auto",
+    "stage": "all",
+    "maxCostUsd": null,
+    "imageQuality": "hd",
+    "imageSize": "1536x1024"
+  },
+  "composition": {
+    "engine": "hyperframes",
+    "entry": "index.html",
+    "compositionsDir": "compositions",
+    "assetsDir": "assets",
+    "rendersDir": "renders"
+  }
+}