# Overview

> What the Claude Paper launch video demonstrates, its 1920×1080 runtime envelope, primary entry points, and the shortest path to preview the full cut.

- 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`
- `FRAME-claude.md`
- `compositions/outro.html`
- `compositions/compose-ui.html`
- `voiceover.mp3`

---

---
title: "Overview"
description: "What the Claude Paper launch video demonstrates, its 1920×1080 runtime envelope, primary entry points, and the shortest path to preview the full cut."
---

`claude-paper-launch/index.html` is the root HyperFrames composition `claude-paper`: a **53.3s**, **1920×1080** master cut that stacks ten scene plates, drives cross-section seams with a paused GSAP timeline on `window.__timelines`, and loads each scene from `compositions/` via `data-composition-src`.

## What the cut demonstrates

The video tells an end-to-end product story: a Claude user enables the HyperFrames MCP connector, receives a long-form Tesla analysis, asks Claude to turn it into a video, watches HyperFrames compose generate output, corrects an unwanted Scottish narrator style, and lands on a branded close announcing native HyperFrames MCP support on Claude.

| Beat | Scene id | Start | Duration | Narrative role |
| --- | --- | ---: | ---: | --- |
| 1 | `connector-morph` | 0s | 6.7s | Open `+` menu, enable Hyperframes connector, reveal prompt box |
| 2 | `chat-response` | 6.7s | 6.9s | Type and send the Tesla question; composer collapses to thinking |
| 3 | `response-scroll` | 13.0s | 6.7s | Scroll the long Tesla markdown answer into view |
| 4 | `followup-type` | 19.4s | 6.0s | Click composer; type “into a video with HyperFrames?” |
| 5 | `thinking-big` | 25.0s | 1.3s | Giant centered thinking: “Getting started…” |
| 6 | `compose-ui` | 25.8s | 13.3s | HyperFrames compose UI: init → 7-step pipeline → in-player Scottish VO → pause → style correction → send |
| 7 | `sure-response` | 38.8s | 0.4s | Giant serif reply: “Sure.” |
| 8 | `thinking-big-2` | 39.0s | 1.3s | Giant thinking: “Making your video…” |
| 9 | `compose-tasklist` | 40.3s | 9.8s | Task list resumes halfway; last three items cross off; download tap |
| 10 | `outro` | 49.9s | 3.4s | “HyperFrames MCP” → “Now natively supported on” → Claude logo Lottie |

The `compose-ui` plate is the narrative centerpiece: it runs the real seven-task HyperFrames pipeline (`narrative_planner` through `inline_index_html`), plays a generated “Hamish McTavish’s Tips” segment inside the compose player, interrupts the Scotsman voiceover at “numpties,” and shows the user typing a correction to drop the Scottish style.

`compositions/tesla-rap.html` (`tesla-rap`, 5.0s) is a standalone explainer plate referenced by the compose flow but **not** mounted in the master `index.html` stack.

## Runtime envelope

| Field | Value | Where set |
| --- | --- | --- |
| Composition id | `claude-paper` | `#claude-paper` in `index.html` |
| Frame size | 1920 × 1080 px | `data-width`, `data-height`; fixed `html, body` dimensions |
| Duration | 53.3 s | `data-duration="53.3"` |
| Background | `#F0EEE6` (paper) | Root and section CSS |
| Export target | 1920×1080 @ 30 fps | `FRAME-claude.md` motion export note |
| Scene plates | 1920 × 1080 each | Every `compositions/*.html` root `data-width` / `data-height` |

Sections are absolutely positioned full-bleed layers with `z-index` 1–10 so crossfades and cut-the-curve handoffs stack predictably. The master timeline in `index.html` owns **only** inter-section opacity, scale, blur, and `xPercent` seams (`CUT` through `CUT6`); each scene owns its internal GSAP timeline registered on `window.__timelines[<id>]`.

```text
index.html (#claude-paper, 53.3s)
├── sec-connector   z:1  → compositions/connector-morph.html
├── sec-chat        z:2  → compositions/chat-response.html
├── sec-response    z:3  → compositions/response-scroll.html
├── sec-followup    z:4  → compositions/followup-type.html
├── sec-thinking    z:5  → compositions/thinking-big.html
├── sec-compose     z:6  → compositions/compose-ui.html
├── sec-sure        z:7  → compositions/sure-response.html
├── sec-thinking2   z:8  → compositions/thinking-big-2.html
├── sec-tasklist    z:9  → compositions/compose-tasklist.html
├── sec-outro       z:10 → compositions/outro.html
├── voiceover.mp3           (Scotsman VO @ 29.6s, 2.17s)
├── voiceover_explainer.mp3 (explainer VO @ 42.6s, 6.41s)
└── click / toggle / typenew SFX tracks (data-start on <audio>)
```

## Primary entry points

