chore: import upstream snapshot with attribution

2026-07-13 12:58:35 +08:00
commit 85453da49f
4031 changed files with 710987 additions and 0 deletions
@@ -0,0 +1,262 @@
+---
+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](/launch-videos). This page is the visual gallery; Launch
+Videos is the deeper teardown.
+
+## Production Launches
+
+<div className="not-prose grid grid-cols-1 md:grid-cols-2 gap-5 my-8">
+  <div
+    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"
+  >
+    <video
+      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
+      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-preview.mp4"
+      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/hyperframes-launch-poster.jpg"
+      controls
+      muted
+      loop
+      playsInline
+      preload="metadata"
+    />
+    <div className="p-4">
+      <div className="text-xs uppercase tracking-wide text-zinc-500">Product launch</div>
+      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">HyperFrames launch video</h3>
+      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+        A full announcement video with CSS, GSAP, Lottie, shader transitions, Three.js,
+        footage compositing, captions, voiceover, and SFX.
+      </p>
+      <a
+        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
+        href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch"
+      >
+        View source ->
+      </a>
+    </div>
+  </div>
+
+  <div
+    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"
+  >
+    <video
+      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
+      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-preview.mp4"
+      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/website-to-hyperframes-poster.jpg"
+      controls
+      muted
+      loop
+      playsInline
+      preload="metadata"
+    />
+    <div className="p-4">
+      <div className="text-xs uppercase tracking-wide text-zinc-500">Website to video</div>
+      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Website to HyperFrames demo</h3>
+      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+        A 41.8-second launch video showing AI agents turning websites into product
+        promos, social ads, feature showcases, and brand reels.
+      </p>
+      <a
+        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
+        href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes"
+      >
+        View source ->
+      </a>
+    </div>
+  </div>
+
+  <div
+    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"
+  >
+    <video
+      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
+      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/timeline-editor-preview.mp4"
+      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/timeline-editor-poster.jpg"
+      controls
+      muted
+      loop
+      playsInline
+      preload="metadata"
+    />
+    <div className="p-4">
+      <div className="text-xs uppercase tracking-wide text-zinc-500">Product reveal</div>
+      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Timeline editor launch</h3>
+      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+        A launch reveal with UI mockups, voiceover, SFX, prompt-driven iteration,
+        and a narrative arc around fine-tuning rendered video.
+      </p>
+      <a
+        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
+        href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch"
+      >
+        View source ->
+      </a>
+    </div>
+  </div>
+
+  <div
+    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"
+  >
+    <video
+      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
+      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/texture-launch-preview.mp4"
+      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/texture-launch-poster.jpg"
+      controls
+      muted
+      loop
+      playsInline
+      preload="metadata"
+    />
+    <div className="p-4">
+      <div className="text-xs uppercase tracking-wide text-zinc-500">Title system</div>
+      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">Texture launch</h3>
+      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+        Texture-mask typography, shader backgrounds, and transition-heavy title
+        design built as a full HyperFrames composition.
+      </p>
+      <a
+        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
+        href="https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video"
+      >
+        View source ->
+      </a>
+    </div>
+  </div>
+
+  <div
+    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"
+  >
+    <video
+      className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900"
+      src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/vfx-heygen-preview.mp4"
+      poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/vfx-heygen-poster.jpg"
+      controls
+      muted
+      loop
+      playsInline
+      preload="metadata"
+    />
+    <div className="p-4">
+      <div className="text-xs uppercase tracking-wide text-zinc-500">VFX system</div>
+      <h3 className="mt-1 text-lg font-semibold text-zinc-950 dark:text-zinc-50">VFX x HeyGen combined</h3>
+      <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-300">
+        A rendered effects reel combining Three.js, HTML-in-canvas, generated
+        media, text animation, and product UI beats.
+      </p>
+      <a
+        className="mt-3 block text-sm font-medium text-zinc-950 dark:text-zinc-50"
+        href="https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-combined"
+      >
+        View source ->
+      </a>
+    </div>
+  </div>
+
+  <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>
+  </a>
+</div>
+
+## Go Deeper
+
+<CardGroup cols={2}>
+  <Card title="Launch Videos" icon="rocket" href="/launch-videos">
+    Read the production notes, project structure, and Git LFS clone options behind
+    these launches.
+  </Card>
+  <Card title="Source Repository" icon="github" href="https://github.com/heygen-com/hyperframes-launches">
+    Open the full collection of HeyGen launch compositions.
+  </Card>
+</CardGroup>
+
+## Start from a Use Case
+
+| If you want to build... | Start here | Why |
+| --- | --- | --- |
+| A product announcement | [HyperFrames launch](https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch) | Shows a complete launch narrative with multiple animation runtimes. |
+| A website-to-video product tour | [Website to HyperFrames](https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes) | Shows captured website footage, agent prompts, captions, VO, and SFX. |
+| A product UI reveal | [Timeline editor launch](https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch) | Shows mockups, interface closeups, and feature storytelling. |
+| A texture or title-card system | [Texture launch](https://github.com/heygen-com/hyperframes-launches/tree/main/texture-launch-video) | Shows expressive text treatment and shader-backed motion. |
+| An effects-heavy launch reel | [VFX x HeyGen combined](https://github.com/heygen-com/hyperframes-launches/tree/main/vfx-heygen-combined) | Shows Three.js, generated media, and HTML-in-canvas in one render. |
+| A starter project | [Examples](/examples) | Scaffold working templates with `npx hyperframes init --example <name>`. |
+| A reusable motion part | [Catalog](/catalog/blocks/data-chart) | 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.
+
+```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/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:
+
+```bash Terminal
+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
+
+<CardGroup cols={2}>
+  <Card title="Starter Examples" icon="layer-group" href="/examples">
+    Scaffold remixable templates with `npx hyperframes init --example`.
+  </Card>
+  <Card title="Community Playground" icon="play" href="https://www.hyperframes.dev/">
+    Open shared projects, preview videos, and publish your own.
+  </Card>
+  <Card title="Website to Video" icon="globe" href="/guides/website-to-video">
+    Turn websites into rendered videos with an agent-friendly workflow.
+  </Card>
+  <Card title="Pipeline Guide" icon="diagram-project" href="/guides/pipeline">
+    Learn the storyboard, script, design, and render loop behind larger videos.
+  </Card>
+</CardGroup>