# Scene catalog

> All scene compositions with ids, durations, narrative roles, and handoff constraints—from connector-morph through outro, plus the standalone tesla-rap explainer plate.

- Repository: heygen-com/hyperframes-launches
- GitHub: https://github.com/heygen-com/hyperframes-launches
- Human docs: https://grok-wiki.com/public/docs/heygen-com-hyperframes-launches-996f3eaa626b
- Complete Markdown: https://grok-wiki.com/public/docs/heygen-com-hyperframes-launches-996f3eaa626b/llms-full.txt

## Source Files

- `compositions/connector-morph.html`
- `compositions/chat-response.html`
- `compositions/response-scroll.html`
- `compositions/followup-type.html`
- `compositions/thinking-big.html`
- `compositions/compose-ui.html`
- `compositions/sure-response.html`
- `compositions/compose-tasklist.html`

---

---
title: "Scene catalog"
description: "All scene compositions with ids, durations, narrative roles, and handoff constraints—from connector-morph through outro, plus the standalone tesla-rap explainer plate."
---

The `compositions/` folder holds eleven HyperFrames scene plates—ten stacked in the root `claude-paper` master cut (`index.html`, 53.3 s) and one standalone explainer (`tesla-rap`). Each plate is a `<template>` wrapping a `data-composition-id` root at 1920×1080, a paused GSAP timeline registered on `window.__timelines`, and local `@font-face` blocks. Master-cut scenes are loaded via `data-composition-src` on section divs; seam blending is owned by the root timeline (`window.__timelines["claude-paper"]`).

## Master-cut inventory

| Order | Composition ID | File | Plate duration | Master `data-start` | Master window end | `data-track-index` | z-index |
|------:|----------------|------|---------------:|--------------------:|------------------:|-------------------:|--------:|
| 1 | `connector-morph` | `compositions/connector-morph.html` | 6.7 s | 0.0 s | 6.7 s | 1 | 1 |
| 2 | `chat-response` | `compositions/chat-response.html` | 6.9 s | 6.7 s | 13.6 s | 2 | 2 |
| 3 | `response-scroll` | `compositions/response-scroll.html` | 6.7 s | 13.0 s | 19.7 s | 3 | 3 |
| 4 | `followup-type` | `compositions/followup-type.html` | 6.0 s | 19.4 s | 25.4 s | 4 | 4 |
| 5 | `thinking-big` | `compositions/thinking-big.html` | 1.3 s | 25.0 s | 26.3 s | 5 | 5 |
| 6 | `compose-ui` | `compositions/compose-ui.html` | 13.3 s | 25.8 s | 39.1 s | 6 | 6 |
| 7 | `sure-response` | `compositions/sure-response.html` | 0.4 s | 38.8 s | 39.2 s | 7 | 7 |
| 8 | `thinking-big-2` | `compositions/thinking-big-2.html` | 1.3 s | 39.0 s | 40.3 s | 9 | 8 |
| 9 | `compose-tasklist` | `compositions/compose-tasklist.html` | 9.8 s | 40.3 s | 50.1 s | 10 | 9 |
| 10 | `outro` | `compositions/outro.html` | 3.4 s | 49.9 s | 53.3 s | 11 | 10 |

<Note>
Section windows overlap by design (for example `response-scroll` starts at 13.0 s while `chat-response` still runs until 13.6 s). HyperFrames owns per-section visibility; the root timeline only animates cross-section seams.
</Note>

## Narrative arc and seam map

```text
connector-morph ──HARD CUT──► chat-response ──crossfade 0.6s──► response-scroll
      │                              │                              │
      │  +→menu→connectors→HF ON     │  type TSLA prompt→send       │  scroll TSLA answer
      │  →prompt box                 │  →thinking shimmer           │  (linger at bottom)
      │                              │                              │
      └─ cursor velocity handoff ────┘                              │
                                                                    HARD CUT (scroll lock)
                                                                    ▼
followup-type ──inverse zoom CUT@25.2s──► thinking-big ──inverse zoom CUT2@26.0s──► compose-ui
      │  re-type HyperFrames ask              "Getting started…"              Initializing→7 tasks
      │  →send                                1.3 s burst plate               →Scotsman VO in player
      │                                                                       →pause→re-prompt→send
      │                                                                             │
      │◄── leftward cut-the-curve CUT3@38.8s ──────────────────────────────────────┘
      ▼
sure-response (0.4s "Sure.") ──inverse zoom CUT4@39.2s──► thinking-big-2 ("Making your video")
      │                                                          │
      │◄── leftward cut-the-curve CUT5@40.3s ────────────────────┘
      ▼
compose-tasklist ──leftward cut-the-curve CUT6@49.9s──► outro
  mid-checklist→explainer in player→download click         HyperFrames MCP → logo
```

