mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
zooqueen
75094e0d60
@hanzo/frame is taken by the hero video primitive — one full-bleed video element — which has held that name on npm since it shipped. This repo is the video toolchain: a CLI, a renderer, a studio, a player. Plural is what it is, so the CLI publishes as @hanzo/frames and the workspace packages follow it (@hanzo/frames-core, @hanzo/frames-engine, and the rest). The binary stays `frames`, and now actually ships. The manifest mapped it to bin/frames.mjs while the file on disk was bin/hyperframes.mjs, so a global install produced no working command. The paths that name a package to fetch were pointing elsewhere. The update check read registry.npmjs.org/frames, a different author's package, and the npm, bun and pnpm installers would have pulled it over the CLI; the render image installed the upstream hyperframes; scaffolded projects and the docs pinned the unscoped name. All of them now name @hanzo/frames.
74 lines
4.5 KiB
Plaintext
74 lines
4.5 KiB
Plaintext
---
|
|
title: "Launch Videos"
|
|
description: "Open-source Frames compositions behind our product launch videos — real production projects you can read, run, and remix."
|
|
---
|
|
|
|
We build our launch videos in Frames. Every composition — including the original Frames announcement, the Timeline Editor reveal, and the Website-to-Video demo — lives in a public repository you can read, run, and remix.
|
|
|
|
<Card title="frames-launches" icon="github" href="https://github.com/hanzoai/frames-launches">
|
|
Open-source Frames compositions behind our product launch videos.
|
|
</Card>
|
|
|
|
Want to browse the finished videos first? Start with the [Showcase](/showcase).
|
|
This page is the deeper production writeup for the same launch projects.
|
|
|
|
## What's in there
|
|
|
|
Each subdirectory is a standalone Frames project — `index.html`, `compositions/`, `assets/`, and a rendered output you can compare against:
|
|
|
|
| Project | What it shows | Source |
|
|
| --- | --- | --- |
|
|
| **Frames launch** | The original announcement video — 49.7 s, glass-frame intro, CSS / GSAP / Lottie / shader / Three.js flex section, full narrative arc. | [`frames-launch/`](https://github.com/hanzoai/frames-launches/tree/main/frames-launch) |
|
|
| **Website → Frames** | Companion to the [website-to-video](/guides/website-to-video) flow — now handled by `/product-launch-video` — captures a site and animates it. | [`website-to-frames/`](https://github.com/hanzoai/frames-launches/tree/main/website-to-frames) |
|
|
| **Timeline Editor launch** | 60 fps reveal video for the Frames Timeline Editor: late-SFX cold open, chat-spiral of fine-tune prompts, editor reveal. | [`timeline-launch/`](https://github.com/hanzoai/frames-launches/tree/main/timeline-launch) |
|
|
| **Texture launch** | Texture-mask text + shader-driven background, used as a launch teaser. | [`texture-launch-video/`](https://github.com/hanzoai/frames-launches/tree/main/texture-launch-video) |
|
|
| **VFX combined** | Multi-act video chaining a VFX text-cursor scene with the iPhone canvas test — useful as a reference for combining two existing projects into one render. | [`vfx-combined/`](https://github.com/hanzoai/frames-launches/tree/main/vfx-combined) |
|
|
|
|
Storyboards (`STORYBOARD.md`), design notes (`DESIGN.md`), and handoff docs (`HANDOFF.md`) sit next to the source so you can see not just the code but the production thinking: VO direction, beat timing, color/style decisions. The structure follows the [Hyperframes pipeline](/guides/pipeline), which documents each artifact in detail.
|
|
|
|
## Why these are useful
|
|
|
|
These aren't toy examples. They're the same compositions we ship in public launch videos, structured the way real production work is structured:
|
|
|
|
- **Multi-composition projects.** Most launches are 4-8 sub-compositions wired into one root timeline — useful when your `npx @hanzo/frames init --example` starter outgrows a single file.
|
|
- **Real adapter mix.** GSAP timelines, Lottie animations, custom shaders, Three.js scenes, and CSS keyframes all coexisting in one render. See how the team [boots multiple adapters](/guides/gsap-animation) inside a single composition.
|
|
- **Production-grade timing.** Voiceover + per-beat SFX + underscore mixed against frame-accurate motion. The storyboards describe the timing decisions; the source shows them executed.
|
|
- **No proprietary plugins.** Everything renders with the same `frames render` you have locally — there's no internal-only branch of the engine.
|
|
|
|
## Cloning
|
|
|
|
The repo uses Git LFS for video, audio, image, and font assets:
|
|
|
|
```bash Terminal
|
|
brew install git-lfs # macOS — or your platform's git-lfs install
|
|
git lfs install
|
|
git clone https://github.com/hanzoai/frames-launches.git
|
|
cd frames-launches/frames-launch
|
|
frames preview # opens the studio for that launch
|
|
```
|
|
|
|
To clone just the source (skip large LFS assets and pull on demand):
|
|
|
|
```bash Terminal
|
|
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/hanzoai/frames-launches.git
|
|
cd frames-launches
|
|
git lfs pull --include="frames-launch/assets/*"
|
|
```
|
|
|
|
## Next steps
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Examples" icon="layer-group" href="/examples">
|
|
Starter templates — what `npx @hanzo/frames init --example` gives you.
|
|
</Card>
|
|
<Card title="Compositions" icon="diagram-project" href="/concepts/compositions">
|
|
The composition data model these launches build on.
|
|
</Card>
|
|
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
|
|
Timeline patterns these projects use.
|
|
</Card>
|
|
<Card title="Adopters" icon="users" href="/community/adopters">
|
|
Other organizations shipping with Frames.
|
|
</Card>
|
|
</CardGroup>
|