# Installation

> Prerequisites for opening and rendering the project: Git LFS for binary assets, HyperFrames CLI, and the scoped folder layout under hyperframes-launches.

- 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`
- `fonts/fonts.css`
- `voiceover.mp3`
- `voiceover_explainer.mp3`
- `transcript.json`

---

---
title: "Installation"
description: "Prerequisites for opening and rendering the project: Git LFS for binary assets, HyperFrames CLI, and the scoped folder layout under hyperframes-launches."
---

`claude-paper-launch/` is a standalone HyperFrames composition inside the [heygen-com/hyperframes-launches](https://github.com/heygen-com/hyperframes-launches) monorepo. The master cut lives at `index.html`: composition id `claude-paper`, frame size 1920×1080, duration 53.3s. Ten scene plates load from `compositions/` via `data-composition-src`, and audio/SFX elements reference root-level MP3 paths. Opening or rendering requires Git LFS for binary assets, the HyperFrames CLI, and outbound network access for the GSAP 3.12.5 CDN script.

## Prerequisites

| Requirement | Role in this project |
| --- | --- |
| Git + Git LFS | Pulls voiceover, font, and source-audio binaries tracked by the repo-root `.gitattributes` |
| HyperFrames CLI | Previews `index.html` in Studio and renders the 53.3s master cut to MP4 |
| Network access | Loads `gsap@3.12.5` from `cdn.jsdelivr.net` in `index.html` and every scene plate |

<Warning>
If LFS assets are not smudged, MP3 and WOFF2 files remain 131-byte pointer stubs (`version https://git-lfs.github.com/spec/v1`). Preview and render will fail on missing audio, broken typography, and silent SFX.
</Warning>

## Clone the repository

<Steps>
<Step title="Install Git LFS">

```bash
brew install git-lfs   # macOS
git lfs install
```

</Step>

<Step title="Clone hyperframes-launches">

```bash
git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches/claude-paper-launch
```

With Git LFS installed, LFS objects download during clone.

</Step>

<Step title="Recover LFS assets after a pointer-only clone">

If binaries are still pointers, pull them explicitly:

```bash
cd hyperframes-launches
git lfs pull --include="claude-paper-launch/**"
```

For a text-only clone followed by selective fetch:

```bash
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches
git lfs pull --include="claude-paper-launch/**"
```

</Step>
</Steps>

### LFS file types

The repo-root `.gitattributes` routes these extensions through Git LFS:

| Extension | Relevant assets in `claude-paper-launch/` |
| --- | --- |
| `*.mp3` | `voiceover.mp3`, `voiceover_explainer.mp3`, `ElevenLabs_2026-06-05T10_14_44_Scotsman_gen_sp100_s50_sb75_v3 (1).mp3` |
| `*.woff2` | 21 self-hosted font files under `fonts/` |

Plain-text sources—`index.html`, `compositions/*.html`, `fonts/fonts.css`, `transcript.json`, `FRAME-claude.md`—are stored as regular Git objects.

## Install HyperFrames CLI

The `hyperframes-launches` README documents the standard workflow: run CLI commands from the project directory.

```bash
cd claude-paper-launch
hyperframes preview     # open HyperFrames Studio
hyperframes render      # render to MP4
```

If `hyperframes` is not on `PATH`, invoke it through `npx`:

```bash
npx --yes hyperframes preview
npx --yes hyperframes render
```

