# Quickstart

> First successful invocation: open index.html in HyperFrames preview, verify the 53.3s timeline plays, and render to MP4.

- 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/chat-response.html`
- `compositions/outro.html`

---

---
title: "Quickstart"
description: "First successful invocation: open index.html in HyperFrames preview, verify the 53.3s timeline plays, and render to MP4."
---

`claude-paper-launch/index.html` is the root HyperFrames composition `claude-paper`: a 1920×1080 master cut with `data-duration="53.3"`, ten scene slots under `compositions/`, a GSAP seam timeline registered on `window.__timelines["claude-paper"]`, and synced voiceover/SFX audio tracks. Run `npx hyperframes preview` from this folder to open HyperFrames Studio against that entry point, scrub the full timeline, then `npx hyperframes render` to produce an MP4.

## Prerequisites

| Dependency | Required | Notes |
| --- | --- | --- |
| Node.js 22+ | Yes | HyperFrames CLI runtime |
| FFmpeg | Yes | Local MP4 encoding |
| Git LFS | Yes | `voiceover.mp3`, `voiceover_explainer.mp3`, and `fonts/*.woff2` are LFS objects |
| HyperFrames CLI | Via `npx` | No global install required |

<Note>
Pull LFS assets before preview or render. Pointer files (~131 bytes) mean audio and fonts have not downloaded yet. From the repo root: `git lfs pull --include="claude-paper-launch/**"`.
</Note>

See [Installation](/installation) for full setup. `index.html` references `click.mp3`, `toggle.mp3`, and `typenew.mp3` (commented as generated SFX); those files are not tracked in git—visual preview still works, but SFX will be silent until those assets exist locally.

## Project layout

```text
claude-paper-launch/
├── index.html              # Root composition claude-paper (53.3s master cut)
├── compositions/           # Scene plates loaded via data-composition-src
│   ├── connector-morph.html
│   ├── chat-response.html
│   ├── response-scroll.html
│   ├── followup-type.html
│   ├── thinking-big.html
│   ├── compose-ui.html
│   ├── sure-response.html
│   ├── thinking-big-2.html
│   ├── compose-tasklist.html
│   ├── outro.html
│   └── tesla-rap.html      # Standalone plate; not wired into the master cut
├── fonts/                  # Self-hosted woff2 + fonts.css
├── voiceover.mp3           # Scotsman VO (plays at 29.6s)
├── voiceover_explainer.mp3 # Explainer VO (plays at 42.6s)
├── transcript.json         # Word-level timing for the Scotsman clip
└── FRAME-claude.md         # Design-system spec for scene authoring
```

Unlike sibling launch folders, `claude-paper-launch` has no `meta.json` or `hyperframes.json`. The CLI discovers the project from `index.html` alone.

## Runtime model

```mermaid
flowchart TB
  subgraph cli [HyperFrames CLI]
    preview["npx hyperframes preview"]
    render["npx hyperframes render"]
  end

  subgraph root [index.html — claude-paper]
    master["#claude-paper<br/>data-duration=53.3"]
    seamTl["window.__timelines['claude-paper']<br/>GSAP seam crossfades"]
    audio["audio tracks<br/>VO + SFX"]
  end

  subgraph scenes [compositions/*.html]
    cm["connector-morph"]
    cr["chat-response"]
    rs["response-scroll"]
    more["…7 more scenes"]
    ot["outro"]
  end

  preview --> master
  render --> master
  master --> seamTl
  master --> audio
  master -->|"data-composition-src"| cm
  master --> cr
  master --> rs
  master --> more
  master --> ot
  cm -->|"window.__timelines[id]"| seamTl
  cr --> seamTl
  ot --> seamTl
```

Each scene plate wraps content in a `<template>`, declares `data-composition-id`, `data-width="1920"`, `data-height="1080"`, and `data-duration`, builds a **paused** GSAP timeline, and registers it on `window.__timelines`. The root timeline in `index.html` only animates cross-section seams (opacity crossfades, inverse zoom-throughs, leftward cut-the-curve handoffs at `CUT`–`CUT6`); per-scene motion lives in the scene files.

## Preview the full cut

<Steps>
  <Step title="Enter the project folder">
    ```bash
    cd claude-paper-launch
    ```

    Confirm LFS assets are real binaries, not pointer stubs:

    ```bash
    file voiceover.mp3
    # expect: Audio file with MPEG ADTS … not ASCII text
    ```
  </Step>

  <Step title="Start HyperFrames Studio">
    ```bash
    npx hyperframes preview
    ```

    The CLI opens HyperFrames Studio in your browser with hot reload. The default composition is `index.html` at the project root.
  </Step>

  <Step title="Confirm composition metadata">
    In Studio (or browser devtools on the loaded page), verify the root element:

    | Attribute | Expected value |
    | --- | --- |
    | `data-composition-id` | `claude-paper` |
    | `data-width` / `data-height` | `1920` / `1080` |
    | `data-duration` | `53.3` |
    | `data-start` | `0` |

    Run `npx hyperframes compositions` to list registered compositions and durations.
  </Step>

  <Step title="Scrub and play through 53.3s">
    Use Studio transport controls to play from `0:00` through `0:53.3`. The timeline must not end early or show a black tail after the outro hold.

    Spot-check these seam times:

    | Time (s) | Section | `data-composition-id` | Expected beat |
    | --- | --- | --- | --- |
    | 0.0 | `#sec-connector` | `connector-morph` | Plus button → connectors menu → Hyperframes toggle |
    | 6.7 | `#sec-chat` | `chat-response` | Hard cut; typing in composer → send → thinking |
    | 13.0 | `#sec-response` | `response-scroll` | 0.6s opacity crossfade; answer scrolls up |
    | 19.4 | `#sec-followup` | `followup-type` | Follow-up typing: "into a video with HyperFrames?" |
    | 25.0 | `#sec-thinking` | `thinking-big` | Inverse zoom-through into giant thinking |
    | 25.8 | `#sec-compose` | `compose-ui` | HyperFrames compose tool UI (Initializing → steps) |
    | 29.6 | audio `#vo` | — | Scotsman voiceover starts inside compose player |
    | 38.8 | `#sec-sure` | `sure-response` | Leftward cut-the-curve → giant "Sure." |
    | 40.3 | `#sec-tasklist` | `compose-tasklist` | Task list; last three todos cross off |
    | 42.6 | audio `#vo-explainer` | — | Neutral explainer VO over TSLA clip |
    | 49.9 | `#sec-outro` | `outro` | "HyperFrames MCP" → "Now natively supported on" → Claude logo |
    | 53.3 | end | — | Logo held; composition completes |
  </Step>
</Steps>

<Tip>
Scene plates support local dev query params ignored by the HyperFrames runtime: `?t=6.7` seeks to a timestamp, `?dev=1` autoplays the scene timeline. Append to a loaded scene URL when debugging a single plate (for example `compositions/connector-morph.html?t=4.3&dev=1`).
</Tip>

### Lint before render

```bash
npx hyperframes lint
```

Resolve structural errors before rendering. Warnings about overlapping clips or GSAP tween overlap may be pre-existing; the cut still renders if lint reports zero errors.

## Render to MP4

<Steps>
  <Step title="Render the master composition">
    ```bash
    npx hyperframes render --output renders/claude-paper.mp4
    ```

    The CLI captures `index.html`, loads all ten `data-composition-src` scenes, muxes audio tracks, and encodes via FFmpeg.
  </Step>

  <Step title="Verify output">
    Expected render signature:

    ```text
    ✔ Capturing frames... N/N
    ✔ Encoding MP4...
    ✔ renders/claude-paper.mp4 (1920x1080, 53.3s, 30fps)
    ```

    Confirm duration is **53.3 seconds** and resolution is **1920×1080**.
  </Step>
</Steps>

<CodeGroup>
  ```bash Draft iteration
  npx hyperframes render --quality draft --output renders/draft.mp4
  ```

  ```bash Deterministic render
  npx hyperframes render --docker --output renders/claude-paper.mp4
  ```

  ```bash Single scene plate
  npx hyperframes render -c compositions/outro.html -o renders/outro.mp4
  ```
</CodeGroup>

<ParamField body="--output, -o" type="string">
  Output MP4 path. Create `renders/` first if it does not exist.
</ParamField>

<ParamField body="--quality" type="string" default="standard">
  `draft` for fast iteration; `standard` for final output.
</ParamField>

<ParamField body="--docker" type="boolean" default={false}>
  Run capture in Docker for reproducible frame output across machines.
</ParamField>

<ParamField body="-c, --composition" type="string">
  Render a scene file instead of the root `index.html`.
</ParamField>

## Section schedule reference

The master cut stacks ten sections by z-index (`#sec-connector` z-index 1 through `#sec-outro` z-index 10). Section windows are declared on each slot:

| # | Element ID | Composition | `data-start` | `data-duration` | End (s) |
| --- | --- | --- | --- | --- | --- |
| 1 | `#sec-connector` | `connector-morph` | 0 | 6.7 | 6.7 |
| 2 | `#sec-chat` | `chat-response` | 6.7 | 6.9 | 13.6 |
| 3 | `#sec-response` | `response-scroll` | 13.0 | 6.7 | 19.7 |
| 4 | `#sec-followup` | `followup-type` | 19.4 | 6.0 | 25.4 |
| 5 | `#sec-thinking` | `thinking-big` | 25.0 | 1.3 | 26.3 |
| 6 | `#sec-compose` | `compose-ui` | 25.8 | 13.3 | 39.1 |
| 7 | `#sec-sure` | `sure-response` | 38.8 | 0.4 | 39.2 |
| 8 | `#sec-thinking2` | `thinking-big-2` | 39.0 | 1.3 | 40.3 |
| 9 | `#sec-tasklist` | `compose-tasklist` | 40.3 | 9.8 | 50.1 |
| 10 | `#sec-outro` | `outro` | 49.9 | 3.4 | **53.3** |

Overlapping `data-start` values (for example `thinking-big` at 25.0s inside `compose-ui` starting at 25.8s) are intentional—seam tweens in the root timeline hand off visibility at `CUT`–`CUT6`.

## First-run failure modes

<Warning>
**LFS pointer audio** — If `voiceover.mp3` is ASCII text (~131 bytes), run `git lfs pull` before preview. Silent or missing VO at 29.6s is the most common first-run symptom.
</Warning>

<Warning>
**Missing generated SFX** — `index.html` wires 74 typenew keystroke clips and 11 click/toggle clips. Without `click.mp3`, `toggle.mp3`, and `typenew.mp3` on disk, interactions render visually but without sound.
</Warning>

<Warning>
**Timeline registration** — Each composition must register a paused GSAP timeline on `window.__timelines["<data-composition-id>"]`. A missing registration leaves that scene static for the entire section window.
</Warning>

<Warning>
**Font loading** — Scene plates use `font-display: block` and `await document.fonts.ready` before measuring text widths. Incomplete font LFS pulls cause layout drift in typing animations.
</Warning>

See [Troubleshooting](/troubleshooting) for recovery steps.

## Success criteria

A first successful invocation meets all of the following:

<Check>
`npx hyperframes preview` opens Studio and loads `index.html` without console errors on timeline registration.
</Check>

<Check>
Transport plays from 0s through 53.3s with all ten scenes visible at their scheduled windows.
</Check>

<Check>
Seam transitions fire at 6.7s (hard cut), 13.0s (crossfade), 25.2s / 26.0s (inverse zoom), 38.8s / 40.3s / 49.9s (leftward cut-the-curve).
</Check>

<Check>
`npx hyperframes render --output renders/claude-paper.mp4` produces a 1920×1080 MP4 with 53.3s duration.
</Check>

## Related pages

<CardGroup cols={2}>
  <Card title="Installation" href="/installation">
    Git LFS setup, Node.js/FFmpeg prerequisites, and folder layout under hyperframes-launches.
  </Card>
  <Card title="Overview" href="/overview">
    What the Claude Paper launch video demonstrates and its 1920×1080 runtime envelope.
  </Card>
  <Card title="Preview and render" href="/preview-and-render">
    Full CLI flag reference, quality presets, Docker mode, and scene-loading validation.
  </Card>
  <Card title="Master composition reference" href="/master-composition-reference">
    Root `claude-paper` composition: section stacking, track-index assignments, and audio wiring.
  </Card>
  <Card title="Composition model" href="/composition-model">
    `window.__timelines`, `data-composition-id`, template wrappers, and paused GSAP timelines.
  </Card>
  <Card title="Troubleshooting" href="/troubleshooting">
    Recovery for missing LFS assets, font stalls, seam misalignment, and registration failures.
  </Card>
</CardGroup>