mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
fix(docs): restore examples with the HyperFrames Player (#4675)
* fix(docs): restore visible example video cards * fix(docs): use catalog player for example films * fix(docs): fit player posters before playback * fix(docs): preserve the original examples grid
This commit is contained in:
Miguel Ángel
+58
-58
@@ -5,7 +5,7 @@ description: "Watch finished HyperFrames videos, inspect real production project
|
||||
|
||||
import { DocsVideo } from "/snippets/docs-video.jsx";
|
||||
import { ReplicaCompare } from "/snippets/replica-compare.jsx";
|
||||
import { HoverVideo } from "/snippets/hover-video.jsx";
|
||||
import { ExamplePlayer } from "/snippets/example-player.jsx";
|
||||
|
||||
## What HyperFrames can make
|
||||
|
||||
@@ -17,23 +17,23 @@ A whole product cut into a launch film — its own screens, type and colour.
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1.jpg" />
|
||||
<ExamplePlayer title="HeyGen × Stripe" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-HF-heygen-stripe-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">HeyGen × Stripe</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Product launch, 4K · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">HyperFrames launch</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">The framework's own launch · source included</span></div>
|
||||
</a>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-website-to-hyperframes-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-website-to-hyperframes-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Website → video</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A live site becomes a promo · source included</span></div>
|
||||
</a>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/spacex-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">SpaceX explainer</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Data and motion at scale · source included</span></div>
|
||||
</a>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1.jpg" />
|
||||
<ExamplePlayer title="HyperFrames launch" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-hyperframes-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/hyperframes-launch">HyperFrames launch</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">The framework's own launch · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Website → 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/launch-website-to-hyperframes-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-website-to-hyperframes-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/website-to-hyperframes">Website → video</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A live site becomes a promo · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="SpaceX explainer" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-spacex-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/spacex-launch">SpaceX explainer</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Data and motion at scale · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="K3 promo" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-k3-promo-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">K3 promo</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Short product spot · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,29 +44,29 @@ Each film is HyperFrames demonstrating one of its own features.
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1.jpg" />
|
||||
<ExamplePlayer title="Agent skills" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-skills-launch-video-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Agent skills</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">The skill system · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1.jpg" />
|
||||
<ExamplePlayer title="Keyframes" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-keyframes-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Keyframes</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Seek-safe animation · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Timeline editor</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Studio timeline · source included</span></div>
|
||||
</a>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/inspector-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Studio inspector</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Editing on the canvas · source included</span></div>
|
||||
</a>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/variables-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Variables</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">One composition, many versions · source included</span></div>
|
||||
</a>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/cloud-render-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Cloud rendering</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Render on HeyGen's cloud · source included</span></div>
|
||||
</a>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Timeline editor" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-timeline-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/timeline-launch">Timeline editor</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Studio timeline · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Studio inspector" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-inspector-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/inspector-launch">Studio inspector</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Editing on the canvas · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Variables" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-variables-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/variables-launch">Variables</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">One composition, many versions · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Cloud rendering" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-cloud-render-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/cloud-render-launch">Cloud rendering</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Render on HeyGen's cloud · source included</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Motion, sound & effects
|
||||
@@ -75,21 +75,21 @@ Motion is the message — kinetic type, beat-synced cuts, texture and VFX.
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1.jpg" />
|
||||
<ExamplePlayer title="Texture launch" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-texture-launch-video-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Texture launch</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Motion design · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1.jpg" />
|
||||
<ExamplePlayer title="VFX reel" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-vfx-heygen-combined-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">VFX reel</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Shaders and effects · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-music-to-video-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-music-to-video-launch-v1.jpg" />
|
||||
<ExamplePlayer title="Music to 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/launch-music-to-video-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-music-to-video-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Music to video</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Cuts synced to a track · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/sfx-music-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Sound & music</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">SFX and music with the CLI · source included</span></div>
|
||||
</a>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Sound & music" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-sfx-music-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/sfx-music-launch">Sound & music</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">SFX and music with the CLI · source included</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Workflows & integrations
|
||||
@@ -97,43 +97,43 @@ Motion is the message — kinetic type, beat-synced cuts, texture and VFX.
|
||||
A PR, a Figma file, a design brief — turned into a finished film.
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/pr-to-video-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-pr-to-video-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-pr-to-video-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">PR to video</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A GitHub PR as a reveal · source included</span></div>
|
||||
</a>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/figma-launch">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Figma → HyperFrames</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A design brought to motion · source included</span></div>
|
||||
</a>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1.jpg" />
|
||||
<ExamplePlayer title="PR to 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/launch-pr-to-video-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-pr-to-video-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/pr-to-video-launch">PR to video</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A GitHub PR as a reveal · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Figma → HyperFrames" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-figma-launch-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/figma-launch">Figma → HyperFrames</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">A design brought to motion · source included</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="Claude Design" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-claude-design-hyperframes-video-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Claude Design</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">From a design draft · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<a className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950" href="https://github.com/heygen-com/hyperframes-launches/tree/main/frame-md-launch-storyboard">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">FRAME.md storyboard</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Brief-driven direction · source included</span></div>
|
||||
</a>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<ExamplePlayer title="FRAME.md storyboard" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-frame-md-launch-storyboard-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm"><a href="https://github.com/heygen-com/hyperframes-launches/tree/main/frame-md-launch-storyboard">FRAME.md storyboard</a></strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Brief-driven direction · source included</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Where HyperFrames plugs in
|
||||
|
||||
The same engine, reached from the tools teams already use. Hover any card to hear it.
|
||||
The same engine, reached from the tools teams already use. Use the player controls to watch and listen.
|
||||
|
||||
<div className="not-prose grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-6">
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-codex-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-codex-v1.jpg" />
|
||||
<ExamplePlayer title="Codex plugin" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-codex-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-codex-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Codex plugin</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">HyperFrames inside Codex · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-vercel-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-vercel-v1.jpg" />
|
||||
<ExamplePlayer title="Vercel" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-vercel-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-vercel-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Vercel</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Deploy from a template · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-ollama-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-ollama-v1.jpg" />
|
||||
<ExamplePlayer title="Open models (Ollama)" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-ollama-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-ollama-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Open models (Ollama)</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Build with local models · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
<div className="group overflow-hidden rounded-xl border border-zinc-200 bg-white text-inherit no-underline dark:border-zinc-800 dark:bg-zinc-950">
|
||||
<HoverVideo className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-community-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-community-v1.jpg" />
|
||||
<ExamplePlayer title="Community · hyperframes.dev" className="aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-community-v1-s.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/launch-integration-community-v1.jpg" />
|
||||
<div className="p-4"><strong className="block text-sm">Community · hyperframes.dev</strong><span className="mt-1 block text-xs text-zinc-500 dark:text-zinc-400">Publish and remix · 100% HyperFrames</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
export const ExamplePlayer = ({ src, poster, title, className }) => {
|
||||
// Keep this bootstrap self-contained: Mintlify evaluates snippet exports only.
|
||||
const mount = (source, image) => {
|
||||
const fallback = document.createElement("video");
|
||||
fallback.controls = true;
|
||||
fallback.playsInline = true;
|
||||
fallback.preload = "metadata";
|
||||
fallback.poster = image || "";
|
||||
fallback.style.cssText = "display:block;width:100%;height:100%;object-fit:contain";
|
||||
document.body.appendChild(fallback);
|
||||
const upgrade = () => {
|
||||
if (!customElements.get("hyperframes-player") || !Number.isFinite(fallback.duration)) return;
|
||||
const width = fallback.videoWidth || 1920;
|
||||
const height = fallback.videoHeight || 1080;
|
||||
const composition = document.createElement("div");
|
||||
composition.setAttribute("data-composition-id", "example-film");
|
||||
composition.setAttribute("data-width", String(width));
|
||||
composition.setAttribute("data-height", String(height));
|
||||
composition.setAttribute("data-duration", String(fallback.duration));
|
||||
const clip = document.createElement("video");
|
||||
clip.src = source;
|
||||
clip.className = "clip";
|
||||
clip.setAttribute("data-start", "0");
|
||||
clip.setAttribute("data-duration", String(fallback.duration));
|
||||
clip.setAttribute("playsinline", "");
|
||||
clip.style.cssText = "width:100%;height:100%;object-fit:contain";
|
||||
composition.appendChild(clip);
|
||||
const player = document.createElement("hyperframes-player");
|
||||
// Fit posters in published player builds that predate the sizing fix.
|
||||
const posterStyle = document.createElement("style");
|
||||
posterStyle.textContent = ".hfp-poster{width:100%;height:100%}";
|
||||
player.shadowRoot.appendChild(posterStyle);
|
||||
player.setAttribute("controls", "");
|
||||
player.setAttribute("low-power-idle", "");
|
||||
player.setAttribute("width", String(width));
|
||||
player.setAttribute("height", String(height));
|
||||
if (image) player.setAttribute("poster", image);
|
||||
player.style.cssText = "position:absolute;inset:0;width:100%;height:100%;visibility:hidden";
|
||||
player.setAttribute("srcdoc", "<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%}body>div{width:100%;height:100%}</style></head><body>" + composition.outerHTML + "</body></html>");
|
||||
player.addEventListener("ready", () => {
|
||||
const resume = !fallback.paused;
|
||||
player.seek(fallback.currentTime);
|
||||
player.muted = fallback.muted;
|
||||
player.volume = fallback.volume;
|
||||
fallback.pause();
|
||||
fallback.removeAttribute("src");
|
||||
fallback.load();
|
||||
fallback.remove();
|
||||
player.style.visibility = "visible";
|
||||
if (resume) player.play();
|
||||
}, { once: true });
|
||||
document.body.appendChild(player);
|
||||
};
|
||||
const script = document.createElement("script");
|
||||
script.src = "https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js";
|
||||
script.onload = () => {
|
||||
if (fallback.readyState >= 1) upgrade();
|
||||
else fallback.addEventListener("loadedmetadata", upgrade, { once: true });
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
fallback.src = source;
|
||||
};
|
||||
const args = JSON.stringify([src, poster]).replace(/</g, "\\u003c");
|
||||
const html = "<!doctype html><html><head><meta charset='utf-8'><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111}</style>" +
|
||||
"</head><body><script>(" +
|
||||
mount.toString() + ")(..." + args + ");</" + "script></body></html>";
|
||||
return <iframe title={title} className={className} style={{ display: "block", width: "100%", aspectRatio: "16 / 9", border: 0 }} srcDoc={html} loading="lazy" allow="fullscreen" allowFullScreen />;
|
||||
};
|
||||
@@ -83,7 +83,7 @@ export const HoverVideo = ({ src, poster, className, hasAudio = true }) => {
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={wrapRef} className={`relative overflow-hidden ${className ?? ""}`}>
|
||||
<div ref={wrapRef} className={className} style={{ position: "relative", overflow: "hidden" }}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
className="absolute inset-0 h-full w-full object-cover"
|
||||
|
||||
@@ -173,3 +173,47 @@ test("HoverVideo's control does not bubble its click to a wrapping link", () =>
|
||||
"the click does not bubble to a wrapping link",
|
||||
);
|
||||
});
|
||||
|
||||
// Mintlify prefixes caller classes before evaluating snippets. Interpolating
|
||||
// them after literal classes can join the boundary tokens and lose aspect-video.
|
||||
test("HoverVideo preserves the caller's sizing classes at the Mintlify boundary", () => {
|
||||
const source = readFileSync(join(here, "../docs/snippets/hover-video.jsx"), "utf8");
|
||||
const wrapper = source.match(/<div\s+ref=\{wrapRef\}([\s\S]*?)>/);
|
||||
assert.ok(wrapper, "found the preview's layout wrapper");
|
||||
assert.match(
|
||||
wrapper[1],
|
||||
/className=\{className\}/,
|
||||
"forward sizing classes without interpolation",
|
||||
);
|
||||
assert.match(
|
||||
wrapper[1],
|
||||
/position:\s*"relative"/,
|
||||
"anchor the absolute video inside the sized wrapper",
|
||||
);
|
||||
assert.match(wrapper[1], /overflow:\s*"hidden"/, "clip the preview inside its card");
|
||||
});
|
||||
|
||||
test("example films use the catalog player without making its controls source links", () => {
|
||||
const page = readFileSync(join(here, "../docs/examples.mdx"), "utf8");
|
||||
const source = readFileSync(join(here, "../docs/snippets/example-player.jsx"), "utf8");
|
||||
assert.equal((page.match(/<ExamplePlayer\s/g) ?? []).length, 23);
|
||||
assert.doesNotMatch(page, /<HoverVideo\s/);
|
||||
assert.doesNotMatch(page, /<a[^>]*>\s*<ExamplePlayer/);
|
||||
assert.match(source, /createElement\("hyperframes-player"\)/);
|
||||
assert.match(source, /player\.setAttribute\("controls", ""\)/);
|
||||
assert.match(
|
||||
source,
|
||||
/\.hfp-poster\{width:100%;height:100%\}/,
|
||||
"fit large posters in the published player instead of cropping them",
|
||||
);
|
||||
assert.match(source, /loading="lazy"/);
|
||||
assert.ok(
|
||||
source.indexOf("appendChild(fallback)") < source.indexOf("appendChild(script)"),
|
||||
"native controls exist before the CDN request",
|
||||
);
|
||||
assert.match(
|
||||
source,
|
||||
/fallback\.readyState >= 1/,
|
||||
"upgrade also handles metadata arriving before the CDN script",
|
||||
);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user