# Master composition reference

> Root claude-paper composition: 1920×1080, 53.3s duration, ten stacked sections with z-index order, data-composition-src paths, and track-index assignments.

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

## Source Files

- `index.html`
- `compositions/connector-morph.html`
- `compositions/response-scroll.html`
- `compositions/thinking-big-2.html`
- `compositions/compose-tasklist.html`
- `compositions/outro.html`

---

---
title: "Master composition reference"
description: "Root claude-paper composition: 1920×1080, 53.3s duration, ten stacked sections with z-index order, data-composition-src paths, and track-index assignments."
---

`index.html` defines the root HyperFrames composition `claude-paper`: a 1920×1080, 53.3-second master cut that stacks ten absolutely positioned section shells, loads each scene from `compositions/*.html` via `data-composition-src`, and registers a paused GSAP seam timeline on `window.__timelines["claude-paper"]`. HyperFrames owns per-section visibility windows from `data-start` and `data-duration`; the root script only blends cross-section seams.

## Root envelope

The composition root is `#claude-paper` inside `index.html`.

| Attribute | Value | Role |
|-----------|-------|------|
| `data-composition-id` | `claude-paper` | Registry key for `window.__timelines` |
| `data-start` | `0` | Master timeline origin (seconds) |
| `data-width` / `data-height` | `1920` / `1080` | Render envelope |
| `data-duration` | `53.3` | Total cut length |
| Background | `#F0EEE6` | Paper canvas; keeps opaque crossfades seamless |

`html`, `body`, and `#claude-paper` are fixed at 1920×1080 with `overflow: hidden`. GSAP 3.12.5 loads from jsDelivr.

## Section stack

Ten child `<div>` elements fill the frame (`position: absolute; inset: 0`). Each declares a scene id, source path, schedule, and `data-track-index` for the HyperFrames mixer.

| # | DOM id | `data-composition-id` | `data-composition-src` | `data-start` | `data-duration` | End (s) | z-index | `data-track-index` |
|---|--------|-------------------------|------------------------|--------------|-----------------|---------|---------|-------------------|
| 1 | `sec-connector` | `connector-morph` | `compositions/connector-morph.html` | 0 | 6.7 | 6.7 | 1 | 1 |
| 2 | `sec-chat` | `chat-response` | `compositions/chat-response.html` | 6.7 | 6.9 | 13.6 | 2 | 2 |
| 3 | `sec-response` | `response-scroll` | `compositions/response-scroll.html` | 13.0 | 6.7 | 19.7 | 3 | 3 |
| 4 | `sec-followup` | `followup-type` | `compositions/followup-type.html` | 19.4 | 6.0 | 25.4 | 4 | 4 |
| 5 | `sec-thinking` | `thinking-big` | `compositions/thinking-big.html` | 25.0 | 1.3 | 26.3 | 5 | 5 |
| 6 | `sec-compose` | `compose-ui` | `compositions/compose-ui.html` | 25.8 | 13.3 | 39.1 | 6 | 6 |
| 7 | `sec-sure` | `sure-response` | `compositions/sure-response.html` | 38.8 | 0.4 | 39.2 | 7 | 7 |
| 8 | `sec-thinking2` | `thinking-big-2` | `compositions/thinking-big-2.html` | 39.0 | 1.3 | 40.3 | 8 | 9 |
| 9 | `sec-tasklist` | `compose-tasklist` | `compositions/compose-tasklist.html` | 40.3 | 9.8 | 50.1 | 9 | 10 |
| 10 | `sec-outro` | `outro` | `compositions/outro.html` | 49.9 | 3.4 | 53.3 | 10 | 11 |

<Note>
Section end times are `data-start + data-duration`. Several pairs overlap by design (for example `sec-response` starts at 13.0 while `sec-chat` runs until 13.6) so seam crossfades have both plates on screen.
</Note>

`compositions/tesla-rap.html` exists as a standalone 5.0s plate (`data-composition-id="tesla-rap"`) but is **not** mounted in the master stack. The TSLA explainer in `compose-tasklist` is authored inline inside the player card.

### Narrative beats (section comments)

| Section | Beat |
|---------|------|
| `connector-morph` | + button → tool menu → connectors → HyperFrames ON → prompt box |
| `chat-response` | Type → send → composer drops to thin bar → thinking |
| `response-scroll` | Response scrolls up; thinking dissolves into answer at seam |
| `followup-type` | Cursor returns, clicks composer, types HyperFrames request |
| `thinking-big` | Inverse zoom-through into giant centered Claude thinking |
| `compose-ui` | Inverse zoom-through into HyperFrames compose tool (Initializing → steps) |
| `sure-response` | Leftward cut-the-curve into giant reply: "Sure." |
| `thinking-big-2` | Inverse zoom-through into "Making your video…" |
| `compose-tasklist` | Leftward cut back to task list midway; last three todos cross off → player → TSLA explainer → download click |
| `outro` | Leftward cut → "HyperFrames MCP" → zoom-through → "Now natively supported on" → Claude logo |

