docs(catalog): put the install command above the preview (#3888)

The install command is the one line a reader comes to a catalog page to copy,
and it sat below the whole variables explorer, under its Customize panel, a
screen or more down on long items. Move the Install section above the preview
and regenerate all 399 pages.
This commit is contained in:
Miguel Ángel
2026-09-11 18:15:00 -04:00
committed by GitHub
parent 63574a7c7f
commit 51a88b9566
401 changed files with 3087 additions and 2614 deletions
+6 -6
View File
@@ -6,6 +6,12 @@ description: "A question is typed on a rising keyboard, sent, and answered by an
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add ai-chat-reveal" item="ai-chat-reveal" />
That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `assets/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/ai-chat-reveal.json"
compositionId="ai-chat-reveal"
@@ -1036,12 +1042,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add ai-chat-reveal" item="ai-chat-reveal" />
That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `assets/`.
## Add it to your video
It runs for 19.3333 seconds at 1080×1920. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Fitness app product showcase with three floating smartphone screen
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add app-showcase" item="app-showcase" />
That writes one file: `compositions/app-showcase.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="app-showcase preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/app-showcase.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add app-showcase" item="app-showcase" />
That writes one file: `compositions/app-showcase.html`.
## Source
<Accordion title={`app-showcase.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Apple-style finance counter that counts from $0 to $10,000, flashe
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add apple-money-count" item="apple-money-count" />
That writes `compositions/apple-money-count.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="apple-money-count preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/apple-money-count.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add apple-money-count" item="apple-money-count" />
That writes `compositions/apple-money-count.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`apple-money-count.html`}>
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Ranked bars grow and overtake each other as a time series advances
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add bar-chart-race" item="bar-chart-race" />
That writes one file: `compositions/bar-chart-race.html`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/bar-chart-race.json"
compositionId="bar-chart-race"
@@ -602,12 +608,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add bar-chart-race" item="bar-chart-race" />
That writes one file: `compositions/bar-chart-race.html`.
## Add it to your video
It runs for 12 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add beat-freeze-cut" item="beat-freeze-cut" />
That writes one file: `compositions/beat-freeze-cut.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="beat-freeze-cut preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/beat-freeze-cut.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add beat-freeze-cut" item="beat-freeze-cut" />
That writes one file: `compositions/beat-freeze-cut.html`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
@@ -5,6 +5,12 @@ description: "Warm AI creator intro sequence that resolves into an X follow card
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add blue-sweater-intro-video" item="blue-sweater-intro-video" />
That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting files under `assets/` and `assets/sfx/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="blue-sweater-intro-video preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/blue-sweater-intro-video.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add blue-sweater-intro-video" item="blue-sweater-intro-video" />
That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting files under `assets/` and `assets/sfx/`.
## Source
<Accordion title={`blue-sweater-intro-video.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Responsive REC, battery, editable date placeholder, and timeline-d
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add camcorder-hud" item="camcorder-hud" />
That writes one file: `compositions/camcorder-hud.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="camcorder-hud preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/camcorder-hud.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add camcorder-hud" item="camcorder-hud" />
That writes one file: `compositions/camcorder-hud.html`.
## Add it to your video
It runs for 4 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Camera tracks toward or away from the subject while the field of v
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add camera-dolly-zoom" item="camera-dolly-zoom" />
That writes one file: `compositions/camera-dolly-zoom.html`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/camera-dolly-zoom.json"
compositionId="camera-dolly-zoom"
@@ -372,12 +378,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add camera-dolly-zoom" item="camera-dolly-zoom" />
That writes one file: `compositions/camera-dolly-zoom.html`.
## Add it to your video
It runs for 4 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-circle-1" item="carousel-circle-1" />
That writes `compositions/carousel-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-circle-1.json"
compositionId="carousel-circle-1"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-circle-1" item="carousel-circle-1" />
That writes `compositions/carousel-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-circle-2" item="carousel-circle-2" />
That writes `compositions/carousel-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-circle-2.json"
compositionId="carousel-circle-2"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-circle-2" item="carousel-circle-2" />
That writes `compositions/carousel-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-circle-3" item="carousel-circle-3" />
That writes `compositions/carousel-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-circle-3.json"
compositionId="carousel-circle-3"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-circle-3" item="carousel-circle-3" />
That writes `compositions/carousel-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-circle-4" item="carousel-circle-4" />
That writes `compositions/carousel-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-circle-4.json"
compositionId="carousel-circle-4"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-circle-4" item="carousel-circle-4" />
That writes `compositions/carousel-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-circle-5" item="carousel-circle-5" />
That writes `compositions/carousel-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-circle-5.json"
compositionId="carousel-circle-5"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-circle-5" item="carousel-circle-5" />
That writes `compositions/carousel-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-1" item="carousel-orbit-1" />
That writes `compositions/carousel-orbit-1.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-orbit-1.json"
compositionId="carousel-orbit-1"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-1" item="carousel-orbit-1" />
That writes `compositions/carousel-orbit-1.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-2" item="carousel-orbit-2" />
That writes `compositions/carousel-orbit-2.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-orbit-2.json"
compositionId="carousel-orbit-2"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-2" item="carousel-orbit-2" />
That writes `compositions/carousel-orbit-2.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-3" item="carousel-orbit-3" />
That writes `compositions/carousel-orbit-3.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-orbit-3.json"
compositionId="carousel-orbit-3"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-3" item="carousel-orbit-3" />
That writes `compositions/carousel-orbit-3.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-4" item="carousel-orbit-4" />
That writes `compositions/carousel-orbit-4.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-orbit-4.json"
compositionId="carousel-orbit-4"
@@ -1057,12 +1063,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-4" item="carousel-orbit-4" />
That writes `compositions/carousel-orbit-4.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-5" item="carousel-orbit-5" />
That writes `compositions/carousel-orbit-5.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-orbit-5.json"
compositionId="carousel-orbit-5"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-orbit-5" item="carousel-orbit-5" />
That writes `compositions/carousel-orbit-5.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-path-1" item="carousel-path-1" />
That writes `compositions/carousel-path-1.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-path-1.json"
compositionId="carousel-path-1"
@@ -1063,12 +1069,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-path-1" item="carousel-path-1" />
That writes `compositions/carousel-path-1.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-path-2" item="carousel-path-2" />
That writes `compositions/carousel-path-2.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-path-2.json"
compositionId="carousel-path-2"
@@ -1020,12 +1026,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-path-2" item="carousel-path-2" />
That writes `compositions/carousel-path-2.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-path-3" item="carousel-path-3" />
That writes `compositions/carousel-path-3.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-path-3.json"
compositionId="carousel-path-3"
@@ -1034,12 +1040,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-path-3" item="carousel-path-3" />
That writes `compositions/carousel-path-3.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-path-4" item="carousel-path-4" />
That writes `compositions/carousel-path-4.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-path-4.json"
compositionId="carousel-path-4"
@@ -1063,12 +1069,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-path-4" item="carousel-path-4" />
That writes `compositions/carousel-path-4.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-path-5" item="carousel-path-5" />
That writes `compositions/carousel-path-5.html`, plus 24 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-path-5.json"
compositionId="carousel-path-5"
@@ -1062,12 +1068,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-path-5" item="carousel-path-5" />
That writes `compositions/carousel-path-5.html`, plus 24 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-1" item="carousel-text-circle-1" />
That writes `compositions/carousel-text-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-text-circle-1.json"
compositionId="carousel-text-circle-1"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-1" item="carousel-text-circle-1" />
That writes `compositions/carousel-text-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 5 seconds at 1920×1080. Paste this into your composition:
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-2" item="carousel-text-circle-2" />
That writes `compositions/carousel-text-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-text-circle-2.json"
compositionId="carousel-text-circle-2"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-2" item="carousel-text-circle-2" />
That writes `compositions/carousel-text-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 5 seconds at 1920×1080. Paste this into your composition:
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-3" item="carousel-text-circle-3" />
That writes `compositions/carousel-text-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-text-circle-3.json"
compositionId="carousel-text-circle-3"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-3" item="carousel-text-circle-3" />
That writes `compositions/carousel-text-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 5 seconds at 1920×1080. Paste this into your composition:
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-4" item="carousel-text-circle-4" />
That writes `compositions/carousel-text-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-text-circle-4.json"
compositionId="carousel-text-circle-4"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-4" item="carousel-text-circle-4" />
That writes `compositions/carousel-text-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 5 seconds at 1920×1080. Paste this into your composition:
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-5" item="carousel-text-circle-5" />
That writes `compositions/carousel-text-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-text-circle-5.json"
compositionId="carousel-text-circle-5"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-text-circle-5" item="carousel-text-circle-5" />
That writes `compositions/carousel-text-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 5 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-vision-1" item="carousel-vision-1" />
That writes `compositions/carousel-vision-1.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-vision-1.json"
compositionId="carousel-vision-1"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-vision-1" item="carousel-vision-1" />
That writes `compositions/carousel-vision-1.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-vision-2" item="carousel-vision-2" />
That writes `compositions/carousel-vision-2.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-vision-2.json"
compositionId="carousel-vision-2"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-vision-2" item="carousel-vision-2" />
That writes `compositions/carousel-vision-2.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-vision-3" item="carousel-vision-3" />
That writes `compositions/carousel-vision-3.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-vision-3.json"
compositionId="carousel-vision-3"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-vision-3" item="carousel-vision-3" />
That writes `compositions/carousel-vision-3.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-vision-4" item="carousel-vision-4" />
That writes `compositions/carousel-vision-4.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-vision-4.json"
compositionId="carousel-vision-4"
@@ -1030,12 +1036,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-vision-4" item="carousel-vision-4" />
That writes `compositions/carousel-vision-4.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add carousel-vision-5" item="carousel-vision-5" />
That writes `compositions/carousel-vision-5.html`, plus 12 supporting files under `assets/carousel-images/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/carousel-vision-5.json"
compositionId="carousel-vision-5"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add carousel-vision-5" item="carousel-vision-5" />
That writes `compositions/carousel-vision-5.html`, plus 12 supporting files under `assets/carousel-images/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+75 -6
View File
@@ -5,6 +5,12 @@ description: "A portrait ChatGPT-style exchange types and sends a prompt, stream
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add chatgpt-exchange" item="chatgpt-exchange" />
That writes `compositions/chatgpt-exchange.html`, plus 5 supporting files under `assets/fonts/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="chatgpt-exchange preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/chatgpt-exchange.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chatgpt-exchange.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add chatgpt-exchange" item="chatgpt-exchange" />
That writes `compositions/chatgpt-exchange.html`, plus 5 supporting files under `assets/fonts/`.
## Add it to your video
It runs for 14.9 seconds at 1080×1920. Paste this into your composition:
@@ -1413,6 +1413,75 @@ Move it in time with `data-start`. Put it on a different timeline row with
tRead + T.readbackDur - 0.35,
);
/* ---- caret-following scroll in the composer.
`prompt` is an editable slot, but `.comp-text` is a fixed-width single line with
`white-space: pre` inside a composer that clips, and the packaged prompt already reaches
the mic. A longer one therefore slides under the mic and the send button and loses its
tail, with the caret hidden behind them -- the remix looks like it typed into nowhere.
A real single-line input scrolls its text left to keep the caret in view; this does the
same, on the very times the reveal already uses. Shrinking the type instead was the other
option and it is worse: it would shrink the packaged prompt too, since that prompt has no
headroom, and it still cannot absorb a prompt twice as long without becoming unreadable.
A prompt that fits emits no keyframes at all, so the packaged composition is untouched. */
const compTextEl = composer.querySelector("#cge-comp-text");
// The obstacle is the opaque round button, not the mic: the packaged prompt's caret already
// sits 2px past the mic's left edge, so measuring to the mic would scroll the packaged
// composition. The caret has 35px of clearance to the button, which is the real boundary.
const compStopEl = composer.querySelector("#cge-blue-btn");
const CARET_PAD = 8;
// The rebuild below has to discard exactly what the previous pass added, and `tl.to()`
// returns the TIMELINE, not the tween it just created -- so collecting those return values
// and killing them on the second pass kills the master timeline, and the composition stops
// dead. It only bites when there are keyframes to discard, i.e. an overflowing prompt: the
// exact remix this scroll exists for, and why a packaged-defaults render never saw it.
// One nested child timeline is a real object that can be killed and replaced, and killing
// it cannot reach `tl`.
let caretTl = null;
const layoutCaretScroll = () => {
if (caretTl) {
caretTl.kill();
caretTl = null;
// Only ever touch typedEl when there was scrolling to undo. A zero translate — or even
// a clearProps on an untouched element — stamps and removes a transform, which changes
// how the text rasterizes and makes the packaged render differ for no reason.
gsap.set(typedEl, { clearProps: "transform" });
}
if (!compTextEl || !compStopEl) return;
// Rects live in the scaled .screen space while offsets are layout px, so convert with the
// element's own ratio rather than reading --scale -- this then survives a change to it.
const box = compTextEl.getBoundingClientRect();
const ratio = compTextEl.offsetWidth ? box.width / compTextEl.offsetWidth : 1;
const limit =
(compStopEl.getBoundingClientRect().left - box.left) / (ratio || 1) - CARET_PAD;
if (!(limit > 0)) return;
// Collect the steps first, so a prompt that fits leaves typedEl alone entirely.
const steps = [];
let shift = 0;
chars.forEach((c, i) => {
const caret = curEls[i + 1];
if (!caret) return;
const want = Math.max(0, caret.offsetLeft - limit);
if (want > shift + 0.5) {
shift = want;
steps.push([charT[i], -shift]);
}
});
if (!steps.length) return;
// Children sit at the same absolute times as before, and the nest is added at 0, so the
// nested timeline's local clock is the master's -- the motion is unchanged.
caretTl = gsap.timeline();
steps.forEach(([at, x]) => {
caretTl.to(typedEl, { x, duration: 0.08, ease: "none" }, at);
});
// Back to the start when the composer empties, so the collapse animates from x=0.
caretTl.to(typedEl, { x: 0, duration: 0.01 }, tGo);
tl.add(caretTl, 0);
};
layoutCaretScroll();
// This composition builds its timeline once, so the first pass measures whatever font was
// live then. Re-measure when the embedded faces are ready.
document.fonts.ready.then(layoutCaretScroll);
window.__timelines["chatgpt-exchange"] = tl;
</script>
</body>
@@ -5,6 +5,12 @@ description: "Shader transition with chromatic aberration radial split"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add chromatic-radial-split" item="chromatic-radial-split" />
That writes one file: `compositions/chromatic-radial-split.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="chromatic-radial-split preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/chromatic-radial-split.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add chromatic-radial-split" item="chromatic-radial-split" />
That writes one file: `compositions/chromatic-radial-split.html`.
## Source
<Accordion title={`chromatic-radial-split.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Shader transition with dramatic zoom blur"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add cinematic-zoom" item="cinematic-zoom" />
That writes one file: `compositions/cinematic-zoom.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="cinematic-zoom preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/cinematic-zoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add cinematic-zoom" item="cinematic-zoom" />
That writes one file: `compositions/cinematic-zoom.html`.
## Source
<Accordion title={`cinematic-zoom.html`}>
+54 -6
View File
@@ -5,6 +5,12 @@ description: "A portrait Claude-style exchange types a prompt, works through sea
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add claude-exchange" item="claude-exchange" />
That writes `compositions/claude-exchange.html`, plus 8 supporting files under `assets/fonts/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="claude-exchange preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/claude-exchange.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/claude-exchange.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add claude-exchange" item="claude-exchange" />
That writes `compositions/claude-exchange.html`, plus 8 supporting files under `assets/fonts/`.
## Add it to your video
It runs for 21.4 seconds at 1080×1920. Paste this into your composition:
@@ -1626,6 +1626,54 @@ Move it in time with `data-start`. Put it on a different timeline row with
// the minute rolls over between the source frames — keep that
tl.to(document.getElementById("cle-clock-early"), { autoAlpha: 0, duration: 0.01 }, 8.4);
tl.to(document.getElementById("cle-clock-late"), { autoAlpha: 1, duration: 0.01 }, 8.4);
/* ---- caret-following scroll in the composer.
`prompt` is an editable slot, but `.comp-text` is a fixed-width single line with
`white-space: pre` inside a composer that clips, and the packaged prompt already
reaches the mic. A longer one therefore slides under the mic and the send button and
loses its tail, with the caret hidden behind them. A real single-line input scrolls its
text left to keep the caret in view; this does the same, on the very times the reveal
already uses. Shrinking the type instead would shrink the packaged prompt too, since
that prompt has no headroom, and still could not absorb a prompt twice as long without
becoming unreadable. A prompt that fits emits no keyframes, so the packaged
composition is untouched. Lives inside build(), which is re-run once the embedded
faces are ready, so the measurement is taken against the final font. */
const compTextEl = composer.querySelector("#cle-comp-text");
// The obstacle is the opaque round button, not the mic glyph the text may abut. Take the
// leftmost of the two that occupy that corner, since one swaps in for the other.
const compStops = ["#cle-voice-btn", "#cle-send-btn"]
.map((sel) => composer.querySelector(sel))
.filter(Boolean);
const CARET_PAD = 8;
if (compTextEl && compStops.length) {
// Rects live in the scaled .screen space while offsets are layout px, so convert with
// the element's own ratio rather than reading --scale.
const box = compTextEl.getBoundingClientRect();
const ratio = compTextEl.offsetWidth ? box.width / compTextEl.offsetWidth : 1;
const stopLeft = Math.min(...compStops.map((el) => el.getBoundingClientRect().left));
const limit = (stopLeft - box.left) / (ratio || 1) - CARET_PAD;
if (limit > 0) {
// Collect the steps first, so a prompt that fits leaves typedEl alone entirely: even a
// zero translate stamps a transform, which changes how the text rasterizes and would
// make the packaged render differ from before for no reason.
const steps = [];
let shift = 0;
chars.forEach((c, i) => {
const caret = curEls[i + 1];
if (!caret) return;
const want = Math.max(0, caret.offsetLeft - limit);
if (want > shift + 0.5) {
shift = want;
steps.push([charT[i], -shift]);
}
});
if (steps.length) {
steps.forEach(([at, x]) => tl.to(typedEl, { x, duration: 0.08, ease: "none" }, at));
// Back to the start when the composer empties, so the collapse animates from x=0.
tl.to(typedEl, { x: 0, duration: 0.01 }, tGo);
}
}
}
}
build();
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates thr
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-3d-extrude" item="code-3d-extrude" />
That writes one file: `compositions/code-3d-extrude.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-3d-extrude preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-3d-extrude.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-3d-extrude" item="code-3d-extrude" />
That writes one file: `compositions/code-3d-extrude.html`.
## Source
<Accordion title={`code-3d-extrude.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "An edit shown as a colored diff — removed lines collapse in red,
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-diff" item="code-diff" />
That writes one file: `compositions/code-diff.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-diff preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-diff.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-diff" item="code-diff" />
That writes one file: `compositions/code-diff.html`.
## Source
<Accordion title={`code-diff.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "A highlight band sweeps across a target line while the surrounding
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-highlight" item="code-highlight" />
That writes one file: `compositions/code-highlight.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-highlight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-highlight" item="code-highlight" />
That writes one file: `compositions/code-highlight.html`.
## Source
<Accordion title={`code-highlight.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "One snippet transforms into another — tokens glide between posit
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-morph" item="code-morph" />
That writes one file: `compositions/code-morph.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-morph preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-morph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-morph" item="code-morph" />
That writes one file: `compositions/code-morph.html`.
## Source
<Accordion title={`code-morph.html`}>
@@ -5,6 +5,12 @@ description: "Thousands of GPU points scatter through space and fly to the exact
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-particle-assemble" item="code-particle-assemble" />
That writes one file: `compositions/code-particle-assemble.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-particle-assemble preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-particle-assemble.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-particle-assemble" item="code-particle-assemble" />
That writes one file: `compositions/code-particle-assemble.html`.
## Source
<Accordion title={`code-particle-assemble.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "The camera scrolls a long file to bring a target line to center an
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-scroll" item="code-scroll" />
That writes one file: `compositions/code-scroll.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-scroll preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-scroll.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-scroll" item="code-scroll" />
That writes one file: `compositions/code-scroll.html`.
## Source
<Accordion title={`code-scroll.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "The code compiles into existence: a GPU fragment shader resolves i
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-shader-dissolve" item="code-shader-dissolve" />
That writes one file: `compositions/code-shader-dissolve.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-shader-dissolve preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-shader-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-shader-dissolve" item="code-shader-dissolve" />
That writes one file: `compositions/code-shader-dissolve.html`.
## Source
<Accordion title={`code-shader-dissolve.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Basic profile: white background, black text, per-ch
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-basic" item="code-snippet-apple-terminal-basic" />
That writes one file: `compositions/code-snippet-apple-terminal-basic.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-basic preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-basic.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-basic" item="code-snippet-apple-terminal-basic" />
That writes one file: `compositions/code-snippet-apple-terminal-basic.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-basic.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Clear Dark profile: semi-transparent dark backgroun
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-dark" item="code-snippet-apple-terminal-clear-dark" />
That writes one file: `compositions/code-snippet-apple-terminal-clear-dark.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-clear-dark preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-clear-dark.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-dark" item="code-snippet-apple-terminal-clear-dark" />
That writes one file: `compositions/code-snippet-apple-terminal-clear-dark.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-clear-dark.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Clear Light profile: semi-transparent light backgro
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-light" item="code-snippet-apple-terminal-clear-light" />
That writes one file: `compositions/code-snippet-apple-terminal-clear-light.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-clear-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-clear-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-light" item="code-snippet-apple-terminal-clear-light" />
That writes one file: `compositions/code-snippet-apple-terminal-clear-light.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-clear-light.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Grass profile: black background with green text, pe
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-grass" item="code-snippet-apple-terminal-grass" />
That writes one file: `compositions/code-snippet-apple-terminal-grass.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-grass preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-grass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-grass" item="code-snippet-apple-terminal-grass" />
That writes one file: `compositions/code-snippet-apple-terminal-grass.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-grass.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Homebrew profile: black background with bright gree
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-homebrew" item="code-snippet-apple-terminal-homebrew" />
That writes one file: `compositions/code-snippet-apple-terminal-homebrew.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-homebrew preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-homebrew.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-homebrew" item="code-snippet-apple-terminal-homebrew" />
That writes one file: `compositions/code-snippet-apple-terminal-homebrew.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-homebrew.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Man Page profile: pale yellow background with black
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-man-page" item="code-snippet-apple-terminal-man-page" />
That writes one file: `compositions/code-snippet-apple-terminal-man-page.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-man-page preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-man-page.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-man-page" item="code-snippet-apple-terminal-man-page" />
That writes one file: `compositions/code-snippet-apple-terminal-man-page.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-man-page.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Novel profile: warm parchment background with dark
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-novel" item="code-snippet-apple-terminal-novel" />
That writes one file: `compositions/code-snippet-apple-terminal-novel.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-novel preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-novel.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-novel" item="code-snippet-apple-terminal-novel" />
That writes one file: `compositions/code-snippet-apple-terminal-novel.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-novel.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Ocean profile: deep blue background with white text
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-ocean" item="code-snippet-apple-terminal-ocean" />
That writes one file: `compositions/code-snippet-apple-terminal-ocean.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-ocean preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-ocean.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-ocean" item="code-snippet-apple-terminal-ocean" />
That writes one file: `compositions/code-snippet-apple-terminal-ocean.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-ocean.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Pro profile: black background with grey text and li
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-pro" item="code-snippet-apple-terminal-pro" />
That writes one file: `compositions/code-snippet-apple-terminal-pro.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-pro preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-pro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-pro" item="code-snippet-apple-terminal-pro" />
That writes one file: `compositions/code-snippet-apple-terminal-pro.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-pro.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Red Sands profile: deep red background with sandy t
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-red-sands" item="code-snippet-apple-terminal-red-sands" />
That writes one file: `compositions/code-snippet-apple-terminal-red-sands.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-red-sands preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-red-sands.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-red-sands" item="code-snippet-apple-terminal-red-sands" />
That writes one file: `compositions/code-snippet-apple-terminal-red-sands.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-red-sands.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Silver Aerogel profile: dark grey background with w
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-silver-aerogel" item="code-snippet-apple-terminal-silver-aerogel" />
That writes one file: `compositions/code-snippet-apple-terminal-silver-aerogel.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-silver-aerogel preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-silver-aerogel" item="code-snippet-apple-terminal-silver-aerogel" />
That writes one file: `compositions/code-snippet-apple-terminal-silver-aerogel.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-silver-aerogel.html`}>
@@ -5,6 +5,12 @@ description: "Apple Terminal Solid Colors profile: deep purple background with w
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-solid-colors" item="code-snippet-apple-terminal-solid-colors" />
That writes one file: `compositions/code-snippet-apple-terminal-solid-colors.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-apple-terminal-solid-colors preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-solid-colors.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-solid-colors" item="code-snippet-apple-terminal-solid-colors" />
That writes one file: `compositions/code-snippet-apple-terminal-solid-colors.html`.
## Source
<Accordion title={`code-snippet-apple-terminal-solid-colors.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Dark
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-dark-2026" item="code-snippet-dark-2026" />
That writes `compositions/code-snippet-dark-2026.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-dark-2026 preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-2026.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-dark-2026" item="code-snippet-dark-2026" />
That writes `compositions/code-snippet-dark-2026.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-dark-2026.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Dark
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-dark-modern" item="code-snippet-dark-modern" />
That writes `compositions/code-snippet-dark-modern.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-dark-modern preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-modern.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-dark-modern" item="code-snippet-dark-modern" />
That writes `compositions/code-snippet-dark-modern.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-dark-modern.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Dark+
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-dark-plus" item="code-snippet-dark-plus" />
That writes `compositions/code-snippet-dark-plus.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-dark-plus preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-plus.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-dark-plus" item="code-snippet-dark-plus" />
That writes `compositions/code-snippet-dark-plus.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-dark-plus.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Discrete code snippets fly in from the side and assemble into a st
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-flight" item="code-snippet-flight" />
That writes one file: `compositions/code-snippet-flight.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-flight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-flight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-flight" item="code-snippet-flight" />
That writes one file: `compositions/code-snippet-flight.html`.
## Source
<Accordion title={`code-snippet-flight.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the High
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-high-contrast-light" item="code-snippet-high-contrast-light" />
That writes `compositions/code-snippet-high-contrast-light.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-high-contrast-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-high-contrast-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-high-contrast-light" item="code-snippet-high-contrast-light" />
That writes `compositions/code-snippet-high-contrast-light.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-high-contrast-light.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the High
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-high-contrast" item="code-snippet-high-contrast" />
That writes `compositions/code-snippet-high-contrast.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-high-contrast preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-high-contrast.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-high-contrast" item="code-snippet-high-contrast" />
That writes `compositions/code-snippet-high-contrast.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-high-contrast.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Light
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-light-2026" item="code-snippet-light-2026" />
That writes `compositions/code-snippet-light-2026.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-light-2026 preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-2026.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-light-2026" item="code-snippet-light-2026" />
That writes `compositions/code-snippet-light-2026.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-light-2026.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Light
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-light-modern" item="code-snippet-light-modern" />
That writes `compositions/code-snippet-light-modern.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-light-modern preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-modern.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-light-modern" item="code-snippet-light-modern" />
That writes `compositions/code-snippet-light-modern.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-light-modern.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Light
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-light-plus" item="code-snippet-light-plus" />
That writes `compositions/code-snippet-light-plus.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-light-plus preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-plus.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-light-plus" item="code-snippet-light-plus" />
That writes `compositions/code-snippet-light-plus.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-light-plus.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Monok
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-monokai" item="code-snippet-monokai" />
That writes `compositions/code-snippet-monokai.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-monokai preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-monokai.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-monokai" item="code-snippet-monokai" />
That writes `compositions/code-snippet-monokai.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-monokai.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Solar
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-solarized-light" item="code-snippet-solarized-light" />
That writes `compositions/code-snippet-solarized-light.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-solarized-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-solarized-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-solarized-light" item="code-snippet-solarized-light" />
That writes `compositions/code-snippet-solarized-light.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-solarized-light.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Visua
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-visual-studio-dark" item="code-snippet-visual-studio-dark" />
That writes `compositions/code-snippet-visual-studio-dark.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-visual-studio-dark preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-visual-studio-dark.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-visual-studio-dark" item="code-snippet-visual-studio-dark" />
That writes `compositions/code-snippet-visual-studio-dark.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-visual-studio-dark.html`}>
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Visua
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-snippet-visual-studio-light" item="code-snippet-visual-studio-light" />
That writes `compositions/code-snippet-visual-studio-light.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-snippet-visual-studio-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-visual-studio-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-snippet-visual-studio-light" item="code-snippet-visual-studio-light" />
That writes `compositions/code-snippet-visual-studio-light.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`code-snippet-visual-studio-light.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Token-streamed typing reveal with a caret that tracks the frontier
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add code-typing" item="code-typing" />
That writes one file: `compositions/code-typing.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="code-typing preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-typing.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add code-typing" item="code-typing" />
That writes one file: `compositions/code-typing.html`.
## Source
<Accordion title={`code-typing.html`}>
+6 -6
View File
@@ -6,6 +6,12 @@ description: "An iridescent soap-bubble planet: a slowly spinning sphere of nebu
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add cosmic-orb" item="cosmic-orb" />
That writes one file: `compositions/cosmic-orb.html`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/cosmic-orb.json"
compositionId="cosmic-orb"
@@ -449,12 +455,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add cosmic-orb" item="cosmic-orb" />
That writes one file: `compositions/cosmic-orb.html`.
## Add it to your video
It runs for 10 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Shader transition with cross-warped morphing"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add cross-warp-morph" item="cross-warp-morph" />
That writes one file: `compositions/cross-warp-morph.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="cross-warp-morph preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/cross-warp-morph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add cross-warp-morph" item="cross-warp-morph" />
That writes one file: `compositions/cross-warp-morph.html`.
## Source
<Accordion title={`cross-warp-morph.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Animated bar + line chart with staggered reveal, NYT-style typogra
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add data-chart" item="data-chart" />
That writes one file: `compositions/data-chart.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="data-chart preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/data-chart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add data-chart" item="data-chart" />
That writes one file: `compositions/data-chart.html`.
## Change the colors
Set these CSS variables on the block:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Shader transition with fractal noise domain warping"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add domain-warp-dissolve" item="domain-warp-dissolve" />
That writes one file: `compositions/domain-warp-dissolve.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="domain-warp-dissolve preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/domain-warp-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add domain-warp-dissolve" item="domain-warp-dissolve" />
That writes one file: `compositions/domain-warp-dissolve.html`.
## Source
<Accordion title={`domain-warp-dissolve.html`}>
@@ -5,6 +5,12 @@ description: "Finite neutral-warm light layers for a seek-safe camera-flash cut
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add editorial-flash-overlay" item="editorial-flash-overlay" />
That writes one file: `compositions/editorial-flash-overlay.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="editorial-flash-overlay preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/editorial-flash-overlay.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add editorial-flash-overlay" item="editorial-flash-overlay" />
That writes one file: `compositions/editorial-flash-overlay.html`.
## Add it to your video
It runs for 4 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Shader transition with white flash crossfade"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add flash-through-white" item="flash-through-white" />
That writes one file: `compositions/flash-through-white.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="flash-through-white preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flash-through-white.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add flash-through-white" item="flash-through-white" />
That writes one file: `compositions/flash-through-white.html`.
## Source
<Accordion title={`flash-through-white.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Portrait animated decision tree with SVG connectors, sticky-note n
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add flowchart-vertical" item="flowchart-vertical" />
That writes one file: `compositions/flowchart-vertical.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="flowchart-vertical preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flowchart-vertical.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add flowchart-vertical" item="flowchart-vertical" />
That writes one file: `compositions/flowchart-vertical.html`.
## Source
<Accordion title={`flowchart-vertical.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Animated decision tree with SVG connectors, sticky-note nodes, cur
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add flowchart" item="flowchart" />
That writes one file: `compositions/flowchart.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="flowchart preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flowchart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add flowchart" item="flowchart" />
That writes one file: `compositions/flowchart.html`.
## Source
<Accordion title={`flowchart.html`}>
@@ -5,6 +5,12 @@ description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add freeze-frame-dressing" item="freeze-frame-dressing" />
That writes one file: `compositions/freeze-frame-dressing.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="freeze-frame-dressing preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/freeze-frame-dressing.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add freeze-frame-dressing" item="freeze-frame-dressing" />
That writes one file: `compositions/freeze-frame-dressing.html`.
## Add it to your video
It runs for 4 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "An infinite corridor of panels: a square tunnel receding to a vani
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add gallery-tunnel" item="gallery-tunnel" />
That writes one file: `compositions/gallery-tunnel.html`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/gallery-tunnel.json"
compositionId="gallery-tunnel"
@@ -472,12 +478,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add gallery-tunnel" item="gallery-tunnel" />
That writes one file: `compositions/gallery-tunnel.html`.
## Add it to your video
It runs for 12 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Shader transition with digital glitch artifacts"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add glitch" item="glitch" />
That writes one file: `compositions/glitch.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="glitch preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/glitch.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add glitch" item="glitch" />
That writes one file: `compositions/glitch.html`.
## Source
<Accordion title={`glitch.html`}>
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Shader transition with gravitational lensing distortion"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add gravitational-lens" item="gravitational-lens" />
That writes one file: `compositions/gravitational-lens.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="gravitational-lens preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/gravitational-lens.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add gravitational-lens" item="gravitational-lens" />
That writes one file: `compositions/gravitational-lens.html`.
## Source
<Accordion title={`gravitational-lens.html`}>
+6 -6
View File
@@ -6,6 +6,12 @@ description: "A full-bleed halftone light field: a grid of dots whose size and c
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add halftone-field" item="halftone-field" />
That writes one file: `compositions/halftone-field.html`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/halftone-field.json"
compositionId="halftone-field"
@@ -396,12 +402,6 @@ void main() {
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add halftone-field" item="halftone-field" />
That writes one file: `compositions/halftone-field.html`.
## Add it to your video
It runs for 10 seconds at 1920×1080. Paste this into your composition:
@@ -5,14 +5,14 @@ description: "A portrait HeyGen offer card pairs a moving avatar mosaic with bol
import { InstallCommand } from "/snippets/install-command.jsx";
<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/heygen-avatar-promo-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.png" autoPlay muted loop playsInline />
## Install
<InstallCommand command="npx hyperframes add heygen-avatar-promo-card" item="heygen-avatar-promo-card" />
That writes `compositions/heygen-avatar-promo-card.html`, plus 15 supporting files under `assets/` and `assets/fonts/`.
<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/heygen-avatar-promo-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.png" autoPlay muted loop playsInline />
## Add it to your video
It runs for 10 seconds at 1080×1920. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Media in a hand-drawn border with corner doodles and a handwritten
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add hw-frame" item="hw-frame" />
That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/fonts/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="hw-frame preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-frame.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add hw-frame" item="hw-frame" />
That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/fonts/`.
## Add it to your video
It runs for 8 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Handwriting flowing along any SVG path with a per-character reveal
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add hw-path-text" item="hw-path-text" />
That writes `compositions/hw-path-text.html`, plus 1 supporting file under `assets/fonts/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="hw-path-text preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-path-text.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add hw-path-text" item="hw-path-text" />
That writes `compositions/hw-path-text.html`, plus 1 supporting file under `assets/fonts/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Wobbled boxes with handwritten labels joined by curved connectors,
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add hw-pipeline" item="hw-pipeline" />
That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `assets/fonts/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="hw-pipeline preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-pipeline.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add hw-pipeline" item="hw-pipeline" />
That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `assets/fonts/`.
## Add it to your video
It runs for 7 seconds at 1920×1080. Paste this into your composition:
@@ -5,6 +5,12 @@ description: "Overlay transition: scribble bands accumulate to cover the frame w
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add hw-scribble-transition" item="hw-scribble-transition" />
That writes one file: `compositions/hw-scribble-transition.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="hw-scribble-transition preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-scribble-transition.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add hw-scribble-transition" item="hw-scribble-transition" />
That writes one file: `compositions/hw-scribble-transition.html`.
## Add it to your video
It runs for 2.2 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Hand-drawn speech bubble with a positionable tail: outline draws o
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add hw-text-cloud" item="hw-text-cloud" />
That writes `compositions/hw-text-cloud.html`, plus 1 supporting file under `assets/fonts/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="hw-text-cloud preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-text-cloud.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add hw-text-cloud" item="hw-text-cloud" />
That writes `compositions/hw-text-cloud.html`, plus 1 supporting file under `assets/fonts/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Handwritten display text with a scalar-driven word-by-word highlig
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add hw-title" item="hw-title" />
That writes `compositions/hw-title.html`, plus 1 supporting file under `assets/fonts/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="hw-title preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-title.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add hw-title" item="hw-title" />
That writes `compositions/hw-title.html`, plus 1 supporting file under `assets/fonts/`.
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+2 -2
View File
@@ -5,14 +5,14 @@ description: "True glyph write-on: filled Caveat letterforms revealed by baked p
import { InstallCommand } from "/snippets/install-command.jsx";
<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/hw-write-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.png" autoPlay muted loop playsInline />
## Install
<InstallCommand command="npx hyperframes add hw-write-title" item="hw-write-title" />
That writes `compositions/hw-write-title.html`, plus 2 supporting files under `assets/baked/` and `assets/fonts/`.
<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/hw-write-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.png" autoPlay muted loop playsInline />
## Add it to your video
It runs for 6 seconds at 1920×1080. Paste this into your composition:
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Animated Instagram follow overlay with profile card and follow but
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add instagram-follow" item="instagram-follow" />
That writes `compositions/instagram-follow.html`, plus 1 supporting file under `assets/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="instagram-follow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/instagram-follow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add instagram-follow" item="instagram-follow" />
That writes `compositions/instagram-follow.html`, plus 1 supporting file under `assets/`.
## Source
<Accordion title={`instagram-follow.html`}>
+2 -2
View File
@@ -5,14 +5,14 @@ description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons
import { InstallCommand } from "/snippets/install-command.jsx";
<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 />
## Install
<InstallCommand command="npx hyperframes add ios26-liquid-glass" item="ios26-liquid-glass" />
That writes `compositions/ios26-liquid-glass.html`, plus 28 supporting files under `models/`, `lib/`, and `assets/icons/`.
<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 />
<Danger>
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
Without it this item's screen renders black. Rendering from the CLI switches
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Shader transition with cinematic light leak overlay"
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add light-leak" item="light-leak" />
That writes one file: `compositions/light-leak.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="light-leak preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/light-leak.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add light-leak" item="light-leak" />
That writes one file: `compositions/light-leak.html`.
## Source
<Accordion title={`light-leak.html`}>
@@ -5,6 +5,12 @@ description: "Frosted glass context menu panel drifting over an aurora shader ba
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add liquid-glass-context-menu" item="liquid-glass-context-menu" />
That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting file under `compositions/lib/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="liquid-glass-context-menu preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-context-menu.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add liquid-glass-context-menu" item="liquid-glass-context-menu" />
That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting file under `compositions/lib/`.
<Danger>
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
Without it this item's screen renders black. Rendering from the CLI switches
@@ -36,7 +36,11 @@ That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting fil
<meta name="viewport" content="width=1920, height=1080" />
<title>Liquid Glass Context Menu</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
crossorigin="anonymous"
></script>
<script src="lib/liquid-glass.iife.js"></script>
<style>
*,
@@ -5,6 +5,12 @@ description: "Frosted glass media control panels spreading over an aurora shader
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add liquid-glass-media-controls" item="liquid-glass-media-controls" />
That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting file under `compositions/lib/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="liquid-glass-media-controls preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-media-controls.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add liquid-glass-media-controls" item="liquid-glass-media-controls" />
That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting file under `compositions/lib/`.
<Danger>
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
Without it this item's screen renders black. Rendering from the CLI switches
@@ -36,7 +36,11 @@ That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting f
<meta name="viewport" content="width=1920, height=1080" />
<title>Liquid Glass Media Controls</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
crossorigin="anonymous"
></script>
<script src="lib/liquid-glass.iife.js"></script>
<style>
*,
@@ -5,6 +5,12 @@ description: "Frosted glass notification cards floating over an aurora shader ba
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add liquid-glass-notification" item="liquid-glass-notification" />
That writes `compositions/liquid-glass-notification.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="liquid-glass-notification preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-notification.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add liquid-glass-notification" item="liquid-glass-notification" />
That writes `compositions/liquid-glass-notification.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
<Danger>
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
Without it this item's screen renders black. Rendering from the CLI switches
@@ -35,7 +35,11 @@ That writes `compositions/liquid-glass-notification.html`, plus 2 supporting fil
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
crossorigin="anonymous"
></script>
<script src="lib/liquid-glass.iife.js"></script>
<style>
* {
+11 -7
View File
@@ -5,6 +5,12 @@ description: "Frosted glass stat cards, showcase panel and pill chips over an au
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add liquid-glass-widgets" item="liquid-glass-widgets" />
That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="liquid-glass-widgets preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-widgets.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add liquid-glass-widgets" item="liquid-glass-widgets" />
That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
<Danger>
Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
Without it this item's screen renders black. Rendering from the CLI switches
@@ -36,7 +36,11 @@ That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files un
<meta name="viewport" content="width=1920, height=1080" />
<title>Liquid Glass Widgets</title>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
crossorigin="anonymous"
></script>
<script src="lib/liquid-glass.iife.js"></script>
<style>
*,
+6 -6
View File
@@ -5,6 +5,12 @@ description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, ta
import { InstallCommand } from "/snippets/install-command.jsx";
## Install
<InstallCommand command="npx hyperframes add logo-outro" item="logo-outro" />
That writes one file: `compositions/logo-outro.html`.
<iframe
className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
title="logo-outro preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/logo-outro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png");document.body.appendChild(p)});<\/script></body></html>`}
/>
## Install
<InstallCommand command="npx hyperframes add logo-outro" item="logo-outro" />
That writes one file: `compositions/logo-outro.html`.
## Change the colors
Set these CSS variables on the block:
+6 -6
View File
@@ -6,6 +6,12 @@ description: "News-style lower third with tight-fit text boxes: white headline b
import { InstallCommand } from "/snippets/install-command.jsx";
import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
## Install
<InstallCommand command="npx hyperframes add lower-third-bild" item="lower-third-bild" />
That writes `compositions/lower-third-bild.html`, plus 2 supporting files under `compositions/assets/fonts/`.
<VariablesExplorer
previewSrc="/public/catalog/blocks/lower-third-bild.json"
compositionId="lower-third-bild"
@@ -169,12 +175,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
</VariablesExplorer>
## Install
<InstallCommand command="npx hyperframes add lower-third-bild" item="lower-third-bild" />
That writes `compositions/lower-third-bild.html`, plus 2 supporting files under `compositions/assets/fonts/`.
## Variables
Every one of these has a default, so the piece works untouched. Set the ones you

Some files were not shown because too many files have changed in this diff Show More