ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-02 12:08:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: stop serving render masters as if they were deliverables

Browse Source 
Thirty-two published videos were the raw render output. One 20-second catalog
preview was 60 MB at 25 Mbps — Blu-ray bitrate for a screen capture in a docs
page. Nothing autoplays, so no page shipped that silently, but a reader who
pressed play paid for it.

Re-encoded at 1280 wide, CRF 28, faststart, keeping audio where it existed.
Measured PSNR against the originals at ~38.5 dB, which is visually identical —
the first check I ran returned nothing and I mistook that for a pass, so this
number comes from a filter that actually worked.

Worth correcting one thing I said earlier: the catalog is not systemically
over-encoded. 190 videos, 0.36 GB, about 1.9 MB each. Six were over 10 MB. I
found two monsters and generalised from them.

Pages carrying more than 8 MB of video: 26 before, and the heaviest went from
140 MB to under 15 MB.

The durable fix is in generate-catalog-previews.ts, which had no delivery encode
at all — it published the render master directly. It has a web pass now, so the
next preview is born small instead of being cleaned up later.
This commit is contained in:
ukimsanov
2026-08-04 11:33:52 -07:00
parent 31366d724d
commit 158d0fea1f
29 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/blocks/ios26-liquid-glass.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "iOS 26 Liquid Glass Home Screen"
description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model." description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/liquid-glass-media-controls.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "Liquid Glass Media Controls"
description: "Frosted glass media control panels spreading over an aurora shader background" description: "Frosted glass media control panels spreading over an aurora shader background"
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/liquid-glass-widgets.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "Liquid Glass Widgets"
description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background" description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "macOS Tahoe Liquid Glass Desktop"
description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move." description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/vfx-liquid-background.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "Liquid Background"
description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics." description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/vfx-liquid-glass.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "Liquid Glass"
description: "VFX composition block" description: "VFX composition block"
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/vfx-magnetic.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "Magnetic"
description: "VFX composition block" description: "VFX composition block"
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/vfx-text-cursor.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "VFX Text Cursor"
description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges." description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/blocks/yt-lcd-background.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "Scanline Board Background"
description: "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title" description: "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title"
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png" autoPlay muted loop playsInline />
## Install ## Install
docs/catalog/components/caption-blend-difference.mdx
+1 -1
View File
@@ -3,7 +3,7 @@ title: "Blend Difference"
description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background" description: "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background"
--- ---
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline /> <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference-v2.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
## Install ## Install
docs/developers/index.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { DocsVideo } from "/snippets/docs-video.jsx";
<div className="hf-docs-video-frame"> <div className="hf-docs-video-frame">
<DocsVideo <DocsVideo
title="A HyperFrames composition shown through the CLI, SDK, Player, and rendering infrastructure." title="A HyperFrames composition shown through the CLI, SDK, Player, and rendering infrastructure."
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-developers-v3.mp4" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-developers-v3-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-developers-v3.jpg" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-developers-v3.jpg"
/> />
</div> </div>
docs/go-further.mdx
+1 -1
View File
@@ -10,7 +10,7 @@ import { DocsVideo } from "/snippets/docs-video.jsx";
<div className="hf-docs-video-frame"> <div className="hf-docs-video-frame">
<DocsVideo <DocsVideo
title="An existing HyperFrames project is revised with an agent, edited in Studio, enriched, checked, and rendered." title="An existing HyperFrames project is revised with an agent, edited in Studio, enriched, checked, and rendered."
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-go-further-v3.mp4" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-go-further-v3-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-go-further-v3.jpg" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-go-further-v3.jpg"
/> />
</div> </div>
docs/guides/avatar-presenter.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ music, and the final composition.
<Frame caption="A presenter clip remains the source footage while HyperFrames adds the caption rail and emphasis layer around it."> <Frame caption="A presenter clip remains the source footage while HyperFrames adds the caption rail and emphasis layer around it.">
<DocsVideo <DocsVideo
title="Presenter footage with a readable caption rail and an emphasis moment" title="Presenter footage with a readable caption rail and an emphasis moment"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/captions-anchor-rail.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/captions-anchor-rail-v2.mp4#t=0.1"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/avatar-presenter-caption-rail-v1.jpg" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/avatar-presenter-caption-rail-v1.jpg"
/> />
</Frame> </Frame>
docs/guides/music-to-video.mdx
+1 -1
View File
@@ -11,7 +11,7 @@ Start with a music file—or a video whose audio should control the edit. Narrat
<Frame caption="A complete music-driven film. Its sections, visual treatments, and cuts follow the track."> <Frame caption="A complete music-driven film. Its sections, visual treatments, and cuts follow the track.">
<DocsVideo <DocsVideo
title="A complete music-driven film" title="A complete music-driven film"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-music.mp4" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/full-music-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-music.jpg" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/wfv2-music.jpg"
/> />
</Frame> </Frame>
docs/introduction.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { DocsVideo, ShowcaseWall } from "/snippets/docs-video.jsx";
<div className="hf-docs-video-frame"> <div className="hf-docs-video-frame">
<DocsVideo <DocsVideo
title="What is HyperFrames?" title="What is HyperFrames?"
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5.mp4" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5.jpg" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-introduction-v5.jpg"
/> />
</div> </div>
docs/prompting/capstone.mdx
+2 -2
View File
@@ -3,7 +3,7 @@ title: Capstone — every technique, one journey
description: "One prompt, one unbroken camera move, and every technique in this guide joined into a single 62-second film." description: "One prompt, one unbroken camera move, and every technique in this guide joined into a single 62-second film."
--- ---
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default.mp4#t=0.1" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video> <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default-v2.mp4#t=0.1" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
*"The Timeline" — 1920x1080, ~62 seconds, one prompt, one unbroken camera move, unedited.* *"The Timeline" — 1920x1080, ~62 seconds, one prompt, one unbroken camera move, unedited.*
One prompt made this. Nothing was cut or stitched together afterward. The prompt asked for about 60 seconds. The render came back at 1:02, because the closing lockup holds for a two-second breath. One prompt made this. Nothing was cut or stitched together afterward. The prompt asked for about 60 seconds. The render came back at 1:02, because the closing lockup holds for a two-second breath.
@@ -139,7 +139,7 @@ The new wrinkle is the world. It is one wide scene space that a camera transform
hyperframes render --variables '{"ground":"#0d1420","ink":"#c8ff3d"}' --strict-variables hyperframes render --variables '{"ground":"#0d1420","ink":"#c8ff3d"}' --strict-variables
``` ```
<video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-reskin.mp4#t=0.1" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video> <video controls muted loop playsinline preload="metadata" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-reskin-v2.mp4#t=0.1" style={{ borderRadius: "0.5rem", marginTop: "0.75rem" }}></video>
*The same composition, navy and acid green — the wire, ruler, chart, map, glass, and even the generated mural all follow the override.* *The same composition, navy and acid green — the wire, ruler, chart, map, glass, and even the generated mural all follow the override.*
The mural trick from the previous capstone carries over. The artwork is generated in grayscale, then duotoned live by CSS layers driven by the `ground` and `ink` variables. Even the raster re-skins. Keep color in CSS and shapes in the raster whenever a template frame needs to survive a re-skin. The mural trick from the previous capstone carries over. The artwork is generated in grayscale, then duotoned live by CSS layers driven by the `ground` and `ink` variables. Even the raster re-skins. Keep color in CSS and shapes in the raster whenever a template frame needs to survive a re-skin.
docs/prompting/captions-and-talking-heads.mdx
+1 -1
View File
@@ -17,7 +17,7 @@ Captions route by **identity**, not by mode. You pick one look from the catalog;
<DocsVideo <DocsVideo
title="HyperFrames video: Captions Anchor Rail" title="HyperFrames video: Captions Anchor Rail"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/captions-anchor-rail.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/captions-anchor-rail-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above on generated avatar footage, unedited — one earned embed behind the speaker, everything else on the rail.* *Rendered from the prompt above on generated avatar footage, unedited — one earned embed behind the speaker, everything else on the rail.*
docs/prompting/code-and-prs.mdx
+1 -1
View File
@@ -17,7 +17,7 @@ Verified, from the [examples](/prompting/examples) page — a 30-second feature
<DocsVideo <DocsVideo
title="HyperFrames video: Example Pr Video" title="HyperFrames video: Example Pr Video"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-pr-video.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-pr-video-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
docs/prompting/color-grading.mdx
+2 -2
View File
@@ -107,7 +107,7 @@ Three ways to take the image apart, each saying something different. Pixelation
<DocsVideo <DocsVideo
title="HyperFrames video: Grade Painterly Ffd5c0f9" title="HyperFrames video: Grade Painterly Ffd5c0f9"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/grade-painterly-ffd5c0f9.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/grade-painterly-ffd5c0f9-v2.mp4#t=0.1"
loop loop
/> />
*Kuwahara at full strength, on a subject with enough edges to be worth preserving.* *Kuwahara at full strength, on a subject with enough edges to be worth preserving.*
@@ -122,7 +122,7 @@ Three ways to take the image apart, each saying something different. Pixelation
<DocsVideo <DocsVideo
title="HyperFrames video: Grade Two Ink Press 3c5662f1" title="HyperFrames video: Grade Two Ink Press 3c5662f1"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/grade-two-ink-press-3c5662f1.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/grade-two-ink-press-3c5662f1-v2.mp4#t=0.1"
loop loop
/> />
*Ten hue families collapsing to three. Dense type is the harshest test of a two-ink reduction.* *Ten hue families collapsing to three. Dense type is the harshest test of a two-ink reduction.*
docs/prompting/examples.mdx
+5 -5
View File
@@ -62,7 +62,7 @@ Every prompt below has been run end-to-end and one-shots a finished video that p
<DocsVideo <DocsVideo
title="HyperFrames video: Example Product Launch" title="HyperFrames video: Example Product Launch"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-product-launch.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-product-launch-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
@@ -73,7 +73,7 @@ Every prompt below has been run end-to-end and one-shots a finished video that p
With a verbatim script, final duration follows the narration — ask for "~60 seconds", not exactly 60. With a verbatim script, final duration follows the narration — ask for "~60 seconds", not exactly 60.
<DocsVideo <DocsVideo
title="HyperFrames video: Example Explainer" title="HyperFrames video: Example Explainer"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-explainer.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-explainer-v2.mp4#t=0.1"
portrait portrait
loop loop
/> />
@@ -84,7 +84,7 @@ Every prompt below has been run end-to-end and one-shots a finished video that p
<DocsVideo <DocsVideo
title="HyperFrames video: Example Pr Video" title="HyperFrames video: Example Pr Video"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-pr-video.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-pr-video-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
@@ -94,7 +94,7 @@ Every prompt below has been run end-to-end and one-shots a finished video that p
<DocsVideo <DocsVideo
title="HyperFrames video: Example Music Slideshow" title="HyperFrames video: Example Music Slideshow"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-music-slideshow.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-music-slideshow-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
@@ -109,7 +109,7 @@ Every prompt below has been run end-to-end and one-shots a finished video that p
<DocsVideo <DocsVideo
title="HyperFrames video: Example Kinetic Quote" title="HyperFrames video: Example Kinetic Quote"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-kinetic-quote.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-kinetic-quote-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
docs/prompting/explainers.mdx
+1 -1
View File
@@ -17,7 +17,7 @@ Verified, from the [examples](/prompting/examples) page — a ~60-second vertica
<DocsVideo <DocsVideo
title="HyperFrames video: Example Explainer" title="HyperFrames video: Example Explainer"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-explainer.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-explainer-v2.mp4#t=0.1"
portrait portrait
loop loop
/> />
docs/prompting/music-and-slideshows.mdx
+1 -1
View File
@@ -17,7 +17,7 @@ The verified starting point: photos cut to a track, exported to a square MP4.
<DocsVideo <DocsVideo
title="HyperFrames video: Example Music Slideshow" title="HyperFrames video: Example Music Slideshow"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-music-slideshow.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-music-slideshow-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
docs/prompting/overview.mdx
+3 -3
View File
@@ -7,7 +7,7 @@ import { DocsVideo } from "/snippets/docs-video.jsx";
<DocsVideo <DocsVideo
title="HyperFrames video: Capstone Timeline Default" title="HyperFrames video: Capstone Timeline Default"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/capstone-timeline-default-v2.mp4#t=0.1"
loop loop
/> />
*By the end of this guide, you can build this with a prompt.* *By the end of this guide, you can build this with a prompt.*
@@ -155,7 +155,7 @@ Three prompts from this guide and their unedited renders — one workflow warm s
<DocsVideo <DocsVideo
title="HyperFrames video: Example Product Launch" title="HyperFrames video: Example Product Launch"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-product-launch.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-product-launch-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
@@ -173,7 +173,7 @@ And at the far end of the [specification dial](/prompting/specification-dial), a
<DocsVideo <DocsVideo
title="HyperFrames video: Recreate Globe Oneshot" title="HyperFrames video: Recreate Globe Oneshot"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/recreate-globe-oneshot.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/recreate-globe-oneshot-v2.mp4#t=0.1"
loop loop
/> />
*One-shot render from the distilled spec, no iteration.* *One-shot render from the distilled spec, no iteration.*
docs/prompting/product-launch.mdx
+2 -2
View File
@@ -17,7 +17,7 @@ Verified, from the [examples](/prompting/examples) page — a 45-second launch f
<DocsVideo <DocsVideo
title="HyperFrames video: Example Product Launch" title="HyperFrames video: Example Product Launch"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-product-launch.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/example-product-launch-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited.* *Rendered from the prompt above, unedited.*
@@ -70,7 +70,7 @@ What you can already steer from the prompt, before you've learned any technique.
<DocsVideo <DocsVideo
title="HyperFrames video: Variant Launch Script" title="HyperFrames video: Variant Launch Script"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/variant-launch-script.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/variant-launch-script-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from this prompt shape with a different, longer script (78 words, fictional dev-tool "Relay"), unedited — it ran 35.5s because the words set the length.* *Rendered from this prompt shape with a different, longer script (78 words, fictional dev-tool "Relay"), unedited — it ran 35.5s because the words set the length.*
docs/prompting/recreating-references.mdx
+1 -1
View File
@@ -38,7 +38,7 @@ A distilled spec that one-shots a broadcast-style animated globe:
<DocsVideo <DocsVideo
title="HyperFrames video: Recreate Globe Oneshot" title="HyperFrames video: Recreate Globe Oneshot"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/recreate-globe-oneshot.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/recreate-globe-oneshot-v2.mp4#t=0.1"
loop loop
/> />
*The one-shot render produced by this exact spec on a fresh build — no iteration.* *The one-shot render produced by this exact spec on a fresh build — no iteration.*
docs/prompting/vfx-and-liquid-glass.mdx
+1 -1
View File
@@ -104,7 +104,7 @@ These are the ambient layer of the [motion grammar](/prompting/motion): grain an
<DocsVideo <DocsVideo
title="HyperFrames video: Logo Polish" title="HyperFrames video: Logo Polish"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/logo-polish.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/logo-polish-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the prompt above, unedited — the "hold" stays alive on grain, a 3% push, and one shimmer pass.* *Rendered from the prompt above, unedited — the "hold" stays alive on grain, a 3% push, and one shimmer pass.*
docs/prompting/visual-specs.mdx
+1 -1
View File
@@ -11,7 +11,7 @@ This is the dial's third setting, [full visual spec](/prompting/specification-di
<DocsVideo <DocsVideo
title="HyperFrames video: Spec Showreel" title="HyperFrames video: Spec Showreel"
src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/spec-showreel.mp4#t=0.1" src="https://static.heygen.ai/hyperframes-oss/docs/images/prompting/spec-showreel-v2.mp4#t=0.1"
loop loop
/> />
*Rendered from the spec above, unedited.* *Rendered from the spec above, unedited.*
docs/quickstart.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { DocsVideo } from "/snippets/docs-video.jsx";
<div className="hf-docs-video-frame"> <div className="hf-docs-video-frame">
<DocsVideo <DocsVideo
title="A beginner creates a first HyperFrames video from one short request, then continues with an agent, Studio, or the CLI." title="A beginner creates a first HyperFrames video from one short request, then continues with an agent, Studio, or the CLI."
src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5.mp4" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5-v2.mp4"
poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5.jpg" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5.jpg"
/> />
</div> </div>
docs/weekly-updates.mdx
+3 -3
View File
@@ -21,7 +21,7 @@ For exact versioned release notes, see the [Changelog](/changelog).
<Frame> <Frame>
<DocsVideo <DocsVideo
title="HyperFrames video: Weekly Changelog 2026 07 27 2026 08 03" title="HyperFrames video: Weekly Changelog 2026 07 27 2026 08 03"
src="https://static.heygen.ai/hyperframes/changelog-videos/weekly-changelog-2026-07-27-2026-08-03.mp4" src="https://static.heygen.ai/hyperframes/changelog-videos/weekly-changelog-2026-07-27-2026-08-03-v2.mp4"
/> />
</Frame> </Frame>
@@ -83,7 +83,7 @@ For exact versioned release notes, see the [Changelog](/changelog).
<Frame> <Frame>
<DocsVideo <DocsVideo
title="HyperFrames video: Weekly Changelog 2026 07 20 2026 07 27" title="HyperFrames video: Weekly Changelog 2026 07 20 2026 07 27"
src="https://static.heygen.ai/hyperframes/changelog-videos/weekly-changelog-2026-07-20-2026-07-27.mp4" src="https://static.heygen.ai/hyperframes/changelog-videos/weekly-changelog-2026-07-20-2026-07-27-v2.mp4"
/> />
</Frame> </Frame>
@@ -138,7 +138,7 @@ For exact versioned release notes, see the [Changelog](/changelog).
<Frame> <Frame>
<DocsVideo <DocsVideo
title="HyperFrames video: Weekly Changelog Jul13 20" title="HyperFrames video: Weekly Changelog Jul13 20"
src="https://static.heygen.ai/hyperframes/changelog-videos/weekly-changelog-jul13-20.mp4" src="https://static.heygen.ai/hyperframes/changelog-videos/weekly-changelog-jul13-20-v2.mp4"
/> />
</Frame> </Frame>