Skip to content

showcase.mdx

Latest commit

 

History

History
262 lines (238 loc) · 11.5 KB

showcase.mdx

File metadata and controls

262 lines (238 loc) · 11.5 KB
title Showcase
description Finished HyperFrames videos you can watch, read, run, and remix.

The README explains what HyperFrames is. This page shows what you can build with it.

Every project below is a real HyperFrames composition with source you can inspect, preview, render, and remix.

Want the production notes, repo structure, and clone options behind these videos? Read Launch Videos. This page is the visual gallery; Launch Videos is the deeper teardown.

Production Launches

<a className="group block overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm transition hover:-translate-y-0.5 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-950" href="https://www.hyperframes.dev/"

<div className="aspect-video w-full bg-zinc-950 p-6 text-white">
  <div className="flex h-full flex-col justify-between">
    <div className="text-sm text-zinc-400">Community playground</div>
    <div>
      <div className="text-3xl font-semibold">Open. Remix. Publish.</div>
      <p className="mt-3 max-w-md text-sm text-zinc-300">
        Use hyperframes.dev to preview community projects, share your own,
        and keep iterating in the browser.
      </p>
    </div>
  </div>
</div>
<div className="p-4">
  <div className="text-xs uppercase tracking-wide text-zinc-500">Playground</div>
  <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">hyperframes.dev</h3>
  <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
    A hosted community surface for previewing, iterating, sharing, and
    rendering HTML-native video projects.
  </p>
  <div className="mt-3 text-sm font-medium text-zinc-950 dark:text-zinc-50">Open playground -></div>
</div>

Go Deeper

Read the production notes, project structure, and Git LFS clone options behind these launches. Open the full collection of HeyGen launch compositions.

Start from a Use Case

If you want to build... Start here Why
A product announcement HyperFrames launch Shows a complete launch narrative with multiple animation runtimes.
A website-to-video product tour Website to HyperFrames Shows captured website footage, agent prompts, captions, VO, and SFX.
A product UI reveal Timeline editor launch Shows mockups, interface closeups, and feature storytelling.
A texture or title-card system Texture launch Shows expressive text treatment and shader-backed motion.
An effects-heavy launch reel VFX x HeyGen combined Shows Three.js, generated media, and HTML-in-canvas in one render.
A starter project Examples Scaffold working templates with npx hyperframes init --example <name>.
A reusable motion part Catalog Add blocks and components to an existing composition.

Run One Locally

These launch projects use Git LFS for video, audio, image, and font assets. Install Git LFS before cloning; otherwise the preview opens with pointer files instead of the real media.

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/website-to-hyperframes

npx hyperframes preview
npx hyperframes render

To skip pulling every launch asset up front, clone first and pull only the project you want to run:

GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes-launches.git
cd hyperframes-launches
git lfs pull --include="website-to-hyperframes/**"
cd website-to-hyperframes

npx hyperframes preview

The launch projects include source HTML, sub-compositions, assets, rendered outputs, and production notes such as STORYBOARD.md, DESIGN.md, and HANDOFF.md where available.

Next Steps

Scaffold remixable templates with `npx hyperframes init --example`. Open shared projects, preview videos, and publish your own. Turn websites into rendered videos with an agent-friendly workflow. Learn the storyboard, script, design, and render loop behind larger videos.