mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
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:
@@ -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:
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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 +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:
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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 +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:
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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 +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:
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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 +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:
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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 +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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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:
|
||||
|
||||
@@ -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`}>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
* {
|
||||
|
||||
@@ -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>
|
||||
*,
|
||||
|
||||
@@ -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 +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
Reference in New Issue
Block a user