## Z-index stacking

Later sections sit above earlier ones so opacity crossfades and zoom-through seams resolve predictably.

```text
z-index 10  sec-outro
z-index  9  sec-tasklist      ← will-change: transform, filter, opacity
z-index  8  sec-thinking2     ← will-change: transform, filter, opacity
z-index  7  sec-sure          ← will-change: transform, filter, opacity
z-index  6  sec-compose       ← will-change: transform, filter, opacity
z-index  5  sec-thinking      ← will-change: transform, filter, opacity
z-index  4  sec-followup     ← will-change: transform, filter, opacity
z-index  3  sec-response
z-index  2  sec-chat
z-index  1  sec-connector
```

Sections 4–10 carry `will-change: transform, filter, opacity` because the root timeline animates scale, blur, `xPercent`, and opacity at seams.

```mermaid
flowchart TB
  subgraph root ["index.html — claude-paper"]
    HF["HyperFrames runtime\n(data-start / data-duration visibility)"]
    RT["rootTimeline\nwindow.__timelines['claude-paper']"]
  end

  subgraph stack ["Absolute section shells — z-index 1 → 10"]
    S1["sec-connector → connector-morph.html"]
    S2["sec-chat → chat-response.html"]
    S3["sec-response → response-scroll.html"]
    S4["sec-followup → followup-type.html"]
    S5["sec-thinking → thinking-big.html"]
    S6["sec-compose → compose-ui.html"]
    S7["sec-sure → sure-response.html"]
    S8["sec-thinking2 → thinking-big-2.html"]
    S9["sec-tasklist → compose-tasklist.html"]
    S10["sec-outro → outro.html"]
  end

  HF -->|"loads via data-composition-src"| stack
  RT -->|"opacity / scale / blur / xPercent at seams"| stack
```

## Track-index assignments

`data-track-index` orders layers in the HyperFrames mixer. Visual sections use indices **1–7** and **9–11**. Index **8** is reserved for the Scotsman voiceover so it sits between `sure-response` (7) and `thinking-big-2` (9) in the audio stack.

### Visual tracks

| `data-track-index` | Element | Composition |
|--------------------|---------|-------------|
| 1 | `sec-connector` | `connector-morph` |
| 2 | `sec-chat` | `chat-response` |
| 3 | `sec-response` | `response-scroll` |
| 4 | `sec-followup` | `followup-type` |
| 5 | `sec-thinking` | `thinking-big` |
| 6 | `sec-compose` | `compose-ui` |
| 7 | `sec-sure` | `sure-response` |
| 9 | `sec-thinking2` | `thinking-big-2` |
| 10 | `sec-tasklist` | `compose-tasklist` |
| 11 | `sec-outro` | `outro` |

### Audio tracks (root `index.html`)

| `data-track-index` | Element | Source | `data-start` | `data-duration` | `data-volume` |
|--------------------|---------|--------|--------------|-----------------|---------------|
| 8 | `#vo` | `voiceover.mp3` | 29.6 | 2.17 | 1 |
| 184 | `#vo-explainer` | `voiceover_explainer.mp3` | 42.6 | 6.41 | 1 |
| 100–108 | `#sfx-click-0` … `#sfx-click-8` | `click.mp3` | various | 0.07 | 0.85 |
| 102 | `#sfx-toggle` | `toggle.mp3` | 4.30 | 2.67 | 0.85 |
| 109–182 | `#sfx-type-0` … `#sfx-type-73` | `typenew.mp3` | various | 0.57 | 0.2 |
| 183 | `#sfx-click-9` | `click.mp3` | 38.42 | 0.07 | 0.85 |
| 185 | `#sfx-click-10` | `click.mp3` | 49.30 | 0.07 | 0.85 |

<Info>
Click SFX align to UI interactions (connector taps, send, download). Type SFX clusters at 7.8–9.5s (`chat-response`), 20.8–23.7s (`followup-type`), and 33.6–37.3s (`compose-ui` prompt entry).
</Info>

## Seam cut constants

The root GSAP timeline defines eight inter-section seams. Constants `CUT` through `CUT6` are absolute times on the master clock.

