# Fonts and assets

> Self-hosted Hanken Grotesk, Spline Sans Mono, Newsreader, and Galaxie Copernicus woff2 files, fonts.css @font-face blocks, and Git LFS binary dependencies.

- 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

- `fonts/fonts.css`
- `fonts/HankenGrotesk-normal-400-latin-fe1634.woff2`
- `fonts/SplineSansMono-normal-500-latin-53329b.woff2`
- `fonts/Newsreader-normal-500-latin-f0c28d.woff2`
- `fonts/GalaxieCopernicus-Book.woff2`
- `compositions/connector-morph.html`
- `voiceover.mp3`

---

---
title: "Fonts and assets"
description: "Self-hosted Hanken Grotesk, Spline Sans Mono, Newsreader, and Galaxie Copernicus woff2 files, fonts.css @font-face blocks, and Git LFS binary dependencies."
---

The `claude-paper-launch/` folder ships all typography as self-hosted `.woff2` binaries under `fonts/`, with `@font-face` rules either centralized in `fonts/fonts.css` or duplicated inline inside each scene composition. Voiceover MP3s and every font file are stored through Git LFS at the repository root; HTML, CSS, and JSON remain plain text.

## Asset layout

```text
claude-paper-launch/
├── fonts/
│   ├── fonts.css                          # canonical @font-face bundle (22 blocks)
│   ├── HankenGrotesk-normal-*-latin*.woff2   # 8 files (400–700 × latin/latin-ext)
│   ├── Newsreader-*-latin*.woff2             # 10 files (normal + italic subsets)
│   ├── SplineSansMono-normal-*-latin*.woff2  # 4 files (400/500 × latin/latin-ext)
│   └── GalaxieCopernicus-Book.woff2          # 1 file (serif display)
├── voiceover.mp3                          # Scotsman VO (LFS)
├── voiceover_explainer.mp3                # explainer VO (LFS)
├── ElevenLabs_…Scotsman….mp3              # ElevenLabs source take (LFS)
├── transcript.json                        # word-level timing (text)
├── index.html                             # master composition; audio refs at project root
└── compositions/*.html                    # per-scene inline @font-face + CSS vars
```

`index.html` does not load `fonts/fonts.css` or declare `@font-face` blocks. Typography resolves inside each loaded scene plate. Audio elements in `index.html` reference `voiceover.mp3`, `voiceover_explainer.mp3`, and generated SFX files (`click.mp3`, `toggle.mp3`, `typenew.mp3`) at the project root.

## Font families and design roles

| Family | CSS `font-family` | Weights in repo | Primary role |
| --- | --- | --- | --- |
| Hanken Grotesk | `'Hanken Grotesk'` | 400, 500, 600, 700 | UI body, headings, hero claims (`--f-body`) |
| Spline Sans Mono | `'Spline Sans Mono'` | 400, 500 | Labels, chips, uppercase chrome (`--f-mono`) |
| Newsreader | `'Newsreader'` | 400, 500, 600 (normal + italic) | Claude response serif (`--f-serif` fallback) |
| Galaxie Copernicus | `'Galaxie Copernicus'` | 400–600 (variable range) | Oversized thinking/claim serif (`--f-serif` primary) |

`FRAME-claude.md` names Hanken Grotesk for display and body ramps and Spline Sans Mono for label/mono chrome. Scene plates map those tokens to CSS custom properties:

| Variable | Typical stack |
| --- | --- |
| `--f-body` | `"Hanken Grotesk","Inter",system-ui,sans-serif` |
| `--f-mono` | `"Spline Sans Mono","IBM Plex Mono",monospace` |
| `--f-serif` | `"Galaxie Copernicus","Newsreader",Georgia,serif` or `"Newsreader",Georgia,serif` |

Galaxie Copernicus appears only in `sure-response`, `thinking-big`, `thinking-big-2`, and `compose-tasklist`. Other serif-heavy scenes (`chat-response`, `response-scroll`, `followup-type`) use Newsreader alone.

## `fonts/fonts.css` canonical bundle

`fonts/fonts.css` contains **22** `@font-face` blocks covering Hanken Grotesk, Newsreader, and Spline Sans Mono. It does **not** include Galaxie Copernicus—that face is declared only in the four compositions that need it.

Every block in the bundle follows the same contract:

- `font-display: block` — text stays invisible until the face loads (no fallback flash during render).
- `format('woff2')` — single compressed binary per subset.
- `unicode-range` — paired **latin** and **latin-ext** slices per weight/style so the browser downloads only the glyph range needed.

Paths are rooted from the project folder: `url(fonts/HankenGrotesk-normal-400-latin-fe1634.woff2)`. If you link `fonts/fonts.css` from `index.html`, place the `<link>` at the project root so relative URLs resolve correctly.