| Seam | Boundary | Type | Root cut constant | Outbound constraint | Inbound constraint |
|------|----------|------|-------------------|---------------------|-------------------|
| 1 | `connector-morph` → `chat-response` | Hard cut @ 6.7 s | — | End composer matches `chat-response` pixel-for-pixel; cursor exits on 1:2 velocity split (`power2.in` → `power2.out`) | Picks up cursor at matched position/velocity |
| 2 | `chat-response` → `response-scroll` | Opacity crossfade @ 13.0 s, 0.6 s | — | Message + thin composer held steady through fade | Starts hidden (`opacity: 0`); fades in while chat fades out |
| 3 | `response-scroll` → `followup-type` | Hard cut (framework) | — | Holds 0.7 s at scrolled bottom so 3→4 has no 1-frame gap | Scroll born at `response-scroll` end position; cached `maxFrozen` prevents top-flash |
| 4 | `followup-type` → `thinking-big` | Inverse zoom-through | `CUT` = 25.2 s | Outbound scales to 0.8, blurs, dims; hard cut at peak blur | Inbound enters at scale 1.25, blurs in, settles to 1 (`expo.out`, 0.5 s) |
| 5 | `thinking-big` → `compose-ui` | Inverse zoom-through | `CUT2` = 26.0 s | Same as seam 4 | Compose window enters scaled up, settles to 75% card size |
| 6 | `compose-ui` → `sure-response` | Leftward cut-the-curve | `CUT3` = 38.8 s | Whole scene throws `xPercent: -13`, fades 1→0.55 over 0.26 s (`power2.in`) | `"Sure."` slides left from `x:210`, opacity 0.55→1 |
| 7 | `sure-response` → `thinking-big-2` | Inverse zoom-through | `CUT4` = 39.2 s | Same pattern as seam 4 | `"Making your video"` burst plate |
| 8 | `thinking-big-2` → `compose-tasklist` | Leftward cut-the-curve | `CUT5` = 40.3 s | Throws left + fades 1→0.55 | Window enters `x:210→0`, opacity 0.55→1; arrives with 4/7 tasks already done |
| 9 | `compose-tasklist` → `outro` | Leftward cut-the-curve | `CUT6` = 49.9 s | Card throws left after download tap @ ~49.3 s | `"HyperFrames MCP"` title already sliding left from the right |

<Info>
Leftward cut-the-curve seams expose only the paper background (`#F0EEE6`) behind outgoing scenes, so partial off-frame motion stays seamless. Inverse zoom-through seams use symmetric scale/blur/opacity at the hard cut so velocity appears matched in the shrinking direction.
</Info>

## Scene reference

### `connector-morph` (6.7 s)

Opens on a bare `+` glyph that morphs through the tool menu, Connectors panel, Hyperframes toggle ON, and a full prompt box with rolling-bounce placeholder **"How can I help you today?"** End state mirrors `chat-response`'s `.composer` (layout, shadow, weight) for seam 1.

<ParamField body="outbound handoff" type="constraint">
Cursor begins a 0.3 s move toward the chat click point in the last 0.3 s of the plate (`left: 40.7%`, `top: 63.7%`, `power2.in`). `chat-response` continues the path at matched velocity.
</ParamField>

### `chat-response` (6.9 s)

Continues from the matched composer. Types **"Can you give your projections for TSLA in 2026?"**, cursor-taps send, morphs composer to a thin bar (`top: 87%`), flies the user bubble up, and cycles thinking words **Thinking → Researching → Analyzing** with a Lottie burst.

<ParamField body="seam 2 exit" type="constraint">
Holds the last thinking word through plate end so no black tail appears before the 0.6 s crossfade into `response-scroll`.
</ParamField>