| Seam | Transition | Cut time | Outgoing | Incoming | Root behavior |
|------|------------|----------|----------|----------|---------------|
| 1 | Hard cut | 6.7s | `sec-connector` | `sec-chat` | No blend; end-frame composer matches start-frame |
| 2 | Opacity crossfade | 13.0s (0.6s) | `sec-chat` | `sec-response` | `#sec-response` starts at `opacity: 0` |
| 3 | Inverse zoom-through | `CUT` = 25.2s | `sec-followup` | `sec-thinking` | Scale down + blur out → scale up from 1.25 |
| 4 | Inverse zoom-through | `CUT2` = 26.0s | `sec-thinking` | `sec-compose` | Same pattern as seam 3 |
| 5 | Leftward cut-the-curve | `CUT3` = 38.8s | `sec-compose` | `sec-sure` | `xPercent: -13`, opacity 1→0.55, hard cut |
| 6 | Inverse zoom-through | `CUT4` = 39.2s | `sec-sure` | `sec-thinking2` | Same pattern as seam 3 |
| 7 | Leftward cut-the-curve | `CUT5` = 40.3s | `sec-thinking2` | `sec-tasklist` | Hard cut; task list enters sliding left |
| 8 | Leftward cut-the-curve | `CUT6` = 49.9s | `sec-tasklist` | `sec-outro` | Hard cut after download-button click |

Inverse zoom-through pattern (seams 3, 4, 6): outgoing scales to 0.8, `blur(20px)`, opacity 0.15; hard cut at peak blur; incoming starts at scale 1.25, same blur, opacity 0.15; settles to scale 1 over 0.5s with `expo.out`.

Leftward cut-the-curve pattern (seams 5, 7, 8): outgoing `xPercent: -13` over 0.26s with `power2.in`, opacity fades to 0.55; hard cut while still moving; incoming appears at full opacity with matching leftward entry motion in the scene timeline.

## Root GSAP timeline

```javascript
window.__timelines = window.__timelines || {};
const rootTimeline = gsap.timeline({ paused: true });
// … seam tweens …
window.__timelines["claude-paper"] = rootTimeline;
```

<ParamField body="paused" type="boolean" default="true">
Root and scene timelines are paused; HyperFrames scrubs them against the master clock.
</ParamField>

Responsibility split:

- **HyperFrames** — loads each `data-composition-src`, runs the scene's own `window.__timelines[id]`, and shows/hides sections by `data-start` / `data-duration`.
- **Root timeline** — cross-section blending only; no padding or intra-scene animation.

Initial opacity sets at time `0`:

- `#sec-response`, `#sec-thinking`, `#sec-compose`, `#sec-sure`, `#sec-thinking2`, `#sec-tasklist`, `#sec-outro` → `opacity: 0` until their seam reveals them.

## Scene plate contract

Each `compositions/*.html` file wraps content in a `<template>` and declares matching metadata on the inner root:

```html
<div data-composition-id="connector-morph"
     data-width="1920" data-height="1080" data-duration="6.7">
```

Scene durations in plate files match the `data-duration` on the corresponding section shell in `index.html`. Each plate registers its own paused timeline, for example `window.__timelines["connector-morph"]`.

## Verification signals

| Check | Expected |
|-------|----------|
| Master duration | Last section ends at 49.9 + 3.4 = **53.3s** |
| Frame size | Viewport and `#claude-paper` both **1920×1080** |
| Timeline registry | `window.__timelines["claude-paper"]` exists after `index.html` parses |
| Seam 1 | No opacity tween at 6.7s; hard cut from connector to chat |
| Seam 2 | `#sec-response` visible by 13.6s; `#sec-chat` faded out |
| Track 8 gap | No visual section uses `data-track-index="8"`; `#vo` occupies it |
| Final frame | `sec-outro` holds through 53.3s at z-index 10 |

<Warning>
Changing `data-start` or `data-duration` on a section without updating the matching `CUT` constant and scene `data-duration` causes seam misalignment. Edit root and scene timelines together.
</Warning>

## Related pages

<CardGroup>
  <Card title="Edit the master timeline" href="/edit-master-timeline">
    Adjust section schedules, z-index, and CUT constants in index.html.
  </Card>
  <Card title="Scene catalog" href="/scene-catalog">
    Per-scene ids, durations, narrative roles, and handoff constraints.
  </Card>
  <Card title="Transition grammar" href="/transition-grammar">
    Hard cuts, opacity crossfades, inverse zoom-through, and leftward cut-the-curve patterns.
  </Card>
  <Card title="Audio track reference" href="/audio-track-reference">
    Voiceover timing, SFX inventory, and transcript.json word-level sync.
  </Card>
  <Card title="HyperFrames composition model" href="/composition-model">
    How root and scene compositions register on window.__timelines.
  </Card>
</CardGroup>