<Note>
No file in the scoped folder currently references `fonts/fonts.css`. The stylesheet is the authoritative copy-paste source when authoring or updating scene-level `@font-face` blocks.
</Note>

### Hanken Grotesk subsets

| Weight | Latin file | Latin-ext file |
| --- | --- | --- |
| 400 | `HankenGrotesk-normal-400-latin-fe1634.woff2` | `HankenGrotesk-normal-400-latin-ext-d9a6a0.woff2` |
| 500 | `HankenGrotesk-normal-500-latin-fe1634.woff2` | `HankenGrotesk-normal-500-latin-ext-d9a6a0.woff2` |
| 600 | `HankenGrotesk-normal-600-latin-fe1634.woff2` | `HankenGrotesk-normal-600-latin-ext-d9a6a0.woff2` |
| 700 | `HankenGrotesk-normal-700-latin-fe1634.woff2` | `HankenGrotesk-normal-700-latin-ext-d9a6a0.woff2` |

### Newsreader subsets

| Style | Weight | Latin | Latin-ext |
| --- | --- | --- | --- |
| normal | 400 | `Newsreader-normal-400-latin-f0c28d.woff2` | `Newsreader-normal-400-latin-ext-7a09be.woff2` |
| normal | 500 | `Newsreader-normal-500-latin-f0c28d.woff2` | `Newsreader-normal-500-latin-ext-7a09be.woff2` |
| normal | 600 | `Newsreader-normal-600-latin-f0c28d.woff2` | `Newsreader-normal-600-latin-ext-7a09be.woff2` |
| italic | 400 | `Newsreader-italic-400-latin-78bd98.woff2` | `Newsreader-italic-400-latin-ext-e36b6b.woff2` |
| italic | 500 | `Newsreader-italic-500-latin-78bd98.woff2` | `Newsreader-italic-500-latin-ext-e36b6b.woff2` |

### Spline Sans Mono subsets

| Weight | Latin | Latin-ext |
| --- | --- | --- |
| 400 | `SplineSansMono-normal-400-latin-53329b.woff2` | `SplineSansMono-normal-400-latin-ext-62a811.woff2` |
| 500 | `SplineSansMono-normal-500-latin-53329b.woff2` | `SplineSansMono-normal-500-latin-ext-62a811.woff2` |

### Galaxie Copernicus

Single file: `fonts/GalaxieCopernicus-Book.woff2`. Scene plates declare one block with a variable weight range:

```css
@font-face {
  font-family: 'Galaxie Copernicus';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url(fonts/GalaxieCopernicus-Book.woff2) format('woff2');
}
```

## Scene-level font embedding

Each composition under `compositions/` inlines the `@font-face` blocks its markup needs inside the root `<style>` tag. HyperFrames resolves `url(fonts/…)` relative to the `claude-paper-launch/` project root when the plate loads.

```mermaid
flowchart LR
  subgraph root["claude-paper-launch/"]
    IDX[index.html]
    FONTS["fonts/*.woff2"]
  end
  subgraph scenes["compositions/"]
    CM[connector-morph.html]
    SR[sure-response.html]
    OU[outro.html]
  end
  IDX -->|data-composition-src| CM
  IDX -->|data-composition-src| SR
  IDX -->|data-composition-src| OU
  CM -->|inline @font-face url fonts/…| FONTS
  SR -->|inline @font-face url fonts/…| FONTS
  OU -->|latin-only Hanken subset| FONTS
```

### Embedding tiers

| Tier | Compositions | `@font-face` count | Notes |
| --- | --- | --- | --- |
| Full UI stack | `connector-morph`, `chat-response`, `followup-type`, `response-scroll`, `compose-ui`, `tesla-rap` | 22 | Matches `fonts/fonts.css` |
| Full + Galaxie | `thinking-big`, `thinking-big-2` | 23 | Adds Galaxie Copernicus |
| Tasklist subset | `compose-tasklist` | 10 | Hanken 400/500/700, Spline 500, Newsreader 500, Galaxie |
| Sure-response subset | `sure-response` | 5 | Newsreader 400/500 + Galaxie only |
| Outro minimal | `outro` | 3 | Hanken 400/500/700 latin only |

`connector-morph.html` documents the pattern explicitly with a `/* local fonts (captured woff2, font-display:block) */` comment and the full three-family stack before setting `--f-body` and `--f-mono` on the scene root.

## Font loading lifecycle

All `@font-face` rules use `font-display: block`. Scene scripts gate GSAP timeline construction on font readiness:

```javascript
if (document.fonts && document.fonts.ready) {
  try { await document.fonts.ready; } catch (e) {}
}
```

