mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
frames: publish the toolchain as @hanzo/frames
@hanzo/frame is taken by the hero video primitive — one full-bleed video element — which has held that name on npm since it shipped. This repo is the video toolchain: a CLI, a renderer, a studio, a player. Plural is what it is, so the CLI publishes as @hanzo/frames and the workspace packages follow it (@hanzo/frames-core, @hanzo/frames-engine, and the rest). The binary stays `frames`, and now actually ships. The manifest mapped it to bin/frames.mjs while the file on disk was bin/hyperframes.mjs, so a global install produced no working command. The paths that name a package to fetch were pointing elsewhere. The update check read registry.npmjs.org/frames, a different author's package, and the npm, bun and pnpm installers would have pulled it over the CLI; the render image installed the upstream hyperframes; scaffolded projects and the docs pinned the unscoped name. All of them now name @hanzo/frames.
This commit is contained in:
zooqueen
@@ -10,7 +10,7 @@ separate namespaces, on purpose:
|
||||
(weekly changelog videos, doctrine-heavy authoring flows). Codex CLI's
|
||||
project-local skill dir.
|
||||
- `skills/` — **marketplace-distributable**, installed into other
|
||||
projects via `npx @hanzo/frame skills` or `npx skills add
|
||||
projects via `npx @hanzo/frames skills` or `npx skills add
|
||||
hanzoai/frames`.
|
||||
|
||||
## Weekly changelog video
|
||||
|
||||
@@ -135,7 +135,7 @@ scaffold.
|
||||
1. `bun run --cwd packages/cli frames check` (or the installed
|
||||
`frames` CLI from the repo-local `skills/frames-cli/` skill) —
|
||||
0 errors (contrast: dim text ≥ .66 alpha). Do NOT reach for
|
||||
`npx @hanzo/frame@latest`; the tracked repo-local CLI is the source of
|
||||
`npx @hanzo/frames@latest`; the tracked repo-local CLI is the source of
|
||||
truth for the composition contract this skill produces against.
|
||||
2. `seam-gate.mjs verify` — 0 fail.
|
||||
3. Restart the preview server (it caches the bundle), spot-check 3-4 beats
|
||||
|
||||
@@ -9,7 +9,7 @@ manifested by `.claude-plugin/`). Two separate namespaces, on purpose:
|
||||
changelog videos, doctrine-heavy authoring flows). Claude Code's
|
||||
project-local skill dir.
|
||||
- `skills/` — **marketplace-distributable**, installed into other projects
|
||||
via `npx @hanzo/frame skills` or `npx skills add hanzoai/frames`.
|
||||
via `npx @hanzo/frames skills` or `npx skills add hanzoai/frames`.
|
||||
|
||||
## Weekly changelog video
|
||||
|
||||
|
||||
@@ -135,7 +135,7 @@ scaffold.
|
||||
1. `bun run --cwd packages/cli frames check` (or the installed
|
||||
`frames` CLI from the repo-local `skills/frames-cli/` skill) —
|
||||
0 errors (contrast: dim text ≥ .66 alpha). Do NOT reach for
|
||||
`npx @hanzo/frame@latest`; the tracked repo-local CLI is the source of
|
||||
`npx @hanzo/frames@latest`; the tracked repo-local CLI is the source of
|
||||
truth for the composition contract this skill produces against.
|
||||
2. `seam-gate.mjs verify` — 0 fail.
|
||||
3. Restart the preview server (it caches the bundle), spot-check 3-4 beats
|
||||
|
||||
@@ -8,7 +8,7 @@ body:
|
||||
Thanks for taking the time to report a bug! Before filing, please:
|
||||
- Search [existing issues](https://git.hanzo.ai/hanzoai/frames/issues) to avoid duplicates
|
||||
- Make sure the issue reproduces without custom extensions or plugins
|
||||
- Test on the latest version (`npx @hanzo/frame upgrade`)
|
||||
- Test on the latest version (`npx @hanzo/frames upgrade`)
|
||||
|
||||
- type: textarea
|
||||
id: description
|
||||
@@ -25,7 +25,7 @@ body:
|
||||
description: |
|
||||
A link to a **public** GitHub repository with a minimal reproduction of the issue.
|
||||
|
||||
Start from a clean project with `npx @hanzo/frame init repro --non-interactive --example blank`, make only the changes needed to demonstrate the bug, push to a public repo, and paste the link here.
|
||||
Start from a clean project with `npx @hanzo/frames init repro --non-interactive --example blank`, make only the changes needed to demonstrate the bug, push to a public repo, and paste the link here.
|
||||
|
||||
**Issues without a minimal reproduction may be closed.** A reproduction helps us diagnose and fix your issue faster — often in hours instead of days.
|
||||
placeholder: "https://github.com/username/my-frames-repro"
|
||||
@@ -39,7 +39,7 @@ body:
|
||||
description: Step-by-step instructions using the linked reproduction.
|
||||
placeholder: |
|
||||
1. Clone the repo above
|
||||
2. Run `npx @hanzo/frame render`
|
||||
2. Run `npx @hanzo/frames render`
|
||||
3. See error...
|
||||
validations:
|
||||
required: true
|
||||
@@ -64,7 +64,7 @@ body:
|
||||
id: environment
|
||||
attributes:
|
||||
label: Environment
|
||||
description: Run `npx @hanzo/frame doctor` and paste the output here.
|
||||
description: Run `npx @hanzo/frames doctor` and paste the output here.
|
||||
render: shell
|
||||
placeholder: |
|
||||
✓ Version 0.x.x (latest)
|
||||
|
||||
@@ -7,7 +7,7 @@ Open-source video rendering framework: write HTML, render video.
|
||||
This repo ships 19 AI agent skills via [vercel-labs/skills](https://github.com/vercel-labs/skills). Install them before writing compositions — they encode framework-specific patterns that generic docs don't cover. **Default to the core set**: the `/frames` router installs each creation workflow on demand; install all 19 only when the user explicitly asks for the full set.
|
||||
|
||||
```bash
|
||||
npx @hanzo/frame skills update # default: installs/refreshes the core set — workflows install on demand
|
||||
npx @hanzo/frames skills update # default: installs/refreshes the core set — workflows install on demand
|
||||
npx skills add hanzoai/frames --full-depth # interactive picker (terminal only — non-interactive without --skill installs all 19)
|
||||
npx skills add hanzoai/frames --all --full-depth # all 19 at once — only on explicit request
|
||||
npx skills add hanzoai/frames --skill <name> --full-depth # just one (bare name, no leading slash)
|
||||
@@ -80,8 +80,8 @@ Always lint and format changed files before committing. Lefthook pre-commit hook
|
||||
After creating or editing any `.html` composition:
|
||||
|
||||
```bash
|
||||
npx @hanzo/frame lint # Static HTML structure check
|
||||
npx @hanzo/frame check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
npx @hanzo/frames lint # Static HTML structure check
|
||||
npx @hanzo/frames check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
```
|
||||
|
||||
Both must pass before previewing or considering work complete.
|
||||
|
||||
+12
-12
@@ -23,9 +23,9 @@ bun run format:check # Check formatting
|
||||
### Running Tests
|
||||
|
||||
```bash
|
||||
bun run --filter @hanzo/frame-core test # Core unit tests (vitest)
|
||||
bun run --filter @hanzo/frame-engine test # Engine unit tests (vitest)
|
||||
bun run --filter @hanzo/frame-core test:hyperframe-runtime-ci # Runtime contract tests
|
||||
bun run --filter @hanzo/frames-core test # Core unit tests (vitest)
|
||||
bun run --filter @hanzo/frames-engine test # Engine unit tests (vitest)
|
||||
bun run --filter @hanzo/frames-core test:hyperframe-runtime-ci # Runtime contract tests
|
||||
```
|
||||
|
||||
### Linting & Formatting
|
||||
@@ -94,7 +94,7 @@ Blocks don't need `demo.html` — they are already standalone compositions.
|
||||
1. Create `registry/<blocks|components>/<name>/registry-item.json` following the [schema](packages/core/schemas/registry-item.json)
|
||||
2. Add the item to `registry/registry.json`
|
||||
3. For components: include a `demo.html`
|
||||
4. Run `npx @hanzo/frame lint` and `npx @hanzo/frame check` on your HTML
|
||||
4. Run `npx @hanzo/frames lint` and `npx @hanzo/frames check` on your HTML
|
||||
5. Test the install flow: `frames add <name> --dir /tmp/test-project`
|
||||
|
||||
### Auto-generated docs
|
||||
@@ -124,13 +124,13 @@ The script wipes `docs/catalog/` before regenerating, so deleted items are autom
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
| ----------------------- | ------------------------------------------- |
|
||||
| `@hanzo/frame-core` | Types, HTML generation, runtime, linter |
|
||||
| `@hanzo/frame-engine` | Seekable page-to-video capture engine |
|
||||
| `@hanzo/frame-producer` | Full rendering pipeline (capture + encode) |
|
||||
| `@hanzo/frame-studio` | Composition editor UI |
|
||||
| `@hanzo/frame` | CLI for creating, previewing, and rendering |
|
||||
| Package | Description |
|
||||
| ------------------------ | ------------------------------------------- |
|
||||
| `@hanzo/frames-core` | Types, HTML generation, runtime, linter |
|
||||
| `@hanzo/frames-engine` | Seekable page-to-video capture engine |
|
||||
| `@hanzo/frames-producer` | Full rendering pipeline (capture + encode) |
|
||||
| `@hanzo/frames-studio` | Composition editor UI |
|
||||
| `@hanzo/frames` | CLI for creating, previewing, and rendering |
|
||||
|
||||
## Releasing (Maintainers)
|
||||
|
||||
@@ -164,7 +164,7 @@ bun run set-version 0.2.0-rc.1 # release candidate (--tag rc)
|
||||
bun run set-version 0.2.0 # final stable release (--tag latest)
|
||||
```
|
||||
|
||||
Consumers install pre-releases with `npm install @hanzo/frame-core@alpha` (or `@beta`, `@rc`). The `latest` tag is never touched by pre-releases, so `npm install @hanzo/frame-core` always gets the last stable version.
|
||||
Consumers install pre-releases with `npm install @hanzo/frames-core@alpha` (or `@beta`, `@rc`). The `latest` tag is never touched by pre-releases, so `npm install @hanzo/frames-core` always gets the last stable version.
|
||||
|
||||
Pre-releases also create GitHub Releases marked as **pre-release**.
|
||||
|
||||
|
||||
+1
-1
@@ -90,7 +90,7 @@ window.__timelines["my-video"] = tl;
|
||||
After CLI commands, show what the user should see:
|
||||
|
||||
```bash
|
||||
npx @hanzo/frame preview
|
||||
npx @hanzo/frames preview
|
||||
# ✓ Server running at http://localhost:3000
|
||||
# ✓ Watching for changes...
|
||||
```
|
||||
|
||||
+2
-2
@@ -108,11 +108,11 @@ COPY packages/studio-server/ packages/studio-server/
|
||||
COPY packages/core/ packages/core/
|
||||
|
||||
# Build workspace packages so "node" export conditions resolve to built dist
|
||||
RUN bun run --filter '@hanzo/{frame-parsers,frame-lint,frame-studio-server}' build \
|
||||
RUN bun run --filter '@hanzo/{frames-parsers,frames-lint,frames-studio-server}' build \
|
||||
&& bun run --cwd packages/core build
|
||||
|
||||
# Build core runtime artifacts (needed by renderer)
|
||||
RUN bun run --filter @hanzo/frame-core build:frames-runtime:modular
|
||||
RUN bun run --filter @hanzo/frames-core build:frames-runtime:modular
|
||||
|
||||
# Nothing above reads these, so they land after the core build to keep it cached.
|
||||
COPY packages/engine/ packages/engine/
|
||||
|
||||
@@ -7,7 +7,7 @@ Open-source video rendering framework: write HTML, render video.
|
||||
This repo ships AI agent skills via [vercel-labs/skills](https://github.com/vercel-labs/skills). Install them before writing compositions — they encode framework-specific patterns that generic docs don't cover. **Default to the core set** — the `/frames` router installs each creation workflow on demand; install everything only when the user explicitly asks for the full set.
|
||||
|
||||
```bash
|
||||
npx @hanzo/frame skills update # default: installs/refreshes the core set — workflows install on demand
|
||||
npx @hanzo/frames skills update # default: installs/refreshes the core set — workflows install on demand
|
||||
npx skills add hanzoai/frames --full-depth # interactive picker (terminal only — non-interactive without --skill installs everything)
|
||||
```
|
||||
|
||||
@@ -50,8 +50,8 @@ Always lint and format changed files before committing. Lefthook pre-commit hook
|
||||
After creating or editing any `.html` composition:
|
||||
|
||||
```bash
|
||||
npx @hanzo/frame lint # Static HTML structure check
|
||||
npx @hanzo/frame check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
npx @hanzo/frames lint # Static HTML structure check
|
||||
npx @hanzo/frames check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
```
|
||||
|
||||
Both must pass before previewing or considering work complete.
|
||||
|
||||
@@ -7,8 +7,8 @@
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/@hanzo/frame"><img src="https://img.shields.io/npm/v/@hanzo/frame.svg?style=flat" alt="npm version"></a>
|
||||
<a href="https://www.npmjs.com/package/@hanzo/frame"><img src="https://img.shields.io/npm/dm/@hanzo/frame.svg?style=flat" alt="npm downloads"></a>
|
||||
<a href="https://www.npmjs.com/package/@hanzo/frames"><img src="https://img.shields.io/npm/v/@hanzo/frames.svg?style=flat" alt="npm version"></a>
|
||||
<a href="https://www.npmjs.com/package/@hanzo/frames"><img src="https://img.shields.io/npm/dm/@hanzo/frames.svg?style=flat" alt="npm downloads"></a>
|
||||
<a href="LICENSE"><img src="https://img.shields.io/badge/license-Apache%202.0-blue.svg" alt="License"></a>
|
||||
<a href="https://nodejs.org"><img src="https://img.shields.io/badge/node-%3E%3D22-brightgreen" alt="Node.js"></a>
|
||||
</p>
|
||||
@@ -39,7 +39,7 @@ Install the Frames skills, then describe the video you want:
|
||||
npx skills add hanzoai/frames --full-depth
|
||||
```
|
||||
|
||||
> The picker opens with nothing pre-selected — the **Core Skills** group is all you need: the `/frames` router installs each creation workflow on demand. Agents and non-interactive runs should use `npx @hanzo/frame skills update` instead — it installs exactly the core set, whereas a non-interactive `skills add` without `--skill` installs all 19.
|
||||
> The picker opens with nothing pre-selected — the **Core Skills** group is all you need: the `/frames` router installs each creation workflow on demand. Agents and non-interactive runs should use `npx @hanzo/frames skills update` instead — it installs exactly the core set, whereas a non-interactive `skills add` without `--skill` installs all 19.
|
||||
>
|
||||
> `--full-depth` does a full clone of the repo's current `main`. Without it, `skills add` fetches the skills.sh registry blob, which lags `main` by hours — you'd get an older copy of a skill. (`frames skills update` already installs full-depth.)
|
||||
|
||||
@@ -53,9 +53,9 @@ The skills teach agents the Frames production loop: plan the video, write valid
|
||||
|
||||
Frames ships 19 skills agents load on demand. Read `/frames` first — it's the router and capability map; it picks a workflow for any "make me a…" request — video, deck, or composition port — and points to the domain skills below.
|
||||
|
||||
Default to the **core set** — the router installs each creation workflow on demand. `npx @hanzo/frame skills update` installs exactly that from anywhere; the interactive picker (`npx skills add hanzoai/frames --full-depth`) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without `--skill` installs all 19. Use `npx skills add hanzoai/frames --all --full-depth` to install all 19 deliberately (skips the picker), or `npx skills add hanzoai/frames --skill <name> --full-depth` for just one (bare name, no leading `/`). Keep `--full-depth` — it installs the current `main`; without it `skills add` fetches the skills.sh blob, which lags by hours.
|
||||
Default to the **core set** — the router installs each creation workflow on demand. `npx @hanzo/frames skills update` installs exactly that from anywhere; the interactive picker (`npx skills add hanzoai/frames --full-depth`) lists it as the "Core Skills" group, nothing pre-selected. The picker is interactive-only — a non-interactive or agent run without `--skill` installs all 19. Use `npx skills add hanzoai/frames --all --full-depth` to install all 19 deliberately (skips the picker), or `npx skills add hanzoai/frames --skill <name> --full-depth` for just one (bare name, no leading `/`). Keep `--full-depth` — it installs the current `main`; without it `skills add` fetches the skills.sh blob, which lags by hours.
|
||||
|
||||
Installs stay lean after that: `npx @hanzo/frame init` keeps the **core set** fresh (the router, the `frames-*` domain skills, and `media-use` — plus whatever is already installed; `/figma` stays on demand) and never expands a partial install; the creation workflows install **on demand** — the router runs `npx @hanzo/frame skills update <workflow>` before entering one. Nothing re-pulls the full set behind your back.
|
||||
Installs stay lean after that: `npx @hanzo/frames init` keeps the **core set** fresh (the router, the `frames-*` domain skills, and `media-use` — plus whatever is already installed; `/figma` stays on demand) and never expands a partial install; the creation workflows install **on demand** — the router runs `npx @hanzo/frames skills update <workflow>` before entering one. Nothing re-pulls the full set behind your back.
|
||||
|
||||
### Upload to Codex
|
||||
|
||||
@@ -108,10 +108,10 @@ For visual design handoff workflows, see the [Claude Design guide](https://frame
|
||||
### Manually with the CLI
|
||||
|
||||
```bash
|
||||
npx @hanzo/frame init my-video
|
||||
npx @hanzo/frames init my-video
|
||||
cd my-video
|
||||
npx @hanzo/frame preview # preview in browser with live reload
|
||||
npx @hanzo/frame render # render to MP4
|
||||
npx @hanzo/frames preview # preview in browser with live reload
|
||||
npx @hanzo/frames render # render to MP4
|
||||
```
|
||||
|
||||
**Requirements:** Node.js 22+, FFmpeg
|
||||
@@ -192,9 +192,9 @@ Frames is the open-source rendering engine, plus a growing set of tools around H
|
||||
Install ready-to-use blocks and components:
|
||||
|
||||
```bash
|
||||
npx @hanzo/frame add flash-through-white # shader transition
|
||||
npx @hanzo/frame add instagram-follow # social overlay
|
||||
npx @hanzo/frame add data-chart # animated chart
|
||||
npx @hanzo/frames add flash-through-white # shader transition
|
||||
npx @hanzo/frames add instagram-follow # social overlay
|
||||
npx @hanzo/frames add data-chart # animated chart
|
||||
```
|
||||
|
||||
Browse the catalog at [frames.hanzo.ai/catalog](https://frames.hanzo.ai/catalog/blocks/data-chart).
|
||||
@@ -237,16 +237,16 @@ Full documentation: [frames.hanzo.ai/introduction](https://frames.hanzo.ai/intro
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
| ---------------------------------------------------------------- | ----------------------------------------------------------------- |
|
||||
| [`@hanzo/frame`](packages/cli) | CLI for creating, previewing, linting, and rendering compositions |
|
||||
| [`@hanzo/frame-core`](packages/core) | Types, parsers, generators, linter, runtime, and frame adapters |
|
||||
| [`@hanzo/frame-engine`](packages/engine) | Seekable page-to-video capture engine using Puppeteer and FFmpeg |
|
||||
| [`@hanzo/frame-producer`](packages/producer) | Full rendering pipeline for capture, encode, and audio mix |
|
||||
| [`@hanzo/frame-studio`](packages/studio) | Browser-based composition editor UI |
|
||||
| [`@hanzo/frame-player`](packages/player) | Embeddable `<frames-player>` web component |
|
||||
| [`@hanzo/frame-shader-transitions`](packages/shader-transitions) | WebGL shader transitions for compositions |
|
||||
| [`@hanzo/frame-aws-lambda`](packages/aws-lambda) | AWS Lambda SDK and deployment surface for distributed renders |
|
||||
| Package | Description |
|
||||
| ----------------------------------------------------------------- | ----------------------------------------------------------------- |
|
||||
| [`@hanzo/frames`](packages/cli) | CLI for creating, previewing, linting, and rendering compositions |
|
||||
| [`@hanzo/frames-core`](packages/core) | Types, parsers, generators, linter, runtime, and frame adapters |
|
||||
| [`@hanzo/frames-engine`](packages/engine) | Seekable page-to-video capture engine using Puppeteer and FFmpeg |
|
||||
| [`@hanzo/frames-producer`](packages/producer) | Full rendering pipeline for capture, encode, and audio mix |
|
||||
| [`@hanzo/frames-studio`](packages/studio) | Browser-based composition editor UI |
|
||||
| [`@hanzo/frames-player`](packages/player) | Embeddable `<frames-player>` web component |
|
||||
| [`@hanzo/frames-shader-transitions`](packages/shader-transitions) | WebGL shader transitions for compositions |
|
||||
| [`@hanzo/frames-aws-lambda`](packages/aws-lambda) | AWS Lambda SDK and deployment surface for distributed renders |
|
||||
|
||||
## Community
|
||||
|
||||
|
||||
+1
-1
@@ -23,4 +23,4 @@ We will acknowledge receipt within 48 hours and aim to provide a fix or mitigati
|
||||
|
||||
## Scope
|
||||
|
||||
This policy applies to the `@hanzo/frame` packages and the code in this repository.
|
||||
This policy applies to the `@hanzo/frames` packages and the code in this repository.
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^20.5.0",
|
||||
"@commitlint/config-conventional": "^20.5.0",
|
||||
"@hanzo/frame-player": "workspace:*",
|
||||
"@hanzo/frames-player": "workspace:*",
|
||||
"@types/node": "^25.0.10",
|
||||
"concurrently": "^8.2.0",
|
||||
"fallow": "^2.75.0",
|
||||
@@ -22,12 +22,12 @@
|
||||
},
|
||||
},
|
||||
"packages/aws-lambda": {
|
||||
"name": "@hanzo/frame-aws-lambda",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-aws-lambda",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.700.0",
|
||||
"@aws-sdk/client-sfn": "^3.700.0",
|
||||
"@hanzo/frame-producer": "workspace:^",
|
||||
"@hanzo/frames-producer": "workspace:^",
|
||||
"@sparticuz/chromium": "148.0.0",
|
||||
"ffmpeg-static": "^5.2.0",
|
||||
"ffprobe-static": "^3.1.0",
|
||||
@@ -55,8 +55,8 @@
|
||||
],
|
||||
},
|
||||
"packages/cli": {
|
||||
"name": "@hanzo/frame",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames",
|
||||
"version": "0.7.82",
|
||||
"bin": {
|
||||
"frames": "./bin/frames.mjs",
|
||||
},
|
||||
@@ -81,15 +81,15 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@clack/prompts": "^1.1.0",
|
||||
"@hanzo/frame-aws-lambda": "workspace:*",
|
||||
"@hanzo/frame-core": "workspace:*",
|
||||
"@hanzo/frame-engine": "workspace:*",
|
||||
"@hanzo/frame-gcp-cloud-run": "workspace:*",
|
||||
"@hanzo/frame-lint": "workspace:*",
|
||||
"@hanzo/frame-parsers": "workspace:*",
|
||||
"@hanzo/frame-producer": "workspace:*",
|
||||
"@hanzo/frame-studio": "workspace:*",
|
||||
"@hanzo/frame-studio-server": "workspace:*",
|
||||
"@hanzo/frames-aws-lambda": "workspace:*",
|
||||
"@hanzo/frames-core": "workspace:*",
|
||||
"@hanzo/frames-engine": "workspace:*",
|
||||
"@hanzo/frames-gcp-cloud-run": "workspace:*",
|
||||
"@hanzo/frames-lint": "workspace:*",
|
||||
"@hanzo/frames-parsers": "workspace:*",
|
||||
"@hanzo/frames-producer": "workspace:*",
|
||||
"@hanzo/frames-studio": "workspace:*",
|
||||
"@hanzo/frames-studio-server": "workspace:*",
|
||||
"@types/fontkit": "^2.0.9",
|
||||
"@types/mime-types": "^3.0.1",
|
||||
"@types/node": "^25.0.10",
|
||||
@@ -105,13 +105,13 @@
|
||||
},
|
||||
},
|
||||
"packages/core": {
|
||||
"name": "@hanzo/frame-core",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-core",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@chenglou/pretext": "^0.0.5",
|
||||
"@hanzo/frame-lint": "workspace:*",
|
||||
"@hanzo/frame-parsers": "workspace:*",
|
||||
"@hanzo/frame-studio-server": "workspace:*",
|
||||
"@hanzo/frames-lint": "workspace:*",
|
||||
"@hanzo/frames-parsers": "workspace:*",
|
||||
"@hanzo/frames-studio-server": "workspace:*",
|
||||
"bpm-detective": "^2.0.5",
|
||||
"linkedom": "^0.18.12",
|
||||
"postcss": "^8.5.8",
|
||||
@@ -130,11 +130,11 @@
|
||||
},
|
||||
},
|
||||
"packages/engine": {
|
||||
"name": "@hanzo/frame-engine",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-engine",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@hanzo/frame-core": "workspace:^",
|
||||
"@hanzo/frame-parsers": "workspace:^",
|
||||
"@hanzo/frames-core": "workspace:^",
|
||||
"@hanzo/frames-parsers": "workspace:^",
|
||||
"@hono/node-server": "^2.0.5",
|
||||
"hono": "^4.6.0",
|
||||
"linkedom": "^0.18.12",
|
||||
@@ -149,10 +149,10 @@
|
||||
},
|
||||
},
|
||||
"packages/gcp-cloud-run": {
|
||||
"name": "@hanzo/frame-gcp-cloud-run",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-gcp-cloud-run",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@hanzo/frame-producer": "workspace:^",
|
||||
"@hanzo/frames-producer": "workspace:^",
|
||||
"@google-cloud/storage": "^7.14.0",
|
||||
"@google-cloud/workflows": "^4.2.0",
|
||||
"@hono/node-server": "^2.0.5",
|
||||
@@ -170,10 +170,10 @@
|
||||
},
|
||||
},
|
||||
"packages/lint": {
|
||||
"name": "@hanzo/frame-lint",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-lint",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@hanzo/frame-parsers": "workspace:*",
|
||||
"@hanzo/frames-parsers": "workspace:*",
|
||||
"htmlparser2": "^10.1.0",
|
||||
"linkedom": "^0.18.12",
|
||||
"postcss": "^8.5.8",
|
||||
@@ -188,8 +188,8 @@
|
||||
},
|
||||
},
|
||||
"packages/parsers": {
|
||||
"name": "@hanzo/frame-parsers",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-parsers",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.27.0",
|
||||
"acorn": "^8.17.0",
|
||||
@@ -199,7 +199,7 @@
|
||||
"recast": "^0.23.11",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hanzo/frame-core": "workspace:*",
|
||||
"@hanzo/frames-core": "workspace:*",
|
||||
"@types/node": "^25.0.10",
|
||||
"tsup": "^8.0.0",
|
||||
"tsx": "^4.21.0",
|
||||
@@ -208,10 +208,10 @@
|
||||
},
|
||||
},
|
||||
"packages/player": {
|
||||
"name": "@hanzo/frame-player",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-player",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@hanzo/frame-core": "workspace:*",
|
||||
"@hanzo/frames-core": "workspace:*",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bun": "^1.1.0",
|
||||
@@ -223,8 +223,8 @@
|
||||
},
|
||||
},
|
||||
"packages/producer": {
|
||||
"name": "@hanzo/frame-producer",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-producer",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@fontsource/archivo-black": "^5.2.8",
|
||||
"@fontsource/eb-garamond": "^5.2.7",
|
||||
@@ -237,11 +237,11 @@
|
||||
"@fontsource/oswald": "^5.2.8",
|
||||
"@fontsource/outfit": "^5.2.8",
|
||||
"@fontsource/space-mono": "^5.2.9",
|
||||
"@hanzo/frame-core": "workspace:^",
|
||||
"@hanzo/frame-engine": "workspace:^",
|
||||
"@hanzo/frame-lint": "workspace:^",
|
||||
"@hanzo/frame-parsers": "workspace:^",
|
||||
"@hanzo/frame-studio-server": "workspace:^",
|
||||
"@hanzo/frames-core": "workspace:^",
|
||||
"@hanzo/frames-engine": "workspace:^",
|
||||
"@hanzo/frames-lint": "workspace:^",
|
||||
"@hanzo/frames-parsers": "workspace:^",
|
||||
"@hanzo/frames-studio-server": "workspace:^",
|
||||
"@hono/node-server": "^2.0.5",
|
||||
"hono": "^4.6.0",
|
||||
"linkedom": "^0.18.12",
|
||||
@@ -258,7 +258,7 @@
|
||||
"@fontsource/poppins": "^5.2.7",
|
||||
"@fontsource/roboto": "^5.2.10",
|
||||
"@fontsource/source-code-pro": "^5.2.7",
|
||||
"@hanzo/frame-aws-lambda": "workspace:*",
|
||||
"@hanzo/frames-aws-lambda": "workspace:*",
|
||||
"@types/node": "^25.0.10",
|
||||
"@webgpu/types": "^0.1.69",
|
||||
"esbuild": "^0.25.12",
|
||||
@@ -268,11 +268,11 @@
|
||||
},
|
||||
},
|
||||
"packages/sdk": {
|
||||
"name": "@hanzo/frame-sdk",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-sdk",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@hanzo/frame-core": "workspace:*",
|
||||
"@hanzo/frame-parsers": "workspace:*",
|
||||
"@hanzo/frames-core": "workspace:*",
|
||||
"@hanzo/frames-parsers": "workspace:*",
|
||||
"linkedom": "^0.18.12",
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -283,11 +283,11 @@
|
||||
},
|
||||
},
|
||||
"packages/sdk-playground": {
|
||||
"name": "@hanzo/frame-sdk-playground",
|
||||
"name": "@hanzo/frames-sdk-playground",
|
||||
"version": "0.6.106",
|
||||
"dependencies": {
|
||||
"@hanzo/frame-core": "workspace:*",
|
||||
"@hanzo/frame-sdk": "workspace:*",
|
||||
"@hanzo/frames-core": "workspace:*",
|
||||
"@hanzo/frames-sdk": "workspace:*",
|
||||
"gsap": "^3.15.0",
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -298,8 +298,8 @@
|
||||
},
|
||||
},
|
||||
"packages/shader-transitions": {
|
||||
"name": "@hanzo/frame-shader-transitions",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-shader-transitions",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"html2canvas": "^1.4.1",
|
||||
},
|
||||
@@ -310,8 +310,8 @@
|
||||
},
|
||||
},
|
||||
"packages/studio": {
|
||||
"name": "@hanzo/frame-studio",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-studio",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@codemirror/autocomplete": "^6.20.1",
|
||||
"@codemirror/commands": "^6.10.3",
|
||||
@@ -324,11 +324,11 @@
|
||||
"@codemirror/state": "^6.6.0",
|
||||
"@codemirror/theme-one-dark": "^6.1.2",
|
||||
"@codemirror/view": "6.40.0",
|
||||
"@hanzo/frame-core": "workspace:*",
|
||||
"@hanzo/frame-parsers": "workspace:*",
|
||||
"@hanzo/frame-player": "workspace:*",
|
||||
"@hanzo/frame-sdk": "workspace:*",
|
||||
"@hanzo/frame-studio-server": "workspace:*",
|
||||
"@hanzo/frames-core": "workspace:*",
|
||||
"@hanzo/frames-parsers": "workspace:*",
|
||||
"@hanzo/frames-player": "workspace:*",
|
||||
"@hanzo/frames-sdk": "workspace:*",
|
||||
"@hanzo/frames-studio-server": "workspace:*",
|
||||
"@phosphor-icons/react": "^2.1.10",
|
||||
"bpm-detective": "^2.0.5",
|
||||
"dompurify": "^3.2.4",
|
||||
@@ -337,7 +337,7 @@
|
||||
"mediabunny": "^1.45.3",
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hanzo/frame-producer": "workspace:*",
|
||||
"@hanzo/frames-producer": "workspace:*",
|
||||
"@types/react": "19",
|
||||
"@types/react-dom": "19",
|
||||
"@vitejs/plugin-react": "^4.0.0",
|
||||
@@ -358,11 +358,11 @@
|
||||
},
|
||||
},
|
||||
"packages/studio-server": {
|
||||
"name": "@hanzo/frame-studio-server",
|
||||
"version": "0.7.81",
|
||||
"name": "@hanzo/frames-studio-server",
|
||||
"version": "0.7.82",
|
||||
"dependencies": {
|
||||
"@hanzo/frame-core": "workspace:*",
|
||||
"@hanzo/frame-parsers": "workspace:*",
|
||||
"@hanzo/frames-core": "workspace:*",
|
||||
"@hanzo/frames-parsers": "workspace:*",
|
||||
"hono": "^4.0.0",
|
||||
"linkedom": "^0.18.12",
|
||||
"postcss": "^8.5.8",
|
||||
@@ -706,33 +706,33 @@
|
||||
|
||||
"@fontsource/space-mono": ["@fontsource/[email protected]", "", {}, "sha512-b61faFOHEISQ/pD25G+cfGY9o/WW6lRv6hBQQfpWvEJ4y1V+S4gmth95EVyBE2VL3qDYHeVQ8nBzrplzdXTDDg=="],
|
||||
|
||||
"@hanzo/frame-aws-lambda": ["@hanzo/frame-aws-lambda@workspace:packages/aws-lambda"],
|
||||
"@hanzo/frames-aws-lambda": ["@hanzo/frames-aws-lambda@workspace:packages/aws-lambda"],
|
||||
|
||||
"@hanzo/frame": ["@hanzo/frame@workspace:packages/cli"],
|
||||
"@hanzo/frames": ["@hanzo/frames@workspace:packages/cli"],
|
||||
|
||||
"@hanzo/frame-core": ["@hanzo/frame-core@workspace:packages/core"],
|
||||
"@hanzo/frames-core": ["@hanzo/frames-core@workspace:packages/core"],
|
||||
|
||||
"@hanzo/frame-engine": ["@hanzo/frame-engine@workspace:packages/engine"],
|
||||
"@hanzo/frames-engine": ["@hanzo/frames-engine@workspace:packages/engine"],
|
||||
|
||||
"@hanzo/frame-gcp-cloud-run": ["@hanzo/frame-gcp-cloud-run@workspace:packages/gcp-cloud-run"],
|
||||
"@hanzo/frames-gcp-cloud-run": ["@hanzo/frames-gcp-cloud-run@workspace:packages/gcp-cloud-run"],
|
||||
|
||||
"@hanzo/frame-lint": ["@hanzo/frame-lint@workspace:packages/lint"],
|
||||
"@hanzo/frames-lint": ["@hanzo/frames-lint@workspace:packages/lint"],
|
||||
|
||||
"@hanzo/frame-parsers": ["@hanzo/frame-parsers@workspace:packages/parsers"],
|
||||
"@hanzo/frames-parsers": ["@hanzo/frames-parsers@workspace:packages/parsers"],
|
||||
|
||||
"@hanzo/frame-player": ["@hanzo/frame-player@workspace:packages/player"],
|
||||
"@hanzo/frames-player": ["@hanzo/frames-player@workspace:packages/player"],
|
||||
|
||||
"@hanzo/frame-producer": ["@hanzo/frame-producer@workspace:packages/producer"],
|
||||
"@hanzo/frames-producer": ["@hanzo/frames-producer@workspace:packages/producer"],
|
||||
|
||||
"@hanzo/frame-sdk": ["@hanzo/frame-sdk@workspace:packages/sdk"],
|
||||
"@hanzo/frames-sdk": ["@hanzo/frames-sdk@workspace:packages/sdk"],
|
||||
|
||||
"@hanzo/frame-sdk-playground": ["@hanzo/frame-sdk-playground@workspace:packages/sdk-playground"],
|
||||
"@hanzo/frames-sdk-playground": ["@hanzo/frames-sdk-playground@workspace:packages/sdk-playground"],
|
||||
|
||||
"@hanzo/frame-shader-transitions": ["@hanzo/frame-shader-transitions@workspace:packages/shader-transitions"],
|
||||
"@hanzo/frames-shader-transitions": ["@hanzo/frames-shader-transitions@workspace:packages/shader-transitions"],
|
||||
|
||||
"@hanzo/frame-studio": ["@hanzo/frame-studio@workspace:packages/studio"],
|
||||
"@hanzo/frames-studio": ["@hanzo/frames-studio@workspace:packages/studio"],
|
||||
|
||||
"@hanzo/frame-studio-server": ["@hanzo/frame-studio-server@workspace:packages/studio-server"],
|
||||
"@hanzo/frames-studio-server": ["@hanzo/frames-studio-server@workspace:packages/studio-server"],
|
||||
|
||||
"@google-cloud/paginator": ["@google-cloud/[email protected]", "", { "dependencies": { "arrify": "^2.0.0", "extend": "^3.0.2" } }, "sha512-DJS3s0OVH4zFDB1PzjxAsHqJT6sKVbRwwML0ZBP9PbU7Yebtu/7SWMRzvO2J3nUi9pRNITCfu4LJeooM2w4pjg=="],
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ Fitness app product showcase with three floating smartphone screens
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add app-showcase
|
||||
npx @hanzo/frames add app-showcase
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -24,7 +24,7 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-money-count
|
||||
npx @hanzo/frames add apple-money-count
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -18,7 +18,7 @@ Created by [Joe Sai](https://x.com/_blue_sweater_).
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add blue-sweater-intro-video
|
||||
npx @hanzo/frames add blue-sweater-intro-video
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with chromatic aberration radial split
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add chromatic-radial-split
|
||||
npx @hanzo/frames add chromatic-radial-split
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with dramatic zoom blur
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add cinematic-zoom
|
||||
npx @hanzo/frames add cinematic-zoom
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Syntax-highlighted code on a lit, beveled 3D slab that rotates through real spac
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-3d-extrude
|
||||
npx @hanzo/frames add code-3d-extrude
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ An edit shown as a colored diff — removed lines collapse in red, added lines e
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-diff
|
||||
npx @hanzo/frames add code-diff
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ A highlight band sweeps across a target line while the surrounding context dims
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-highlight
|
||||
npx @hanzo/frames add code-highlight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ One snippet transforms into another — tokens glide between positions, leavers
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-morph
|
||||
npx @hanzo/frames add code-morph
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Thousands of GPU points scatter through space and fly to the exact glyph pixels
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-particle-assemble
|
||||
npx @hanzo/frames add code-particle-assemble
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ The camera scrolls a long file to bring a target line to center and spotlights i
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-scroll
|
||||
npx @hanzo/frames add code-scroll
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ The code compiles into existence: a GPU fragment shader resolves it out of seede
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-shader-dissolve
|
||||
npx @hanzo/frames add code-shader-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ macOS Terminal.app window in the built-in Basic profile — clean white backgrou
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-basic
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-basic
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-basic
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Clear Dark profile — translucent bla
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-clear-dark
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-clear-dark
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-clear-dark
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ macOS Terminal.app window in the built-in Clear Light profile — translucent wh
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-clear-light
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-clear-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-clear-light
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ macOS Terminal.app window in the built-in Grass profile — pitch-black backgrou
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-grass
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-grass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-grass
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Homebrew profile — black background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-homebrew
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-homebrew
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-homebrew
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ macOS Terminal.app window in the built-in Man Page profile — pale yellow `#FEF
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-man-page
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-man-page
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-man-page
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-novel
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-novel
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-novel
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-ocean
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-ocean
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-ocean
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Pro profile — pure black background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-pro
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-pro
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-pro
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-red-sands
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-red-sands
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-red-sands
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-silver-aerogel
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-silver-aerogel
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-silver-aerogel
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Solid Colors profile — vivid deep pu
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-apple-terminal-solid-colors
|
||||
npx @hanzo/frames add code-snippet-apple-terminal-solid-colors
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx @hanzo/frame add code-snippet-apple-terminal-solid-colors
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add apple-terminal
|
||||
npx @hanzo/frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Dark 2026 theme. Fu
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-dark-2026
|
||||
npx @hanzo/frames add code-snippet-dark-2026
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-dark-2026
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Dark Modern theme.
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-dark-modern
|
||||
npx @hanzo/frames add code-snippet-dark-modern
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-dark-modern
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Dark+ theme. Full e
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-dark-plus
|
||||
npx @hanzo/frames add code-snippet-dark-plus
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-dark-plus
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ Discrete code snippets fly in from the side and assemble into a stacked program,
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-flight
|
||||
npx @hanzo/frames add code-snippet-flight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the High Contrast Light
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-high-contrast-light
|
||||
npx @hanzo/frames add code-snippet-high-contrast-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-high-contrast-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the High Contrast theme
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-high-contrast
|
||||
npx @hanzo/frames add code-snippet-high-contrast
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-high-contrast
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Light 2026 theme. F
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-light-2026
|
||||
npx @hanzo/frames add code-snippet-light-2026
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-light-2026
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Light Modern theme.
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-light-modern
|
||||
npx @hanzo/frames add code-snippet-light-modern
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-light-modern
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Light+ theme. Full
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-light-plus
|
||||
npx @hanzo/frames add code-snippet-light-plus
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-light-plus
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Monokai theme. Full
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-monokai
|
||||
npx @hanzo/frames add code-snippet-monokai
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-monokai
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Solarized Light the
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-solarized-light
|
||||
npx @hanzo/frames add code-snippet-solarized-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-solarized-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Visual Studio Dark
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-visual-studio-dark
|
||||
npx @hanzo/frames add code-snippet-visual-studio-dark
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-visual-studio-dark
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ VS Code workbench with per-character typing animation in the Visual Studio Light
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-snippet-visual-studio-light
|
||||
npx @hanzo/frames add code-snippet-visual-studio-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx @hanzo/frame add code-snippet-visual-studio-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code
|
||||
npx @hanzo/frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
|
||||
@@ -16,7 +16,7 @@ Token-streamed typing reveal with a caret that tracks the frontier — determini
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add code-typing
|
||||
npx @hanzo/frames add code-typing
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with cross-warped morphing
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add cross-warp-morph
|
||||
npx @hanzo/frames add cross-warp-morph
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated bar + line chart with staggered reveal, NYT-style typography, and value
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add data-chart
|
||||
npx @hanzo/frames add data-chart
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with fractal noise domain warping
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add domain-warp-dissolve
|
||||
npx @hanzo/frames add domain-warp-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with white flash crossfade
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add flash-through-white
|
||||
npx @hanzo/frames add flash-through-white
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor i
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add flowchart-vertical
|
||||
npx @hanzo/frames add flowchart-vertical
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated decision tree with SVG connectors, sticky-note nodes, cursor interactio
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add flowchart
|
||||
npx @hanzo/frames add flowchart
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with digital glitch artifacts
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add glitch
|
||||
npx @hanzo/frames add glitch
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with gravitational lensing distortion
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add gravitational-lens
|
||||
npx @hanzo/frames add gravitational-lens
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated Instagram follow overlay with profile card and follow button
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add instagram-follow
|
||||
npx @hanzo/frames add instagram-follow
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -20,7 +20,7 @@ description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add ios26-liquid-glass
|
||||
npx @hanzo/frames add ios26-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with cinematic light leak overlay
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add light-leak
|
||||
npx @hanzo/frames add light-leak
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -20,7 +20,7 @@ Frosted glass context menu panel drifting over an aurora shader background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add liquid-glass-context-menu
|
||||
npx @hanzo/frames add liquid-glass-context-menu
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -20,7 +20,7 @@ Frosted glass media control panels spreading over an aurora shader background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add liquid-glass-media-controls
|
||||
npx @hanzo/frames add liquid-glass-media-controls
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -20,7 +20,7 @@ Frosted glass notification cards floating over an aurora shader background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add liquid-glass-notification
|
||||
npx @hanzo/frames add liquid-glass-notification
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -20,7 +20,7 @@ Frosted glass stat cards, showcase panel and pill chips over an aurora shader ba
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add liquid-glass-widgets
|
||||
npx @hanzo/frames add liquid-glass-widgets
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in,
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add logo-outro
|
||||
npx @hanzo/frames add logo-outro
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ News-style lower third with tight-fit text boxes: white headline bar with red dr
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lower-third-bild
|
||||
npx @hanzo/frames add lower-third-bild
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Cardless lower third for footage overlay: name rises, an accent rule draws left-
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-accent-underline
|
||||
npx @hanzo/frames add lt-accent-underline
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ High-energy podcast lower third: solid dark block wipes in, uppercase name slams
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-bold-block
|
||||
npx @hanzo/frames add lt-bold-block
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Minimal white-card lower third for podcasts/interviews: accent tab, name + role,
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-clean-bar
|
||||
npx @hanzo/frames add lt-clean-bar
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ High-energy lower third: bold accent-color block slides in with overshoot, conde
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-color-block
|
||||
npx @hanzo/frames add lt-color-block
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Charcoal card lower third for bright footage: name, drawn accent underline, role
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-dark-card
|
||||
npx @hanzo/frames add lt-dark-card
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-kicker-name
|
||||
npx @hanzo/frames add lt-kicker-name
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-mask-reveal
|
||||
npx @hanzo/frames add lt-mask-reveal
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Cardless lower third with a vertical accent bar; condensed display name + mono r
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-side-rule
|
||||
npx @hanzo/frames add lt-side-rule
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Rounded white pill lower third for podcasts/interviews: status dot, name + role,
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-soft-pill
|
||||
npx @hanzo/frames add lt-soft-pill
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add lt-stack-bars
|
||||
npx @hanzo/frames add lt-stack-bars
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated macOS-style notification banner with app icon and message
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add macos-notification
|
||||
npx @hanzo/frames add macos-notification
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -20,7 +20,7 @@ description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finde
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add macos-tahoe-liquid-glass
|
||||
npx @hanzo/frames add macos-tahoe-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Premium broadcast-style lower-third ticker with live label, headline ribbon, and
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add news-ticker
|
||||
npx @hanzo/frames add news-ticker
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -24,7 +24,7 @@ use 📷Frames and image generation if you need it for assets or like png image
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add north-korea-locked-down
|
||||
npx @hanzo/frames add north-korea-locked-down
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -24,7 +24,7 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add nyc-paris-flight
|
||||
npx @hanzo/frames add nyc-paris-flight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated Reddit post card overlay with upvotes and comments
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add reddit-post
|
||||
npx @hanzo/frames add reddit-post
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with ridged turbulence burn effect
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add ridged-burn
|
||||
npx @hanzo/frames add ridged-burn
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with concentric ripple wave distortion
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add ripple-waves
|
||||
npx @hanzo/frames add ripple-waves
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with signed distance field iris reveal
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add sdf-iris
|
||||
npx @hanzo/frames add sdf-iris
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated Spain choropleth by autonomous community with staggered reveals and gra
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add spain-map
|
||||
npx @hanzo/frames add spain-map
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated Spotify now-playing card with album art and progress bar
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add spotify-card
|
||||
npx @hanzo/frames add spotify-card
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with swirling vortex distortion
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add swirl-vortex
|
||||
npx @hanzo/frames add swirl-vortex
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Shader transition with heat haze thermal distortion
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add thermal-distortion
|
||||
npx @hanzo/frames add thermal-distortion
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Animated TikTok follow overlay with profile card and follow button
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add tiktok-follow
|
||||
npx @hanzo/frames add tiktok-follow
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of 3D perspective flip and rotate transitions
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-3d
|
||||
npx @hanzo/frames add transitions-3d
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of blur-based transitions between scenes
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-blur
|
||||
npx @hanzo/frames add transitions-blur
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of cover/uncover slide transitions
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-cover
|
||||
npx @hanzo/frames add transitions-cover
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of destructive break-apart transitions
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-destruction
|
||||
npx @hanzo/frames add transitions-destruction
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of dissolve and fade transitions
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-dissolve
|
||||
npx @hanzo/frames add transitions-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of warp and distortion transitions
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-distortion
|
||||
npx @hanzo/frames add transitions-distortion
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of grid-based tile transitions
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-grid
|
||||
npx @hanzo/frames add transitions-grid
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
@@ -16,7 +16,7 @@ Showcase of light-based glow and flash transitions
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx @hanzo/frame add transitions-light
|
||||
npx @hanzo/frames add transitions-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user