See the [HyperFrames CLI repository](https://github.com/heygen-com/hyperframes) for install options, lint/validate commands, and render flags.

<Note>
Unlike sibling launches such as `vfx-heygen-combined/`, `claude-paper-launch/` has no local `package.json` or `hyperframes.json`. The CLI operates directly against `index.html` as the composition root.
</Note>

## Folder layout

`claude-paper-launch/` follows the HyperFrames project shape with assets co-located at the project root rather than under an `assets/` subdirectory.

:::files
claude-paper-launch/
├── index.html                 # master composition (claude-paper, 53.3s)
├── compositions/              # scene plates loaded by 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 explainer plate (not in master stack)
├── fonts/
│   ├── fonts.css              # shared @font-face definitions
│   └── *.woff2                # Hanken Grotesk, Newsreader, Spline Sans Mono, Galaxie Copernicus
├── voiceover.mp3              # Scotsman VO (data-start 29.6s)
├── voiceover_explainer.mp3    # neutral presenter VO (data-start 42.6s)
├── transcript.json            # word-level timing for tesla-rap captions
├── FRAME-claude.md            # Claude Paper design tokens
└── ElevenLabs_*.mp3           # source Scotsman generation (LFS)
:::

### Master composition entry point

`index.html` declares the runtime envelope on `#claude-paper`:

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

Ten `<div>` sections under `#claude-paper` each set `data-composition-id`, `data-composition-src`, `data-start`, `data-duration`, and `data-track-index`. Scene sources resolve relative to the project root, for example `compositions/connector-morph.html`.

### Scene composition pattern

Each file under `compositions/` wraps content in a `<template id="…-template">` and registers a paused GSAP timeline on `window.__timelines`. Scene roots declare their own `data-composition-id`, `data-width="1920"`, `data-height="1080"`, and `data-duration`. Fonts are embedded inline via `@font-face` blocks with `font-display: block` and `url(fonts/…woff2)` paths resolved from the project root.

`fonts/fonts.css` provides the canonical `@font-face` catalog for Hanken Grotesk, Newsreader, and Spline Sans Mono. Scene plates duplicate the subsets they need rather than linking `fonts.css` directly.

### Audio and transcript files

| File | Master timeline role | LFS |
| --- | --- | --- |
| `voiceover.mp3` | Scotsman VO at `data-start="29.6"`, duration 2.17s, track 8 | Yes |
| `voiceover_explainer.mp3` | Explainer VO at `data-start="42.6"`, duration 6.41s, track 184 | Yes |
| `transcript.json` | Word-level `{text, start, end}` array for `tesla-rap` karaoke timing | No (plain JSON) |

`transcript.json` holds 18 word entries spanning 0.11s–7.28s for the TSLA explainer rap sequence.

### Generated SFX (not in Git)

`index.html` references three root-level SFX files that are **not** tracked in the repository:

| File | Usage |
| --- | --- |
| `click.mp3` | UI click SFX (10 instances, `data-volume="0.85"`) |
| `toggle.mp3` | HyperFrames toggle at 4.30s (`data-duration="2.67"`) |
| `typenew.mp3` | Keystroke SFX (74 instances, `data-volume="0.2"`) |

The master timeline comment labels these as `SFX:generated`. Place the three MP3 files at the project root before preview or render, or regenerate them through your local SFX pipeline.

## Runtime dependencies

HyperFrames loads scene HTML into the master frame. Each composition pulls GSAP independently:

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
```

`followup-type.html` additionally loads `CustomEase.min.js` from the same CDN. No package manager or local `node_modules` install is required for the composition itself—only the HyperFrames CLI for preview/render.

## Verify installation

<Steps>
<Step title="Confirm LFS smudge">

```bash
file voiceover.mp3 voiceover_explainer.mp3 fonts/HankenGrotesk-normal-400-latin-fe1634.woff2
```

Expected: `MPEG ADTS` or `Audio file` for MP3; `Web Open Font Format` for WOFF2. A 131-byte ASCII text file means LFS pull is incomplete.

</Step>

<Step title="Check SFX presence">

```bash
ls click.mp3 toggle.mp3 typenew.mp3
```

All three must exist at the project root. Missing files produce silent UI interactions during preview and render.

</Step>

<Step title="Open in HyperFrames Studio">

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

Confirm the Studio loads `index.html`, resolves all ten `data-composition-src` paths under `compositions/`, and reports a 53.3s timeline at 1920×1080.

</Step>
</Steps>

### Expected LFS object sizes

When smudged correctly, pointer metadata resolves to these sizes:

| File | LFS size |
| --- | --- |
| `voiceover.mp3` | 153,744 bytes |
| `voiceover_explainer.mp3` | 103,697 bytes |
| `fonts/HankenGrotesk-normal-400-latin-fe1634.woff2` | 34,664 bytes |
| `fonts/GalaxieCopernicus-Book.woff2` | 76,580 bytes |

The repository tracks **26** LFS objects under `claude-paper-launch/` (4 MP3 + 21 WOFF2 + 1 additional font file).

## Position in hyperframes-launches

```text
hyperframes-launches/          # monorepo root
├── .gitattributes             # LFS rules for all launch folders
├── README.md                  # clone + per-project CLI workflow
├── hyperframes-launch/
├── timeline-launch/
├── variables-launch/
└── claude-paper-launch/       # ← this project
    └── index.html             # composition entry point
```

Each subdirectory is an independent HyperFrames composition. Work always starts inside `claude-paper-launch/` so relative paths (`compositions/…`, `fonts/…`, `voiceover.mp3`) resolve correctly.

## Related pages

<CardGroup>
<Card title="Quickstart" href="/quickstart">
Open `index.html` in HyperFrames preview, verify the 53.3s timeline plays, and render to MP4.
</Card>
<Card title="Preview and render" href="/preview-and-render">
Run `hyperframes preview` and `hyperframes render` against this folder and validate 1920×1080 output.
</Card>
<Card title="Fonts and assets" href="/fonts-and-assets">
Self-hosted font inventory, `fonts.css` blocks, and Git LFS binary dependencies.
</Card>
<Card title="Troubleshooting" href="/troubleshooting">
Recovery for missing LFS audio/SFX, `font-display:block` stalls, and timeline registration failures.
</Card>
</CardGroup>