Agent-readable docs

Claude Paper Launch Documentation

Reference for the HyperFrames MCP launch video: a 53.3s GSAP-orchestrated composition with ten scene plates, Claude Paper design tokens, synchronized audio/SFX, and self-hosted fonts.

Pages

  1. OverviewWhat the Claude Paper launch video demonstrates, its 1920×1080 runtime envelope, primary entry points, and the shortest path to preview the full cut.
  2. InstallationPrerequisites for opening and rendering the project: Git LFS for binary assets, HyperFrames CLI, and the scoped folder layout under hyperframes-launches.
  3. QuickstartFirst successful invocation: open index.html in HyperFrames preview, verify the 53.3s timeline plays, and render to MP4.
  4. HyperFrames composition modelHow root and scene compositions register timelines via window.__timelines, data-composition-id attributes, template wrappers, and GSAP paused timelines.
  5. Claude Paper design systemThe four brand atoms (paper, ink, muted, clay), typography ramps, component tokens, and frame-scale authoring rules defined in FRAME-claude.md.
  6. Frame treatmentsSeven normative frame plates—Paper Identity, Oversized Claim, Karaoke Stage, Focal Artifact, Quiet Ledger, Palette Catalog, Pull-Quote Closer—and their density, accent, and anchor constraints.
  7. Transition grammarCross-section seam types used in the master cut: hard cuts, opacity crossfades, inverse zoom-through, and leftward cut-the-curve with velocity-matched handoffs.
  8. Preview and renderRun hyperframes preview and hyperframes render against the claude-paper-launch folder, confirm 1920×1080 output, and validate scene loading from compositions/.
  9. Edit the master timelineModify the root GSAP timeline in index.html: adjust section data-start/duration, z-index stacking, seam cut times (CUT, CUT2–CUT6), and window.__timelines registration.
  10. Author a scene compositionCreate or edit a compositions/*.html plate: wrap in a template, set data-composition-id and data-duration, embed local fonts, build a paused GSAP timeline, and register on window.__timelines.
  11. Sync audio and SFXWire voiceover, explainer VO, click/toggle/type SFX tracks using data-start, data-duration, data-track-index, and data-volume on audio elements in index.html.
  12. Master composition referenceRoot claude-paper composition: 1920×1080, 53.3s duration, ten stacked sections with z-index order, data-composition-src paths, and track-index assignments.
  13. Scene catalogAll scene compositions with ids, durations, narrative roles, and handoff constraints—from connector-morph through outro, plus the standalone tesla-rap explainer plate.
  14. Design tokens referenceCanonical color hexes, typography ramps (reading and hero), spacing, rounded radii, motion easings, shadow recipes, and component frontmatter keys from FRAME-claude.md.
  15. Audio track referenceVoiceover tracks (Scotsman VO at 29.6s, explainer VO at 42.6s), generated SFX inventory (click, toggle, typenew), volumes, and word-level transcript.json timing.
  16. Fonts and assetsSelf-hosted Hanken Grotesk, Spline Sans Mono, Newsreader, and Galaxie Copernicus woff2 files, fonts.css @font-face blocks, and Git LFS binary dependencies.
  17. TroubleshootingRecovery for missing LFS audio/SFX, font-display:block loading stalls, seam misalignment between consecutive scenes, and timeline registration failures.

Complete Markdown

The complete agent-readable Markdown files are published separately from this HTML page.