| Path | Role |
| --- | --- |
| `index.html` | Master composition; open this for the full 53.3s cut |
| `compositions/*.html` | Scene templates (`<template id="…-template">`) with per-scene timelines |
| `FRAME-claude.md` | Claude Paper design system: colors, typography ramps, frame treatments, motion rules |
| `fonts/fonts.css` | Shared `@font-face` blocks (Hanken Grotesk, Spline Sans Mono, Newsreader, Galaxie Copernicus) |
| `transcript.json` | Word-level timing for the Scotsman VO segment |
| `voiceover.mp3` | Scotsman voiceover (plays during compose player segment) |
| `voiceover_explainer.mp3` | Neutral presenter VO over the final explainer beat |

<Note>
Binary audio and SFX files (`voiceover.mp3`, `click.mp3`, `toggle.mp3`, `typenew.mp3`, images referenced in scenes) are Git LFS assets. A checkout without `git lfs pull` may contain 131-byte pointer stubs instead of playable media.
</Note>

## Design system binding

Visual language follows **Claude Paper** from `FRAME-claude.md`: four brand atoms (paper `#F0EEE6`, ink `#262624`, muted `#6F6E66`, clay `#D97757`), Hanken Grotesk for display and body, Spline Sans Mono for chrome labels, and frame-relative sizing in `vw` / `cqw` against a `container-type: size` root. Scene plates embed local `woff2` fonts with `font-display: block` so preview and render match.

## Shortest path to preview the full cut

<Steps>
<Step title="Install prerequisites">

Install [Git LFS](https://git-lfs.com/) and the HyperFrames CLI. From the scoped folder root, pull LFS objects so audio, SFX, and referenced images resolve:

```bash
git lfs install
git lfs pull
```

</Step>

<Step title="Open the master composition">

From inside `claude-paper-launch/`, run HyperFrames preview against `index.html`:

```bash
cd claude-paper-launch
hyperframes preview
```

The preview loads `index.html`, hydrates each `data-composition-src` section, seeks the root `window.__timelines["claude-paper"]` timeline, and plays synchronized `<audio>` tracks by `data-start` / `data-duration`.

</Step>

<Step title="Verify the timeline">

Confirm the transport reads **53.3s** total duration and sections hand off at the scheduled `data-start` values (0 → 6.7 → 13.0 → … → 49.9). Audio cues to check:

- Scotsman VO begins near **29.6s** inside the compose player
- Explainer VO begins near **42.6s** during the task-list / explainer beat
- Click SFX fires on connector toggles, composer taps, and the download press near **49.3s**

</Step>
</Steps>

### Scene-only preview (without the master stack)

Any scene template supports local scrubbing via URL query params (pattern used across `compositions/`):

```bash
# auto-play the scene timeline in a browser
compositions/compose-ui.html?dev=1

# seek to a specific second
compositions/outro.html?t=1.4
```

These paths exercise a single `window.__timelines[<composition-id>]` registration; they do not load sibling sections or root audio tracks.

### Render to MP4

After preview validation:

```bash
hyperframes render
```

Output is **1920×1080** MP4 from the same `index.html` root. See [Preview and render](/preview-and-render) for CLI flags and validation checks.

## Master timeline seam grammar (summary)

The root timeline blends sections with four seam types:

| Seam | Sections | Type | Cut time |
| --- | --- | --- | ---: |
| 1 | connector → chat | Hard cut | 6.7s |
| 2 | chat → response | Opacity crossfade (0.6s) | 13.0s |
| 3 | follow-up → thinking | Inverse zoom-through | `CUT` 25.2s |
| 4 | thinking → compose | Inverse zoom-through | `CUT2` 26.0s |
| 5 | compose → sure | Leftward cut-the-curve | `CUT3` 38.8s |
| 6 | sure → thinking-2 | Inverse zoom-through | `CUT4` 39.2s |
| 7 | thinking-2 → tasklist | Leftward cut-the-curve | `CUT5` 40.3s |
| 8 | tasklist → outro | Leftward cut-the-curve | `CUT6` 49.9s |

Connector and chat share a pixel-matched composer layout, so seam 1 needs no blend. Paper background on exposed edges keeps leftward throws seamless.

## Related pages

<CardGroup>
<Card title="Installation" href="/installation">
Git LFS, HyperFrames CLI, and the scoped folder layout under hyperframes-launches.
</Card>
<Card title="Quickstart" href="/quickstart">
First successful preview of the 53.3s timeline and render to MP4.
</Card>
<Card title="Composition model" href="/composition-model">
How root and scene compositions register on `window.__timelines`.
</Card>
<Card title="Master composition reference" href="/master-composition-reference">
Full section table, z-index order, and track-index assignments.
</Card>
<Card title="Scene catalog" href="/scene-catalog">
All scene ids, durations, and handoff constraints.
</Card>
<Card title="Claude Paper design system" href="/claude-paper-design-system">
Brand atoms, typography ramps, and frame-scale authoring rules.
</Card>
</CardGroup>