mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
docs: point the skills and the docs site at our own stack
The workflow skills, the CLI reference, and the guides described a vendor's services: a separate account to sign into, a credential file beside the project, a music library and asset search that are not ours, and preview media on a CDN we do not run. Auth is now one Hanzo IAM token in $HANZO_API_KEY, read from Hanzo KMS — one credential for voice, music, sound effects, images, video, the shared catalog, and cloud rendering. The credential guide, the cloud-render pages, and the CLI auth reference all say the same thing, because there is now only one thing to say. Docs previews resolve from the docs site's own /images/ path, produced by our own generator. They are not committed (docs/images/ is ignored), so a deploy must run `bun run generate:catalog-previews` first — the same gap as before, minus a CDN we cannot publish to. Element grounding calls zen-vl through api.hanzo.ai rather than a third-party vision endpoint, and the LUT library builds every look from params, so no look needs a host at all. Command examples read `npx @hanzo/frame` / `hanzo frame` throughout. Three navigation entries left dangling by the rebrand now resolve. The changelog and the weekly archive keep their entries as written and say plainly that pre-port entries describe the upstream product.
This commit is contained in:
zooqueen
@@ -9,14 +9,14 @@ Fitness app product showcase with three floating smartphone screens
|
||||
|
||||
`showcase` `app` `3d`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/app-showcase.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/app-showcase.mp4" poster="/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add app-showcase
|
||||
npx @hanzo/frame add app-showcase
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -14,17 +14,17 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
## Source Prompt
|
||||
|
||||
```text
|
||||
📷Frames by HeyGen Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.
|
||||
📷Frames Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.
|
||||
```
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/apple-money-count.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/apple-money-count.mp4" poster="/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-money-count
|
||||
npx @hanzo/frame add apple-money-count
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -11,14 +11,14 @@ Warm AI creator intro sequence that resolves into an X follow card for @_blue_sw
|
||||
|
||||
Created by [Joe Sai](https://x.com/_blue_sweater_).
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/blue-sweater-intro-video.mp4" poster="/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add blue-sweater-intro-video
|
||||
npx @hanzo/frame add blue-sweater-intro-video
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with chromatic aberration radial split
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/chromatic-radial-split.mp4" poster="/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add chromatic-radial-split
|
||||
npx @hanzo/frame add chromatic-radial-split
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with dramatic zoom blur
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/cinematic-zoom.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/cinematic-zoom.mp4" poster="/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add cinematic-zoom
|
||||
npx @hanzo/frame add cinematic-zoom
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Syntax-highlighted code on a lit, beveled 3D slab that rotates through real spac
|
||||
|
||||
`code` `code-animation` `3d` `webgl` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-3d-extrude.mp4" poster="/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-3d-extrude
|
||||
npx @hanzo/frame add code-3d-extrude
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ An edit shown as a colored diff — removed lines collapse in red, added lines e
|
||||
|
||||
`code` `code-animation` `diff` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-diff.mp4" poster="/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-diff
|
||||
npx @hanzo/frame add code-diff
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ A highlight band sweeps across a target line while the surrounding context dims
|
||||
|
||||
`code` `code-animation` `highlight` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-highlight.mp4" poster="/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-highlight
|
||||
npx @hanzo/frame add code-highlight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ One snippet transforms into another — tokens glide between positions, leavers
|
||||
|
||||
`code` `code-animation` `morph` `refactor` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-morph.mp4" poster="/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-morph
|
||||
npx @hanzo/frame add code-morph
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Thousands of GPU points scatter through space and fly to the exact glyph pixels
|
||||
|
||||
`code` `code-animation` `particles` `gpu` `webgl` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-particle-assemble.mp4" poster="/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-particle-assemble
|
||||
npx @hanzo/frame add code-particle-assemble
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ The camera scrolls a long file to bring a target line to center and spotlights i
|
||||
|
||||
`code` `code-animation` `scroll` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-scroll.mp4" poster="/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-scroll
|
||||
npx @hanzo/frame add code-scroll
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ The code compiles into existence: a GPU fragment shader resolves it out of seede
|
||||
|
||||
`code` `code-animation` `shader` `webgl` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-shader-dissolve.mp4" poster="/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-shader-dissolve
|
||||
npx @hanzo/frame add code-shader-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ macOS Terminal.app window in the built-in Basic profile — clean white backgrou
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-basic
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-basic
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-apple-terminal-basic
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Clear Dark profile — translucent bla
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Clear Dark profile — translucent bla
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-clear-dark
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-clear-dark
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-clear-dark
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ macOS Terminal.app window in the built-in Clear Light profile — translucent wh
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-clear-light
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-clear-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-apple-terminal-clear-light
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ macOS Terminal.app window in the built-in Grass profile — pitch-black backgrou
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-grass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-grass
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-grass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-apple-terminal-grass
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Homebrew profile — black background
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Homebrew profile — black background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-homebrew
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-homebrew
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-homebrew
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ macOS Terminal.app window in the built-in Man Page profile — pale yellow `#FEF
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-man-page.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-man-page
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-man-page
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-apple-terminal-man-page
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-novel.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-novel
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-novel
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-novel
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-ocean.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-ocean
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-ocean
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-ocean
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Pro profile — pure black background
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-pro.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Pro profile — pure black background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-pro
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-pro
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-pro
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-red-sands
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-red-sands
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-red-sands
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-silver-aerogel
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-silver-aerogel
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-silver-aerogel
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,7 +9,7 @@ macOS Terminal.app window in the built-in Solid Colors profile — vivid deep pu
|
||||
|
||||
`code` `developer` `showcase` `terminal` `apple`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png" autoPlay muted loop playsInline />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Solid Colors profile — vivid deep pu
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-apple-terminal-solid-colors
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-solid-colors
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx frames add code-snippet-apple-terminal-solid-colors
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add apple-terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Dark 2026 theme. Fu
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-dark-2026
|
||||
npx @hanzo/frame add code-snippet-dark-2026
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-dark-2026
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Dark Modern theme.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-dark-modern
|
||||
npx @hanzo/frame add code-snippet-dark-modern
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-dark-modern
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Dark+ theme. Full e
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-dark-plus
|
||||
npx @hanzo/frame add code-snippet-dark-plus
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-dark-plus
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ Discrete code snippets fly in from the side and assemble into a stacked program,
|
||||
|
||||
`code` `code-animation` `flight` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-flight.mp4" poster="/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-flight
|
||||
npx @hanzo/frame add code-snippet-flight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the High Contrast Light
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-high-contrast-light
|
||||
npx @hanzo/frame add code-snippet-high-contrast-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-high-contrast-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the High Contrast theme
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-high-contrast
|
||||
npx @hanzo/frame add code-snippet-high-contrast
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-high-contrast
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Light 2026 theme. F
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-light-2026.mp4" poster="/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-light-2026
|
||||
npx @hanzo/frame add code-snippet-light-2026
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-light-2026
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Light Modern theme.
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-light-modern.mp4" poster="/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-light-modern
|
||||
npx @hanzo/frame add code-snippet-light-modern
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-light-modern
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Light+ theme. Full
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-light-plus.mp4" poster="/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-light-plus
|
||||
npx @hanzo/frame add code-snippet-light-plus
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-light-plus
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Monokai theme. Full
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-monokai.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-monokai.mp4" poster="/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-monokai
|
||||
npx @hanzo/frame add code-snippet-monokai
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-monokai
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Solarized Light the
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-solarized-light
|
||||
npx @hanzo/frame add code-snippet-solarized-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-solarized-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Visual Studio Dark
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-visual-studio-dark
|
||||
npx @hanzo/frame add code-snippet-visual-studio-dark
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-visual-studio-dark
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ VS Code workbench with per-character typing animation in the Visual Studio Light
|
||||
|
||||
`code` `developer` `showcase` `vscode`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-snippet-visual-studio-light
|
||||
npx @hanzo/frame add code-snippet-visual-studio-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx frames add code-snippet-visual-studio-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code
|
||||
npx @hanzo/frame add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -9,14 +9,14 @@ Token-streamed typing reveal with a caret that tracks the frontier — determini
|
||||
|
||||
`code` `code-animation` `typing` `developer`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-typing.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/code-typing.mp4" poster="/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add code-typing
|
||||
npx @hanzo/frame add code-typing
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with cross-warped morphing
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/cross-warp-morph.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/cross-warp-morph.mp4" poster="/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add cross-warp-morph
|
||||
npx @hanzo/frame add cross-warp-morph
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated bar + line chart with staggered reveal, NYT-style typography, and value
|
||||
|
||||
`data` `chart` `statistics`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/data-chart.mp4" poster="/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add data-chart
|
||||
npx @hanzo/frame add data-chart
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with fractal noise domain warping
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/domain-warp-dissolve.mp4" poster="/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add domain-warp-dissolve
|
||||
npx @hanzo/frame add domain-warp-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with white flash crossfade
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/flash-through-white.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/flash-through-white.mp4" poster="/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add flash-through-white
|
||||
npx @hanzo/frame add flash-through-white
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor i
|
||||
|
||||
`diagram` `flowchart` `interactive` `portrait`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/flowchart-vertical.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/flowchart-vertical.mp4" poster="/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add flowchart-vertical
|
||||
npx @hanzo/frame add flowchart-vertical
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated decision tree with SVG connectors, sticky-note nodes, cursor interactio
|
||||
|
||||
`diagram` `flowchart` `interactive`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/flowchart.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/flowchart.mp4" poster="/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add flowchart
|
||||
npx @hanzo/frame add flowchart
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with digital glitch artifacts
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/glitch.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/glitch.mp4" poster="/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add glitch
|
||||
npx @hanzo/frame add glitch
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with gravitational lensing distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/gravitational-lens.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/gravitational-lens.mp4" poster="/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add gravitational-lens
|
||||
npx @hanzo/frame add gravitational-lens
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated Instagram follow overlay with profile card and follow button
|
||||
|
||||
`social` `overlay` `instagram`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/instagram-follow.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/instagram-follow.mp4" poster="/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add instagram-follow
|
||||
npx @hanzo/frame add instagram-follow
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ios26-liquid-glass.mp4" poster="/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add ios26-liquid-glass
|
||||
npx @hanzo/frame add ios26-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with cinematic light leak overlay
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/light-leak.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/light-leak.mp4" poster="/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add light-leak
|
||||
npx @hanzo/frame add light-leak
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ Frosted glass context menu panel drifting over an aurora shader background
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/liquid-glass-context-menu.mp4" poster="/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add liquid-glass-context-menu
|
||||
npx @hanzo/frame add liquid-glass-context-menu
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ Frosted glass media control panels spreading over an aurora shader background
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add liquid-glass-media-controls
|
||||
npx @hanzo/frame add liquid-glass-media-controls
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ Frosted glass notification cards floating over an aurora shader background
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/liquid-glass-notification.mp4" poster="/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add liquid-glass-notification
|
||||
npx @hanzo/frame add liquid-glass-notification
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ Frosted glass stat cards, showcase panel and pill chips over an aurora shader ba
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/liquid-glass-widgets.mp4" poster="/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add liquid-glass-widgets
|
||||
npx @hanzo/frame add liquid-glass-widgets
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in,
|
||||
|
||||
`branding` `outro` `logo`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/logo-outro.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/logo-outro.mp4" poster="/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add logo-outro
|
||||
npx @hanzo/frame add logo-outro
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ News-style lower third with tight-fit text boxes: white headline bar with red dr
|
||||
|
||||
`broadcast` `lower-third` `news` `overlay`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lower-third-bild.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lower-third-bild.mp4" poster="/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lower-third-bild
|
||||
npx @hanzo/frame add lower-third-bild
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Cardless lower third for footage overlay: name rises, an accent rule draws left-
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-accent-underline.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-accent-underline.mp4" poster="/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-accent-underline
|
||||
npx @hanzo/frame add lt-accent-underline
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ High-energy podcast lower third: solid dark block wipes in, uppercase name slams
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-bold-block.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-bold-block.mp4" poster="/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-bold-block
|
||||
npx @hanzo/frame add lt-bold-block
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Minimal white-card lower third for podcasts/interviews: accent tab, name + role,
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-clean-bar.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-clean-bar.mp4" poster="/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-clean-bar
|
||||
npx @hanzo/frame add lt-clean-bar
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ High-energy lower third: bold accent-color block slides in with overshoot, conde
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-color-block.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-color-block.mp4" poster="/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-color-block
|
||||
npx @hanzo/frame add lt-color-block
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Charcoal card lower third for bright footage: name, drawn accent underline, role
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `dark`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-dark-card.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-dark-card.mp4" poster="/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-dark-card
|
||||
npx @hanzo/frame add lt-dark-card
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-kicker-name.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-kicker-name.mp4" poster="/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-kicker-name
|
||||
npx @hanzo/frame add lt-kicker-name
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-mask-reveal.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-mask-reveal.mp4" poster="/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-mask-reveal
|
||||
npx @hanzo/frame add lt-mask-reveal
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Cardless lower third with a vertical accent bar; condensed display name + mono r
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-side-rule.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-side-rule.mp4" poster="/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-side-rule
|
||||
npx @hanzo/frame add lt-side-rule
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Rounded white pill lower third for podcasts/interviews: status dot, name + role,
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `minimal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-soft-pill.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-soft-pill.mp4" poster="/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-soft-pill
|
||||
npx @hanzo/frame add lt-soft-pill
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes
|
||||
|
||||
`lower-third` `overlay` `podcast` `interview` `bold`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-stack-bars.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/lt-stack-bars.mp4" poster="/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add lt-stack-bars
|
||||
npx @hanzo/frame add lt-stack-bars
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated macOS-style notification banner with app icon and message
|
||||
|
||||
`social` `overlay` `notification`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/macos-notification.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/macos-notification.mp4" poster="/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add macos-notification
|
||||
npx @hanzo/frame add macos-notification
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finde
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add macos-tahoe-liquid-glass
|
||||
npx @hanzo/frame add macos-tahoe-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Premium broadcast-style lower-third ticker with live label, headline ribbon, and
|
||||
|
||||
`lower-third` `overlay` `news` `ticker`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/news-ticker.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/news-ticker.mp4" poster="/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add news-ticker
|
||||
npx @hanzo/frame add news-ticker
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -14,17 +14,17 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
## Source Prompt
|
||||
|
||||
```text
|
||||
use 📷Frames by HeyGen and Image Gen if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe
|
||||
use 📷Frames and image generation if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe
|
||||
```
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/north-korea-locked-down.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/north-korea-locked-down.mp4" poster="/images/catalog/blocks/north-korea-locked-down.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add north-korea-locked-down
|
||||
npx @hanzo/frame add north-korea-locked-down
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -14,17 +14,17 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
## Source Prompt
|
||||
|
||||
```text
|
||||
📷Frames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.
|
||||
📷Frames Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.
|
||||
```
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/nyc-paris-flight.mp4" poster="/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add nyc-paris-flight
|
||||
npx @hanzo/frame add nyc-paris-flight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated Reddit post card overlay with upvotes and comments
|
||||
|
||||
`social` `overlay` `reddit`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/reddit-post.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/reddit-post.mp4" poster="/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add reddit-post
|
||||
npx @hanzo/frame add reddit-post
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with ridged turbulence burn effect
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ridged-burn.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ridged-burn.mp4" poster="/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add ridged-burn
|
||||
npx @hanzo/frame add ridged-burn
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with concentric ripple wave distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ripple-waves.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ripple-waves.mp4" poster="/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add ripple-waves
|
||||
npx @hanzo/frame add ripple-waves
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with signed distance field iris reveal
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/sdf-iris.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/sdf-iris.mp4" poster="/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add sdf-iris
|
||||
npx @hanzo/frame add sdf-iris
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated Spain choropleth by autonomous community with staggered reveals and gra
|
||||
|
||||
`data` `map` `geography` `spain` `europe` `choropleth`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/spain-map.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/spain-map.mp4" poster="/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add spain-map
|
||||
npx @hanzo/frame add spain-map
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated Spotify now-playing card with album art and progress bar
|
||||
|
||||
`social` `overlay` `spotify`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/spotify-card.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/spotify-card.mp4" poster="/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add spotify-card
|
||||
npx @hanzo/frame add spotify-card
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with swirling vortex distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/swirl-vortex.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/swirl-vortex.mp4" poster="/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add swirl-vortex
|
||||
npx @hanzo/frame add swirl-vortex
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Shader transition with heat haze thermal distortion
|
||||
|
||||
`transition` `shader`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/thermal-distortion.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/thermal-distortion.mp4" poster="/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add thermal-distortion
|
||||
npx @hanzo/frame add thermal-distortion
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated TikTok follow overlay with profile card and follow button
|
||||
|
||||
`social` `overlay` `tiktok`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/tiktok-follow.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/tiktok-follow.mp4" poster="/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add tiktok-follow
|
||||
npx @hanzo/frame add tiktok-follow
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of 3D perspective flip and rotate transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-3d.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-3d.mp4" poster="/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-3d
|
||||
npx @hanzo/frame add transitions-3d
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of blur-based transitions between scenes
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-blur.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-blur.mp4" poster="/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-blur
|
||||
npx @hanzo/frame add transitions-blur
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of cover/uncover slide transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-cover.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-cover.mp4" poster="/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-cover
|
||||
npx @hanzo/frame add transitions-cover
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of destructive break-apart transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-destruction.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-destruction.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-destruction.mp4" poster="/images/catalog/blocks/transitions-destruction.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-destruction
|
||||
npx @hanzo/frame add transitions-destruction
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of dissolve and fade transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-dissolve.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-dissolve.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-dissolve.mp4" poster="/images/catalog/blocks/transitions-dissolve.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-dissolve
|
||||
npx @hanzo/frame add transitions-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of warp and distortion transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-distortion.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-distortion.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-distortion.mp4" poster="/images/catalog/blocks/transitions-distortion.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-distortion
|
||||
npx @hanzo/frame add transitions-distortion
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of grid-based tile transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-grid.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-grid.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-grid.mp4" poster="/images/catalog/blocks/transitions-grid.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-grid
|
||||
npx @hanzo/frame add transitions-grid
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of light-based glow and flash transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-light.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-light.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-light.mp4" poster="/images/catalog/blocks/transitions-light.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-light
|
||||
npx @hanzo/frame add transitions-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of mechanical shutter and iris transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-mechanical.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-mechanical.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-mechanical.mp4" poster="/images/catalog/blocks/transitions-mechanical.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-mechanical
|
||||
npx @hanzo/frame add transitions-mechanical
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of miscellaneous creative transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-other.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-other.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-other.mp4" poster="/images/catalog/blocks/transitions-other.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-other
|
||||
npx @hanzo/frame add transitions-other
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of push and slide transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-push.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-push.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-push.mp4" poster="/images/catalog/blocks/transitions-push.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-push
|
||||
npx @hanzo/frame add transitions-push
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of radial wipe and reveal transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-radial.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-radial.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-radial.mp4" poster="/images/catalog/blocks/transitions-radial.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-radial
|
||||
npx @hanzo/frame add transitions-radial
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Showcase of scale and zoom transitions
|
||||
|
||||
`transition` `showcase`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-scale.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/transitions-scale.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/transitions-scale.mp4" poster="/images/catalog/blocks/transitions-scale.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add transitions-scale
|
||||
npx @hanzo/frame add transitions-scale
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Perspective 3D reveal animation for UI elements
|
||||
|
||||
`showcase` `3d` `reveal`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/ui-3d-reveal.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ui-3d-reveal.mp4" poster="/images/catalog/blocks/ui-3d-reveal.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add ui-3d-reveal
|
||||
npx @hanzo/frame add ui-3d-reveal
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated US bubble map with proportional city markers, value callouts, and conne
|
||||
|
||||
`data` `map` `geography` `usa` `bubble` `cities`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map-bubble.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map-bubble.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/us-map-bubble.mp4" poster="/images/catalog/blocks/us-map-bubble.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add us-map-bubble
|
||||
npx @hanzo/frame add us-map-bubble
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated connection arcs between US cities over a base map — composable origin
|
||||
|
||||
`data` `map` `geography` `usa` `flow` `connections` `arcs`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map-flow.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map-flow.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/us-map-flow.mp4" poster="/images/catalog/blocks/us-map-flow.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add us-map-flow
|
||||
npx @hanzo/frame add us-map-flow
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated hexagonal tile grid map — each state as an equal-weight hex with data
|
||||
|
||||
`data` `map` `geography` `usa` `hexgrid` `tilegrid`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map-hex.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map-hex.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/us-map-hex.mp4" poster="/images/catalog/blocks/us-map-hex.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add us-map-hex
|
||||
npx @hanzo/frame add us-map-hex
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -9,14 +9,14 @@ Animated US choropleth map with staggered state reveals, value labels, and gradi
|
||||
|
||||
`data` `map` `geography` `usa` `choropleth`
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/us-map.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/us-map.mp4" poster="/images/catalog/blocks/us-map.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add us-map
|
||||
npx @hanzo/frame add us-map
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas scre
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/vfx-iphone-device.mp4" poster="/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add vfx-iphone-device
|
||||
npx @hanzo/frame add vfx-iphone-device
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ Organic liquid simulation with vertex displacement on a subdivided plane. HTML c
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/vfx-liquid-background.mp4" poster="/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add vfx-liquid-background
|
||||
npx @hanzo/frame add vfx-liquid-background
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -13,14 +13,14 @@ VFX composition block
|
||||
**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
|
||||
</Warning>
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/frames-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/vfx-liquid-glass.mp4" poster="/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx frames add vfx-liquid-glass
|
||||
npx @hanzo/frame add vfx-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user