### `response-scroll` (6.7 s)

Crossfades in over the identical message/composer layout. Scrolls the TSLA markdown answer upward over 5.2 s (`SCROLL_START` = 0.5 s) with custom scroll easing, then holds at the bottom.

<ParamField body="seam 3 exit" type="constraint">
0.7 s hold after scroll completes so the conversation remains visible behind `followup-type` until the hard cut—prevents a 1-frame gap at 19.4 s.
</ParamField>

### `followup-type` (6.0 s)

Cursor returns from below, clicks the thin composer, types a two-line follow-up (**"Ummm... thank you! Would you mind making this"** / **"into a video with HyperFrames?"**), grows the box upward on wrap, and sends. Scroll position is frozen to `response-scroll`'s end via cached `maxFrozen` and timeline-level `onUpdate`.

<ParamField body="seam 4 exit" type="constraint">
Holds sent state; root inverse zoom-through at `CUT` = 25.2 s recedes this scene while `thinking-big` enters.
</ParamField>

### `thinking-big` (1.3 s)

Giant centered thinking burst with shimmer on **"Getting started…"** (distinct from scene-2 thinking words). Lottie frame driven by GSAP `onUpdate`.

<ParamField body="seam 5 exit" type="constraint">
~1 s on screen; root `CUT2` = 26.0 s inverse zoom-through hands off to `compose-ui`.
</ParamField>

### `compose-ui` (13.3 s)

HyperFrames compose tool window: **Initializing** shimmer → seven-task checklist (0.25 s cadence) → in-card video player with Scotsman VO (`voiceover.mp3` @ master 29.6 s, 2.17 s). Cursor pauses the video mid-"numpties", lifts the card, types a style correction, and sends—triggering the leftward sweep into `sure-response`.

| Task index | Pipeline step |
|-----------:|---------------|
| 1 | Generate narrator scripts via `narrative_planner` |
| 2 | Synthesize audio and generate ASR metadata via `audio_synth` |
| 3 | Create visual section plan via `visual_planner` |
| 4 | Build worker group specification via `build_group_spec` |
| 5 | Execute scene compositions via `scene_executor` workers |
| 6 | Merge scenes into final `index.html` via `inline_index_html` |
| 7 | Finalize execution and deliver video |

<ParamField body="seam 6 exit" type="constraint">
After send tap, cursor sweeps left off-frame (`power2.in`). Root hard-cuts at `CUT3` = 38.8 s while scene is still mostly on-frame, velocity carrying into `sure-response`.
</ParamField>

### `sure-response` (0.4 s)

Oversized serif **"Sure."** on paper grain. Enters from the right (`x: 210`, opacity 0.55) in 0.18 s to carry the leftward cut-the-curve motion.

<ParamField body="seam 7 exit" type="constraint">
Brief hold; root inverse zoom at `CUT4` = 39.2 s (~0.2 s into plate) recedes into `thinking-big-2`.
</ParamField>

### `thinking-big-2` (1.3 s)

Same burst template as `thinking-big` but displays **"Making your video"** (video-making beat).

<ParamField body="seam 8 exit" type="constraint">
Root leftward throw at `CUT5` = 40.3 s; inbound `compose-tasklist` window already sliding left.
</ParamField>

### `compose-tasklist` (9.8 s)

Runs the full output beat: arrives mid-checklist (`DONE` = 4, first four tasks pre-complete), crosses off the last three, transitions `viewList` → `viewPlayer`, plays a 6 s TSLA explainer inside `.vid` (frame.md **default** editorial style—not the rap plate), syncs explainer VO (`voiceover_explainer.mp3` @ master 42.6 s, 6.41 s), then cursor-taps the download pill @ ~9.0 s local / 49.3 s master.

<ParamField body="seam 9 exit" type="constraint">
Holds 0.48 s on the download press; root `CUT6` = 49.9 s leftward throw into `outro`.
</ParamField>

### `outro` (3.4 s)

Three beats on paper: **"HyperFrames MCP"** (slides in from right, 0.7 s) → inverse zoom → **"Now natively supported on"** (0.7 s) → inverse zoom → Claude logo Lottie (frame-driven, held to 3.4 s).

## Standalone plate: `tesla-rap`

