chore: import upstream snapshot with attribution

packages/studio/fixtures/storyboard-sample/README.md

@@ -0,0 +1,26 @@
+# storyboard-sample (Studio fixture)
+
+A small, self-contained project for dogfooding the Studio **Storyboard** view.
+Not a registry catalog item — it lives here purely as test content for the
+storyboard UI/UX work.
+
+It exercises the storyboard contract end to end:
+
+- `STORYBOARD.md` — structured manifest (frontmatter + 5 frames) in the canonical
+  format the parser reads.
+- `compositions/frames/0{1..4}-*.html` — live HTML frame sub-compositions
+  (`built` / `animated` statuses) the contact-sheet tiles render.
+- Frame 5 (`05-cta.html`) is intentionally **absent** and `status: outline`, so
+  the grid has an outline placeholder to render.
+
+Preview the storyboard view:
+
+```bash
+npx hyperframes preview packages/studio/fixtures/storyboard-sample
+```
+
+Inspect just the parsed manifest the Studio consumes:
+
+```bash
+curl localhost:<port>/api/projects/<id>/storyboard | jq
+```

packages/studio/fixtures/storyboard-sample/SCRIPT.md

@@ -0,0 +1,52 @@
+# SCRIPT — storyboard-sample
+
+**Voice:** Rachel (ElevenLabs)
+**Voice settings:** stability 0.35 · similarity 0.75 · style 0.20
+**Voice direction:** Confident, warm, a little playful. Sounds like a person, never a reader.
+
+---
+
+## Line 1 — Hook (Frame 1)
+
+**Time:** 0.0 – 3.0s
+**Delivery:** Land the promise on the beat. Slight smile.
+
+```
+Ship a launch video in an afternoon.
+```
+
+## Line 2 — The problem (Frame 2)
+
+**Time:** 3.0 – 7.0s
+**Delivery:** Wry, a touch tired — the old grind.
+
+```
+The old way? Prompt, wait twenty minutes, get something that misses.
+```
+
+## Line 3 — The feature (Frame 3)
+
+**Time:** 7.0 – 12.0s
+**Delivery:** Lift into confidence on "then it animates."
+
+```
+You lock the story first — then it animates.
+```
+
+## Line 4 — Proof (Frame 4)
+
+**Time:** 12.0 – 16.0s
+**Delivery:** Punchy, two clean beats.
+
+```
+Fewer re-renders. More finished videos.
+```
+
+## Line 5 — CTA (Frame 5)
+
+**Time:** 16.0 – 19.0s
+**Delivery:** Calm, inviting. Let the command land.
+
+```
+Try it: npx hyperframes.
+```

packages/studio/fixtures/storyboard-sample/STORYBOARD.md

@@ -0,0 +1,71 @@
+---
+format: 1920x1080
+message: "Ship a launch video in an afternoon"
+arc: Hook → Problem → Solution → Proof → CTA
+audience: indie devs on X
+voice: Rachel — 5 lines from SCRIPT.md
+---
+
+## Frame 1 — Hook
+
+- scene: Big type punches in on the beat
+- duration: 3s
+- poster: 2s
+- transition_in: cut
+- status: animated
+- voiceover: "Ship a launch video in an afternoon."
+- src: compositions/frames/01-hook.html
+
+Open cold on the promise. Big type punches in on the beat: "Ship a launch
+video in an afternoon." This is the thesis — everything after pays it off.
+
+## Frame 2 — The problem
+
+- scene: A 20-minute timer spins on a stack of rejected takes
+- duration: 4s
+- poster: 2.6s
+- transition_in: crossfade
+- status: animated
+- voiceover: "The old way? Prompt, wait twenty minutes, get something that misses."
+- src: compositions/frames/02-problem.html
+
+The old way: prompt, wait twenty minutes, get something that misses. A timer
+spins while a stack of rejected takes piles up. Establish the pain we remove.
+
+## Frame 3 — The feature in action
+
+- scene: Frames line up as a contact sheet
+- duration: 5s
+- poster: 3.3s
+- transition_in: crossfade
+- status: built
+- voiceover: "You lock the story first — then it animates."
+- src: compositions/frames/03-feature.html
+
+Cut to the storyboard view itself. Frames line up as a contact sheet and the
+narration says "...you lock the story first, then it animates." Show, don't tell.
+
+## Frame 4 — Proof
+
+- scene: A stat counts up to the payoff number
+- duration: 4s
+- poster: 2.6s
+- transition_in: wipe
+- status: built
+- voiceover: "Fewer re-renders. More finished videos."
+- src: compositions/frames/04-proof.html
+
+A real metric lands: fewer re-renders per finished video. Number counts up
+while a caption credits the storyboard-first flow.
+
+## Frame 5 — Call to action
+
+- scene: End card with the wordmark and a one-line CTA
+- duration: 3s
+- transition_in: crossfade
+- status: outline
+- voiceover: "Try it: npx hyperframes."
+- src: compositions/frames/05-cta.html
+
+End card, still an outline. "Try it: npx hyperframes" with the wordmark. Not
+built yet — this frame should render as an outline placeholder in the grid.

packages/studio/fixtures/storyboard-sample/index.html

@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Storyboard Demo</title>
+    <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 {
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #07060f;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="16"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="frame-1"
+        class="scene"
+        data-composition-id="frame-01-hook"
+        data-composition-src="compositions/frames/01-hook.html"
+        data-start="0"
+        data-duration="3"
+        data-track-index="1"
+      ></div>
+      <div
+        id="frame-2"
+        class="scene"
+        data-composition-id="frame-02-problem"
+        data-composition-src="compositions/frames/02-problem.html"
+        data-start="3"
+        data-duration="4"
+        data-track-index="1"
+      ></div>
+      <div
+        id="frame-3"
+        class="scene"
+        data-composition-id="frame-03-feature"
+        data-composition-src="compositions/frames/03-feature.html"
+        data-start="7"
+        data-duration="5"
+        data-track-index="1"
+      ></div>
+      <div
+        id="frame-4"
+        class="scene"
+        data-composition-id="frame-04-proof"
+        data-composition-src="compositions/frames/04-proof.html"
+        data-start="12"
+        data-duration="4"
+        data-track-index="1"
+      ></div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>