diff --git a/docs/community/adopters.mdx b/docs/community/adopters.mdx index 4d7e42caa..7349ded1e 100644 --- a/docs/community/adopters.mdx +++ b/docs/community/adopters.mdx @@ -28,6 +28,8 @@ If you'd rather not be listed publicly, we'd still love to hear about your usage | -------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------ | | [HeyGen](https://www.heygen.com) | [@jrusso1020](https://github.com/jrusso1020) | Powers AI-generated video composition and rendering across HeyGen's video product surface. | +The HeyGen team's actual launch-video sources (the ones featured in product announcements) live at [hyperframes-launches](https://github.com/heygen-com/hyperframes-launches) — see [Launch Videos](/launch-videos) for the writeup. + ## Evaluating _Open a PR to add your organization here if you're trying HyperFrames in a non-production context._ diff --git a/docs/docs.json b/docs/docs.json index 025e5600b..a09d9a242 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -54,7 +54,8 @@ "pages": [ "introduction", "quickstart", - "examples" + "examples", + "launch-videos" ] }, { diff --git a/docs/examples.mdx b/docs/examples.mdx index 06ffcbe99..d1d61791d 100644 --- a/docs/examples.mdx +++ b/docs/examples.mdx @@ -258,13 +258,13 @@ npx hyperframes lint Create, preview, and render your first video + + Real production projects from HeyGen's launches — open-source for you to read and remix. + Add animations to your example Understand the composition data model - - Render your composition to MP4 - diff --git a/docs/launch-videos.mdx b/docs/launch-videos.mdx new file mode 100644 index 000000000..153d0c510 --- /dev/null +++ b/docs/launch-videos.mdx @@ -0,0 +1,70 @@ +--- +title: "Launch Videos" +description: "Open-source HyperFrames compositions behind HeyGen's product launch videos — real production projects you can read, run, and remix." +--- + +The HeyGen team builds its launch videos in HyperFrames. Every composition — including the original HyperFrames announcement, the Timeline Editor reveal, and the Website-to-Video demo — lives in a public repository you can read, run, and remix. + + + Open-source HyperFrames compositions behind HeyGen's product launch videos. + + +## What's in there + +Each subdirectory is a standalone HyperFrames project — `index.html`, `compositions/`, `assets/`, and a rendered output you can compare against: + +| Project | What it shows | Source | +| --- | --- | --- | +| **HyperFrames launch** | The original announcement video — 49.7 s, glass-frame intro, CSS / GSAP / Lottie / shader / Three.js flex section, full narrative arc. | [`hyperframes-launch/`](https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch) | +| **Website → HyperFrames** | Companion to the [website-to-video](/guides/website-to-video) workflow — captures a site and animates it. | [`website-to-hyperframes/`](https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes) | +| **Timeline Editor launch** | 60 fps reveal video for the HyperFrames Timeline Editor: late-SFX cold open, chat-spiral of fine-tune prompts, editor reveal. | [`timeline-launch/`](https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch) | +| **Texture launch** | Texture-mask text + shader-driven background, used as a launch teaser. | [`texture-launch-video/`](https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video) | +| **VFX × HeyGen combined** | Multi-act video chaining a VFX text-cursor scene with the HeyGen iPhone canvas test — useful as a reference for combining two existing projects into one render. | [`vfx-heygen-combined/`](https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-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. + +## Why these are useful + +These aren't toy examples. They're the same compositions HeyGen ships 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 hyperframes 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.** ElevenLabs VO + 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 `hyperframes 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/heygen-com/hyperframes-launches.git +cd hyperframes-launches/hyperframes-launch +hyperframes 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/heygen-com/hyperframes-launches.git +cd hyperframes-launches +git lfs pull --include="hyperframes-launch/assets/*" +``` + +## Next steps + + + + Starter templates — what `npx hyperframes init --example` gives you. + + + The composition data model these launches build on. + + + Timeline patterns these projects use. + + + Other organizations shipping with HyperFrames. + +