This pattern appears in `connector-morph`, `chat-response`, `compose-ui`, `compose-tasklist`, `sure-response`, `outro`, and other plates. Combined with `font-display: block`, missing or slow font binaries stall visible text until load completes—or indefinitely if LFS assets were not pulled.

<Warning>
`font-display: block` plus `document.fonts.ready` means a missing `.woff2` pointer file (unpulled LFS) can freeze a scene on blank text. Pull LFS objects before preview or render.
</Warning>

## Git LFS binary dependencies

The repository root `.gitattributes` routes `*.woff2`, `*.woff`, `*.ttf`, `*.otf`, and `*.mp3` through Git LFS. HTML, CSS, JS, JSON, and Markdown stay as normal text.

### LFS-tracked files in `claude-paper-launch/`

| Category | Files | Count |
| --- | --- | --- |
| Fonts | All 23 `fonts/*.woff2` | 23 |
| Voiceover | `voiceover.mp3`, `voiceover_explainer.mp3` | 2 |
| Source audio | `ElevenLabs_2026-06-05T10_14_44_Scotsman_gen_sp100_s50_sb75_v3 (1).mp3` | 1 |

**26** LFS objects are registered under `claude-paper-launch/` in a full clone with LFS smudge enabled.

### Pull workflow

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

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

</Step>
<Step title="Fetch scoped binaries">

From the repository root:

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

</Step>
<Step title="Verify font binaries">

```bash
file claude-paper-launch/fonts/HankenGrotesk-normal-400-latin-fe1634.woff2
# expect: Web Open Font Format (Version 2), not "ASCII text"
```

A 130-byte `ASCII text` file is an LFS pointer, not the font.

</Step>
</Steps>

If you cloned with `GIT_LFS_SKIP_SMUDGE=1`, run `git lfs pull` before `hyperframes preview` or `hyperframes render`.

### Referenced but untracked SFX

`index.html` references `click.mp3`, `toggle.mp3`, and `typenew.mp3` at the project root (comment: `SFX:generated`). These files are **not** in the current git index for `claude-paper-launch/`. They would match the `*.mp3` LFS rule if added. Until they exist locally, click and keystroke SFX cues in the master timeline will not play.

## Audio assets at project root

| File | LFS | Used by | Role |
| --- | --- | --- | --- |
| `voiceover.mp3` | yes | `index.html` `#vo` | Scotsman VO @ 29.6s |
| `voiceover_explainer.mp3` | yes | `index.html` `#vo-explainer` | Neutral explainer VO @ 42.6s |
| `ElevenLabs_…Scotsman….mp3` | yes | — | ElevenLabs source take (not wired in `index.html`) |
| `transcript.json` | no | timing reference | Word-level transcript |
| `click.mp3`, `toggle.mp3`, `typenew.mp3` | would be LFS | `index.html` SFX elements | Generated SFX inventory (not committed) |

## Authoring a new scene plate

When adding or editing a composition:

1. Copy the `@font-face` blocks your plate needs from `fonts/fonts.css` (plus Galaxie if using `--f-serif` with Copernicus).
2. Trim unused weights to keep the plate lean—follow `outro.html` (latin-only Hanken) or `compose-tasklist.html` (partial stack) as precedents.
3. Set `--f-body`, `--f-mono`, and `--f-serif` on the scene root to match `FRAME-claude.md` stacks.
4. Keep `url(fonts/…)` paths unchanged; do not prefix with `../`.
5. Await `document.fonts.ready` before building the paused GSAP timeline.
6. Commit any new `.woff2` files—LFS picks them up automatically via root `.gitattributes`.

## Verification checklist

| Check | Pass signal |
| --- | --- |
| LFS smudge | `file fonts/*.woff2` reports Web Open Font Format |
| Scene load | Preview shows correct Hanken/Newsreader/Spline/Galaxie shapes per plate |
| Serif handoff | `sure-response` renders Galaxie-weighted “Sure.” at 38.8s |
| Font gate | No flash of system-ui fallback before scene animation starts |
| VO playback | `voiceover.mp3` and `voiceover_explainer.mp3` play at 29.6s and 42.6s |

## Related pages

<CardGroup>
<Card title="Installation" href="/installation">
Git LFS setup, HyperFrames CLI prerequisites, and scoped folder layout.
</Card>
<Card title="Claude Paper design system" href="/claude-paper-design-system">
Typography ramps and font-family tokens from FRAME-claude.md.
</Card>
<Card title="Author a scene composition" href="/author-scene-composition">
Embed local fonts, set CSS variables, and register paused GSAP timelines.
</Card>
<Card title="Audio track reference" href="/audio-track-reference">
Voiceover timing, SFX inventory, and transcript.json word marks.
</Card>
<Card title="Troubleshooting" href="/troubleshooting">
Recovery for missing LFS assets and font-display:block loading stalls.
</Card>
</CardGroup>