| Field | Value |
|-------|-------|
| Composition ID | `tesla-rap` |
| File | `compositions/tesla-rap.html` |
| Plate duration | 5.0 s |
| Master registration | **Not** referenced in `index.html` |
| `window.__timelines` key | `"tesla-rap"` |

Kinetic rap-style TSLA explainer: aerial gigafactory Ken Burns with **"YO YO YO"** stamps, hard cut to second background with **"WHAT UP" ×3** and **"ALL THE DETAILS ON"**, then freeze (~3.7 s). Designed for VO-synced preview as an independent plate.

<Warning>
`tesla-rap` is not loaded by the master cut. The in-cut TSLA explainer is authored inline inside `compose-tasklist` (and partially previewed in `compose-ui`'s player card) using the editorial **default** frame style. Do not assume `data-composition-src="compositions/tesla-rap.html"` on any master section.
</Warning>

Preview standalone:

```bash
hyperframes preview compositions/tesla-rap.html
```

Append `?t=<seconds>` or `?dev=1` to seek or autoplay locally (same dev helpers as other plates).

## Composition contract (all plates)

Every scene file follows the same registration pattern:

```html
<template id="{id}-template">
  <div data-composition-id="{id}" data-width="1920" data-height="1080" data-duration="{seconds}">
    <!-- styles, markup, paused GSAP timeline -->
    <script>
      window.__timelines = window.__timelines || {};
      const tl = gsap.timeline({ paused: true });
      // …
      window.__timelines["{id}"] = tl;
    </script>
  </div>
</template>
```

<ParamField body="data-composition-id" type="string" required>
Must match the `window.__timelines` registry key and, for master-cut scenes, the section `data-composition-id` in `index.html`.
</ParamField>

<ParamField body="data-duration" type="number" required>
Plate runtime in seconds. Local GSAP timelines should hold through this length so HyperFrames does not clip early or show a black tail.
</ParamField>

<ParamField body="data-composition-src" type="path">
Set only on master section divs in `index.html` (not on standalone plates). Path is relative to the `claude-paper-launch` folder root.
</ParamField>

<ParamField body="data-start / data-duration (master)" type="number">
Master window on the `claude-paper` timeline. Changing these requires reconciling seam constants (`CUT`–`CUT6`) and audio `data-start` values.
</ParamField>

## Editing checklist

When modifying a scene, verify handoff pairs still align:

<Steps>
<Step title="Match plate duration to master window">
If `data-duration` on the root div changes, update the matching section `data-duration` and `data-start` chain in `index.html` so windows still sum to 53.3 s.
</Step>
<Step title="Reconcile seam partners">
Scenes that hard-cut or crossfade must end/start at identical layout anchors (composer geometry, scroll offset, cursor position, opacity). Test seams 1–3 in the pair `connector-morph` / `chat-response` / `response-scroll` / `followup-type` together.
</Step>
<Step title="Update root CUT constants">
Inverse zoom and leftward throws use absolute master times (`CUT` = 25.2 s through `CUT6` = 49.9 s). Shift a section start → shift the corresponding `CUT` in `index.html`.
</Step>
<Step title="Register timeline before preview">
Confirm `window.__timelines["{id}"]` is assigned after `document.fonts.ready` when metrics affect layout (typing reveals, scroll freeze).
</Step>
</Steps>

## Related pages

<CardGroup>
<Card title="Master composition reference" href="/master-composition-reference">
Root `claude-paper` stacking order, track-index assignments, and full 53.3 s section map.
</Card>
<Card title="Transition grammar" href="/transition-grammar">
Hard cuts, opacity crossfades, inverse zoom-through, and leftward cut-the-curve patterns used at seams.
</Card>
<Card title="Author a scene composition" href="/author-scene-composition">
Create or edit a `compositions/*.html` plate: template wrapper, attributes, fonts, and timeline registration.
</Card>
<Card title="Edit the master timeline" href="/edit-master-timeline">
Adjust section windows, z-index, and `CUT`–`CUT6` seam times in `index.html`.
</Card>
<Card title="Sync audio and SFX" href="/sync-audio-and-sfx">
Wire Scotsman VO, explainer VO, and click/type SFX to scene boundaries.
</Card>
</CardGroup>