mirror of
https://github.com/hanzoai/frames.git
synced 2026-09-24 00:08:03 +00:00
frames: rebrand the fork to Hanzo Frames
Forked from HyperFrames (Apache-2.0), full history preserved. Hosts are mapped explicitly and BEFORE the identifier rename, because hyperframes.heygen.com is not decoration: 175 of its occurrences are $schema identifiers that a validator dereferences. A blind rename would have left them naming a host that never serves them. The schema files are in this repo under docs/schema, so the mapped host is one we can actually serve -- that is the condition that makes the rewrite safe, and serving them is a deploy task, not an edit. docs/schema/hyperframes.json is renamed to frames.json to match the identifier it is now published under. api.heygen.com and the CLI auth against heygen.com are left UNRENAMED on purpose. They are a dependency on HeyGen's SaaS, not a name of ours to take, and the right move is to remove that integration rather than rebrand it. LICENSE and CREDITS.md are untouched; NOTICE records the lineage. Co-authored-by: Hanzo Dev <[email protected]>
This commit is contained in:
zooqueen
@@ -1,7 +1,7 @@
|
||||
# Project-local Codex CLI skills
|
||||
|
||||
Skills in this directory are auto-discovered by Codex CLI (verified against
|
||||
Codex 0.144.3) when the `hyperframes` repo is opened as the working
|
||||
Codex 0.144.3) when the `frames` repo is opened as the working
|
||||
directory. They are NOT part of the marketplace-distributed plugin (that
|
||||
set lives under `skills/` and is manifested by `.codex-plugin/`). Two
|
||||
separate namespaces, on purpose:
|
||||
@@ -10,8 +10,8 @@ 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 hyperframes skills` or `npx skills add
|
||||
heygen-com/hyperframes`.
|
||||
projects via `npx frames skills` or `npx skills add
|
||||
hanzoai/frames`.
|
||||
|
||||
## Weekly changelog video
|
||||
|
||||
@@ -33,15 +33,15 @@ Weekly usage:
|
||||
generated markdown. The agent will present its script +
|
||||
visualization plan for review before rendering.
|
||||
3. Accept, and the agent produces `weekly-changelog-<range>.mp4` gated
|
||||
by `hyperframes check` (0 errors) + `seam-gate verify` (0 fail/warn).
|
||||
by `frames check` (0 errors) + `seam-gate verify` (0 fail/warn).
|
||||
|
||||
TTS uses the tracked `skills/hyperframes-media/scripts/heygen-tts.mjs`
|
||||
TTS uses the tracked `skills/frames-media/scripts/heygen-tts.mjs`
|
||||
(no extra install needed). Runtime dependencies you need on PATH:
|
||||
|
||||
- Node ≥ 22
|
||||
- HeyGen CLI ≥ 0.3.0, authenticated via `heygen auth login --oauth`
|
||||
- `ffmpeg` (for VO wav conversion + frame QA)
|
||||
- A headless Chrome for HyperFrames rendering (`hyperframes doctor`
|
||||
- A headless Chrome for Frames rendering (`frames doctor`
|
||||
will point out the exact ask if it's missing)
|
||||
|
||||
The parallel set at `.claude/skills/` is a byte-identical copy so
|
||||
|
||||
@@ -5,8 +5,8 @@ description: Turn a weekly changelog .md into a finished branded changelog video
|
||||
|
||||
# Changelog → Branded Video
|
||||
|
||||
Input: a changelog .md (themes + items, like the weekly HyperFrames digest).
|
||||
Output: a lint-clean, seam-gate-green HyperFrames project in
|
||||
Input: a changelog .md (themes + items, like the weekly Frames digest).
|
||||
Output: a lint-clean, seam-gate-green Frames project in
|
||||
`projects/active/weekly-changelog-<range>/`. Render only when asked.
|
||||
|
||||
**Load first, non-negotiable:** `motion-doctrine` (+ `cut-the-curve`,
|
||||
@@ -76,11 +76,11 @@ Save as `script-tokens.json` in the project.
|
||||
|
||||
```bash
|
||||
# spoken-layer text only; words JSON = ground-truth timestamps of the SPOKEN text
|
||||
# Repo-native path: the changelog-video skill runs from the hyperframes repo root,
|
||||
# so it uses the tracked hyperframes-media TTS helper directly (no `npx hyperframes
|
||||
# Repo-native path: the changelog-video skill runs from the frames repo root,
|
||||
# so it uses the tracked frames-media TTS helper directly (no `npx frames
|
||||
# skills` install step). If you've copied the skill into another repo, swap in
|
||||
# your own path to the media-use / hyperframes-media heygen-tts.mjs.
|
||||
node skills/hyperframes-media/scripts/heygen-tts.mjs ./vo-spoken.txt \
|
||||
# your own path to the media-use / frames-media heygen-tts.mjs.
|
||||
node skills/frames-media/scripts/heygen-tts.mjs ./vo-spoken.txt \
|
||||
-o voiceover.mp3 --words vo-words.json \
|
||||
--voice 330290724a1b470fb63153f34d4c0183 # Annie — lifelike (do not substitute)
|
||||
```
|
||||
@@ -145,10 +145,10 @@ scaffold.
|
||||
|
||||
### 6 · Gates (all green before presenting)
|
||||
|
||||
1. `bun run --cwd packages/cli hyperframes check` (or the installed
|
||||
`hyperframes` CLI from the repo-local `skills/hyperframes-cli/` skill) —
|
||||
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 hyperframes@latest`; the tracked repo-local CLI is the source of
|
||||
`npx 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
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>HyperFrames Weekly — <RANGE></title>
|
||||
<title>Frames Weekly — <RANGE></title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
@font-face { font-family:'ABC Solar Display'; src:url('assets/fonts/ABCSolarDisplay-Bold.woff2') format('woff2'); font-weight:700; font-display:block; }
|
||||
@@ -46,7 +46,7 @@
|
||||
<div id="root" data-composition-id="main" data-start="0" data-duration="<TOTAL>" data-width="1080" data-height="1080">
|
||||
<video id="bg-video" class="clip" src="assets/bg-pattern-<TOTAL>s.mp4" muted data-start="0" data-duration="<TOTAL>" data-track-index="0"></video>
|
||||
<div id="bg-scrim"></div>
|
||||
<div id="kicker-chip" class="chrome">HYPERFRAMES WEEKLY <span style="color:rgba(245,246,244,.66)">· <RANGE></span></div>
|
||||
<div id="kicker-chip" class="chrome">FRAMES WEEKLY <span style="color:rgba(245,246,244,.66)">· <RANGE></span></div>
|
||||
<div id="progress" class="chrome"><span class="dot" id="dot1"></span><!-- one per theme --></div>
|
||||
<div id="cap-line" class="chrome" data-layout-allow-overlap></div>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"_readme": "Two-layer script example. Bare string = display and spoken identical; object = they diverge (display for captions, spoken for TTS). One line = one caption phrase (≤ ~40 display chars). vo-spoken.txt = all spoken forms joined.",
|
||||
"lines": [
|
||||
{ "id": "l1", "tokens": ["This", "week", "at", "HyperFrames", "—"] },
|
||||
{ "id": "l1", "tokens": ["This", "week", "at", "Frames", "—"] },
|
||||
{ "id": "l2", "tokens": ["fifteen", "releases,", "and", "one", "big", "story."] },
|
||||
{ "id": "l3", "tokens": ["Feed", "it", "a", "Figma", "frame,"] },
|
||||
{ "id": "l4", "tokens": ["get", "a", "working", "composition", "back", "—"] },
|
||||
@@ -27,7 +27,7 @@
|
||||
"See",
|
||||
"everything",
|
||||
"at",
|
||||
{ "display": "hyperframes.heygen.com", "spoken": "hyperframes dot hey-jen dot com" }
|
||||
{ "display": "frames.hanzo.ai", "spoken": "frames dot hey-jen dot com" }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -67,7 +67,7 @@ otherwise) and must stay flat 2D (no 3D ancestors).
|
||||
|
||||
## Scene anatomy
|
||||
|
||||
- Chrome (untimed, z 6): kicker chip top-left `HYPERFRAMES WEEKLY · <RANGE>`,
|
||||
- Chrome (untimed, z 6): kicker chip top-left `FRAMES WEEKLY · <RANGE>`,
|
||||
progress dots top-right (one per theme; `tl.set` backgroundColor at each
|
||||
cut — active #f5f6f4, done .45; never tl.call for state).
|
||||
- Title (≤2s): mono kicker date, ABC Solar h1 ~104px, green rule sweep.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"_readme": "display → spoken. Plain-text phonetics for HeyGen TTS (no SSML). Grow this file; never guess a missing term — ask, add, then listen to the generated line. Slash commands: caption /name, speak 'slash <name>'.",
|
||||
"/figma": "slash Figma",
|
||||
"/hyperframes": "slash hyper-frames",
|
||||
"/frames": "slash hyper-frames",
|
||||
"JSON": "jay-sawn",
|
||||
"GSAP": "jee-sap",
|
||||
"CLI": "C L I",
|
||||
@@ -45,7 +45,7 @@
|
||||
"repo": "repo",
|
||||
"HeyGen": "hey-jen",
|
||||
"heygen.com": "hey-jen dot com",
|
||||
"hyperframes.heygen.com": "hyperframes dot hey-jen dot com",
|
||||
"frames.hanzo.ai": "frames dot hey-jen dot com",
|
||||
"MusicGen": "music-jen",
|
||||
"Kokoro": "koh-koh-roh",
|
||||
"Figma": "Figma",
|
||||
|
||||
@@ -14,7 +14,7 @@ a VO saying "juh-son" ("JSON" read literally) are both build failures.
|
||||
- Numbers with meaning stay ("fifteen releases"); commit hashes, PR numbers,
|
||||
and version micro-detail are never spoken.
|
||||
- Open with the week + the marquee, close with the digest pointer
|
||||
("See everything at hyperframes dot heygen dot com").
|
||||
("See everything at frames dot heygen dot com").
|
||||
- **Teach the simple command.** When a feature has a one-line invocation (a
|
||||
slash command, a CLI one-liner), the script says it verbatim ("start your
|
||||
prompt with /figma…") and the mock shows it being typed — the command is
|
||||
@@ -28,7 +28,7 @@ a VO saying "juh-son" ("JSON" read literally) are both build failures.
|
||||
"lines": [
|
||||
{
|
||||
"id": "l1",
|
||||
"tokens": ["This", "week", "at", "HyperFrames,", { "display": "JSON", "spoken": "jay-sawn" }]
|
||||
"tokens": ["This", "week", "at", "Frames,", { "display": "JSON", "spoken": "jay-sawn" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -62,7 +62,7 @@ spelling, hyphens, and spacing:
|
||||
4. **Versions/numbers**: expand — `v0.7.36 → "version zero point seven
|
||||
point thirty-six"` (usually: don't speak versions at all),
|
||||
`1080×1080 → "ten-eighty by ten-eighty"`.
|
||||
5. **URLs**: `hyperframes.heygen.com → "hyperframes dot hey-jen dot com"`.
|
||||
5. **URLs**: `frames.hanzo.ai → "frames dot hey-jen dot com"`.
|
||||
6. **Filenames/extensions**: `.mp4 → "dot em pee four"` — or rephrase so the
|
||||
extension isn't spoken.
|
||||
7. **Emphasis/pauses**: commas and em-dashes, never caps. Ellipses are
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: motion-doctrine
|
||||
description: "GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]"
|
||||
description: "GATEWAY — load FIRST before composing any Frames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]"
|
||||
---
|
||||
|
||||
# Motion Doctrine (Gateway)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#!/usr/bin/env node
|
||||
// seam-gate.mjs — numeric Seam Gate verifier for HyperFrames films (motion-doctrine).
|
||||
// seam-gate.mjs — numeric Seam Gate verifier for Frames films (motion-doctrine).
|
||||
// Zero npm dependencies: drives chrome-headless-shell over raw CDP (node >= 22).
|
||||
//
|
||||
// verify node seam-gate.mjs verify --ledger ledger.json --project <dir> [--json]
|
||||
@@ -71,7 +71,7 @@ async function ensureServer() {
|
||||
const port = 5380 + Math.floor(Math.random() * 20);
|
||||
const env = { ...process.env };
|
||||
delete env.HYPERFRAME_RUNTIME_URL; // wrong value fails silently as 200 HTML
|
||||
const cmd = flag("server-cmd", `npx --yes hyperframes preview --no-open --port ${port}`);
|
||||
const cmd = flag("server-cmd", `npx --yes frames preview --no-open --port ${port}`);
|
||||
const child = spawn("sh", ["-c", cmd.replace(/\{port\}/g, String(port))], {
|
||||
cwd: project,
|
||||
env,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: oversized-cursor
|
||||
description: House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.
|
||||
description: House-style oversized macOS cursor technique for Frames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.
|
||||
---
|
||||
|
||||
# Oversized Cursor — the eye-carrier
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: seam-craft
|
||||
description: Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.
|
||||
description: Render-correctness doctrine for scene-to-scene seams in Frames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.
|
||||
---
|
||||
|
||||
# Seam Craft — render prerequisites for scene-to-scene transitions
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
{
|
||||
"name": "hyperframes",
|
||||
"name": "frames",
|
||||
"owner": {
|
||||
"name": "HeyGen",
|
||||
"email": "hyper[email protected]",
|
||||
"url": "https://hyperframes.heygen.com"
|
||||
"email": "[email protected]",
|
||||
"url": "https://frames.hanzo.ai"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
"name": "core-skills",
|
||||
"source": "./",
|
||||
"description": "The HyperFrames core set \u2014 install this one: the /hyperframes router, the hyperframes-* domain skills, and media-use. The router installs each creation workflow on demand. The full bundle (all skills at once) is `hyperframes`.",
|
||||
"homepage": "https://hyperframes.heygen.com",
|
||||
"description": "The Frames core set \u2014 install this one: the /frames router, the frames-* domain skills, and media-use. The router installs each creation workflow on demand. The full bundle (all skills at once) is `frames`.",
|
||||
"homepage": "https://frames.hanzo.ai",
|
||||
"license": "Apache-2.0",
|
||||
"skills": [
|
||||
"./skills/hyperframes",
|
||||
"./skills/hyperframes-animation",
|
||||
"./skills/hyperframes-cli",
|
||||
"./skills/hyperframes-core",
|
||||
"./skills/hyperframes-creative",
|
||||
"./skills/hyperframes-keyframes",
|
||||
"./skills/hyperframes-registry",
|
||||
"./skills/frames",
|
||||
"./skills/frames-animation",
|
||||
"./skills/frames-cli",
|
||||
"./skills/frames-core",
|
||||
"./skills/frames-creative",
|
||||
"./skills/frames-keyframes",
|
||||
"./skills/frames-registry",
|
||||
"./skills/media-use"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "hyperframes",
|
||||
"name": "frames",
|
||||
"source": "./",
|
||||
"description": "All HyperFrames skills in one static bundle. Most setups want `core-skills` instead \u2014 the router installs creation workflows on demand. HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
|
||||
"homepage": "https://hyperframes.heygen.com",
|
||||
"description": "All Frames skills in one static bundle. Most setups want `core-skills` instead \u2014 the router installs creation workflows on demand. Frames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for Frames.",
|
||||
"homepage": "https://frames.hanzo.ai",
|
||||
"license": "Apache-2.0"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
{
|
||||
"name": "hyperframes",
|
||||
"description": "HyperFrames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
|
||||
"name": "frames",
|
||||
"description": "Frames by HeyGen. Write HTML, render video. Compositions, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for Frames.",
|
||||
"version": "0.7.81",
|
||||
"author": {
|
||||
"name": "HeyGen",
|
||||
"email": "hyper[email protected]",
|
||||
"url": "https://hyperframes.heygen.com"
|
||||
"email": "[email protected]",
|
||||
"url": "https://frames.hanzo.ai"
|
||||
},
|
||||
"homepage": "https://hyperframes.heygen.com",
|
||||
"repository": "https://github.com/heygen-com/hyperframes",
|
||||
"homepage": "https://frames.hanzo.ai",
|
||||
"repository": "https://github.com/hanzoai/frames",
|
||||
"license": "Apache-2.0"
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"type": "command",
|
||||
"timeout": 180,
|
||||
"statusMessage": "Running build + lint + typecheck before commit…",
|
||||
"command": "node -e \"\nconst chunks = [];\nprocess.stdin.on('data', d => chunks.push(d));\nprocess.stdin.on('end', () => {\n const input = JSON.parse(Buffer.concat(chunks).toString());\n const cmd = input.tool_input?.command || '';\n if (!/git\\s+commit\\b/.test(cmd)) process.exit(0);\n const { execSync } = require('child_process');\n const fs = require('fs');\n const path = require('path');\n const os = require('os');\n // A leading 'cd <path>' in the command is the real target directory:\n // Claude Code prefixes this whenever the session's tracked cwd differs\n // from this hook process's own cwd (e.g. a sibling repo worktree) — the\n // hook process itself always inherits the primary working directory,\n // never the command's actual target.\n function resolveTargetDir() {\n const m = cmd.match(/^\\s*cd\\s+('([^']+)'|(\\S+))\\s*(?:&&|;|\\n|$)/);\n if (m) {\n let dir = m[2] || m[3];\n if (dir.startsWith('~')) dir = path.join(os.homedir(), dir.slice(1));\n dir = path.resolve(process.cwd(), dir);\n if (fs.existsSync(dir)) return dir;\n }\n return process.cwd();\n }\n const targetDir = resolveTargetDir();\n let repoRoot;\n try {\n repoRoot = execSync('git rev-parse --show-toplevel', { cwd: targetDir, encoding: 'utf8' }).trim();\n } catch {\n process.exit(0);\n }\n // Only this repo's own bun build/lint/typecheck applies — skip silently\n // for any other repo (e.g. a sibling Go/Python repo touched in the same session).\n const pkgPath = path.join(repoRoot, 'package.json');\n if (!fs.existsSync(pkgPath)) process.exit(0);\n let pkg;\n try {\n pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));\n } catch {\n process.exit(0);\n }\n if (pkg.name !== 'hyperframes-monorepo') process.exit(0);\n const steps = [\n ['bun run build', 'Build'],\n ['bun run lint', 'Lint'],\n ['bun run --filter \\'*\\' typecheck 2>&1 | grep -v \\'vitest\\\\|test\\\\.ts\\' || true', 'Typecheck'],\n ];\n const failures = [];\n for (const [script, label] of steps) {\n try {\n execSync(script, { cwd: repoRoot, stdio: 'pipe' });\n } catch (e) {\n failures.push(label + ':\\n' + (e.stdout?.toString() || e.message).slice(0, 400));\n }\n }\n if (failures.length > 0) {\n process.stdout.write(JSON.stringify({\n hookSpecificOutput: {\n hookEventName: 'PreToolUse',\n permissionDecision: 'deny',\n permissionDecisionReason: '❌ Pre-commit checks failed:\\n\\n' + failures.join('\\n\\n') + '\\n\\nFix the issues above, then retry the commit.',\n },\n }));\n }\n});\""
|
||||
"command": "node -e \"\nconst chunks = [];\nprocess.stdin.on('data', d => chunks.push(d));\nprocess.stdin.on('end', () => {\n const input = JSON.parse(Buffer.concat(chunks).toString());\n const cmd = input.tool_input?.command || '';\n if (!/git\\s+commit\\b/.test(cmd)) process.exit(0);\n const { execSync } = require('child_process');\n const fs = require('fs');\n const path = require('path');\n const os = require('os');\n // A leading 'cd <path>' in the command is the real target directory:\n // Claude Code prefixes this whenever the session's tracked cwd differs\n // from this hook process's own cwd (e.g. a sibling repo worktree) — the\n // hook process itself always inherits the primary working directory,\n // never the command's actual target.\n function resolveTargetDir() {\n const m = cmd.match(/^\\s*cd\\s+('([^']+)'|(\\S+))\\s*(?:&&|;|\\n|$)/);\n if (m) {\n let dir = m[2] || m[3];\n if (dir.startsWith('~')) dir = path.join(os.homedir(), dir.slice(1));\n dir = path.resolve(process.cwd(), dir);\n if (fs.existsSync(dir)) return dir;\n }\n return process.cwd();\n }\n const targetDir = resolveTargetDir();\n let repoRoot;\n try {\n repoRoot = execSync('git rev-parse --show-toplevel', { cwd: targetDir, encoding: 'utf8' }).trim();\n } catch {\n process.exit(0);\n }\n // Only this repo's own bun build/lint/typecheck applies — skip silently\n // for any other repo (e.g. a sibling Go/Python repo touched in the same session).\n const pkgPath = path.join(repoRoot, 'package.json');\n if (!fs.existsSync(pkgPath)) process.exit(0);\n let pkg;\n try {\n pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));\n } catch {\n process.exit(0);\n }\n if (pkg.name !== 'frames-monorepo') process.exit(0);\n const steps = [\n ['bun run build', 'Build'],\n ['bun run lint', 'Lint'],\n ['bun run --filter \\'*\\' typecheck 2>&1 | grep -v \\'vitest\\\\|test\\\\.ts\\' || true', 'Typecheck'],\n ];\n const failures = [];\n for (const [script, label] of steps) {\n try {\n execSync(script, { cwd: repoRoot, stdio: 'pipe' });\n } catch (e) {\n failures.push(label + ':\\n' + (e.stdout?.toString() || e.message).slice(0, 400));\n }\n }\n if (failures.length > 0) {\n process.stdout.write(JSON.stringify({\n hookSpecificOutput: {\n hookEventName: 'PreToolUse',\n permissionDecision: 'deny',\n permissionDecisionReason: '❌ Pre-commit checks failed:\\n\\n' + failures.join('\\n\\n') + '\\n\\nFix the issues above, then retry the commit.',\n },\n }));\n }\n});\""
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Project-local Claude Code skills
|
||||
|
||||
Skills in this directory are auto-discovered by Claude Code when the
|
||||
`hyperframes` repo is opened as the working directory. They are NOT part of
|
||||
`frames` repo is opened as the working directory. They are NOT part of
|
||||
the marketplace-distributed plugin (that set lives under `skills/` and is
|
||||
manifested by `.claude-plugin/`). Two separate namespaces, on purpose:
|
||||
|
||||
@@ -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 hyperframes skills` or `npx skills add heygen-com/hyperframes`.
|
||||
via `npx frames skills` or `npx skills add hanzoai/frames`.
|
||||
|
||||
## Weekly changelog video
|
||||
|
||||
@@ -31,15 +31,15 @@ Weekly usage:
|
||||
generated markdown. The agent will present its script + visualization
|
||||
plan for review before rendering.
|
||||
3. Accept, and the agent produces `weekly-changelog-<range>.mp4` gated by
|
||||
`hyperframes check` (0 errors) + `seam-gate verify` (0 fail/warn).
|
||||
`frames check` (0 errors) + `seam-gate verify` (0 fail/warn).
|
||||
|
||||
TTS uses the tracked `skills/hyperframes-media/scripts/heygen-tts.mjs`
|
||||
TTS uses the tracked `skills/frames-media/scripts/heygen-tts.mjs`
|
||||
(no extra install needed). Runtime dependencies you need on PATH:
|
||||
|
||||
- Node ≥ 22
|
||||
- HeyGen CLI ≥ 0.3.0, authenticated via `heygen auth login --oauth`
|
||||
- `ffmpeg` (for VO wav conversion + frame QA)
|
||||
- A headless Chrome for HyperFrames rendering (`hyperframes doctor` will
|
||||
- A headless Chrome for Frames rendering (`frames doctor` will
|
||||
point out the exact ask if it's missing)
|
||||
|
||||
The parallel set at `.agents/skills/` is a byte-identical copy so Codex
|
||||
|
||||
@@ -5,8 +5,8 @@ description: Turn a weekly changelog .md into a finished branded changelog video
|
||||
|
||||
# Changelog → Branded Video
|
||||
|
||||
Input: a changelog .md (themes + items, like the weekly HyperFrames digest).
|
||||
Output: a lint-clean, seam-gate-green HyperFrames project in
|
||||
Input: a changelog .md (themes + items, like the weekly Frames digest).
|
||||
Output: a lint-clean, seam-gate-green Frames project in
|
||||
`projects/active/weekly-changelog-<range>/`. Render only when asked.
|
||||
|
||||
**Load first, non-negotiable:** `motion-doctrine` (+ `cut-the-curve`,
|
||||
@@ -76,11 +76,11 @@ Save as `script-tokens.json` in the project.
|
||||
|
||||
```bash
|
||||
# spoken-layer text only; words JSON = ground-truth timestamps of the SPOKEN text
|
||||
# Repo-native path: the changelog-video skill runs from the hyperframes repo root,
|
||||
# so it uses the tracked hyperframes-media TTS helper directly (no `npx hyperframes
|
||||
# Repo-native path: the changelog-video skill runs from the frames repo root,
|
||||
# so it uses the tracked frames-media TTS helper directly (no `npx frames
|
||||
# skills` install step). If you've copied the skill into another repo, swap in
|
||||
# your own path to the media-use / hyperframes-media heygen-tts.mjs.
|
||||
node skills/hyperframes-media/scripts/heygen-tts.mjs ./vo-spoken.txt \
|
||||
# your own path to the media-use / frames-media heygen-tts.mjs.
|
||||
node skills/frames-media/scripts/heygen-tts.mjs ./vo-spoken.txt \
|
||||
-o voiceover.mp3 --words vo-words.json \
|
||||
--voice 330290724a1b470fb63153f34d4c0183 # Annie — lifelike (do not substitute)
|
||||
```
|
||||
@@ -145,10 +145,10 @@ scaffold.
|
||||
|
||||
### 6 · Gates (all green before presenting)
|
||||
|
||||
1. `bun run --cwd packages/cli hyperframes check` (or the installed
|
||||
`hyperframes` CLI from the repo-local `skills/hyperframes-cli/` skill) —
|
||||
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 hyperframes@latest`; the tracked repo-local CLI is the source of
|
||||
`npx 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
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1080, height=1080">
|
||||
<title>HyperFrames Weekly — <RANGE></title>
|
||||
<title>Frames Weekly — <RANGE></title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
@font-face { font-family:'ABC Solar Display'; src:url('assets/fonts/ABCSolarDisplay-Bold.woff2') format('woff2'); font-weight:700; font-display:block; }
|
||||
@@ -46,7 +46,7 @@
|
||||
<div id="root" data-composition-id="main" data-start="0" data-duration="<TOTAL>" data-width="1080" data-height="1080">
|
||||
<video id="bg-video" class="clip" src="assets/bg-pattern-<TOTAL>s.mp4" muted data-start="0" data-duration="<TOTAL>" data-track-index="0"></video>
|
||||
<div id="bg-scrim"></div>
|
||||
<div id="kicker-chip" class="chrome">HYPERFRAMES WEEKLY <span style="color:rgba(245,246,244,.66)">· <RANGE></span></div>
|
||||
<div id="kicker-chip" class="chrome">FRAMES WEEKLY <span style="color:rgba(245,246,244,.66)">· <RANGE></span></div>
|
||||
<div id="progress" class="chrome"><span class="dot" id="dot1"></span><!-- one per theme --></div>
|
||||
<div id="cap-line" class="chrome" data-layout-allow-overlap></div>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"_readme": "Two-layer script example. Bare string = display and spoken identical; object = they diverge (display for captions, spoken for TTS). One line = one caption phrase (≤ ~40 display chars). vo-spoken.txt = all spoken forms joined.",
|
||||
"lines": [
|
||||
{ "id": "l1", "tokens": ["This", "week", "at", "HyperFrames", "—"] },
|
||||
{ "id": "l1", "tokens": ["This", "week", "at", "Frames", "—"] },
|
||||
{ "id": "l2", "tokens": ["fifteen", "releases,", "and", "one", "big", "story."] },
|
||||
{ "id": "l3", "tokens": ["Feed", "it", "a", "Figma", "frame,"] },
|
||||
{ "id": "l4", "tokens": ["get", "a", "working", "composition", "back", "—"] },
|
||||
@@ -27,7 +27,7 @@
|
||||
"See",
|
||||
"everything",
|
||||
"at",
|
||||
{ "display": "hyperframes.heygen.com", "spoken": "hyperframes dot hey-jen dot com" }
|
||||
{ "display": "frames.hanzo.ai", "spoken": "frames dot hey-jen dot com" }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -67,7 +67,7 @@ otherwise) and must stay flat 2D (no 3D ancestors).
|
||||
|
||||
## Scene anatomy
|
||||
|
||||
- Chrome (untimed, z 6): kicker chip top-left `HYPERFRAMES WEEKLY · <RANGE>`,
|
||||
- Chrome (untimed, z 6): kicker chip top-left `FRAMES WEEKLY · <RANGE>`,
|
||||
progress dots top-right (one per theme; `tl.set` backgroundColor at each
|
||||
cut — active #f5f6f4, done .45; never tl.call for state).
|
||||
- Title (≤2s): mono kicker date, ABC Solar h1 ~104px, green rule sweep.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"_readme": "display → spoken. Plain-text phonetics for HeyGen TTS (no SSML). Grow this file; never guess a missing term — ask, add, then listen to the generated line. Slash commands: caption /name, speak 'slash <name>'.",
|
||||
"/figma": "slash Figma",
|
||||
"/hyperframes": "slash hyper-frames",
|
||||
"/frames": "slash hyper-frames",
|
||||
"JSON": "jay-sawn",
|
||||
"GSAP": "jee-sap",
|
||||
"CLI": "C L I",
|
||||
@@ -45,7 +45,7 @@
|
||||
"repo": "repo",
|
||||
"HeyGen": "hey-jen",
|
||||
"heygen.com": "hey-jen dot com",
|
||||
"hyperframes.heygen.com": "hyperframes dot hey-jen dot com",
|
||||
"frames.hanzo.ai": "frames dot hey-jen dot com",
|
||||
"MusicGen": "music-jen",
|
||||
"Kokoro": "koh-koh-roh",
|
||||
"Figma": "Figma",
|
||||
|
||||
@@ -14,7 +14,7 @@ a VO saying "juh-son" ("JSON" read literally) are both build failures.
|
||||
- Numbers with meaning stay ("fifteen releases"); commit hashes, PR numbers,
|
||||
and version micro-detail are never spoken.
|
||||
- Open with the week + the marquee, close with the digest pointer
|
||||
("See everything at hyperframes dot heygen dot com").
|
||||
("See everything at frames dot heygen dot com").
|
||||
- **Teach the simple command.** When a feature has a one-line invocation (a
|
||||
slash command, a CLI one-liner), the script says it verbatim ("start your
|
||||
prompt with /figma…") and the mock shows it being typed — the command is
|
||||
@@ -28,7 +28,7 @@ a VO saying "juh-son" ("JSON" read literally) are both build failures.
|
||||
"lines": [
|
||||
{
|
||||
"id": "l1",
|
||||
"tokens": ["This", "week", "at", "HyperFrames,", { "display": "JSON", "spoken": "jay-sawn" }]
|
||||
"tokens": ["This", "week", "at", "Frames,", { "display": "JSON", "spoken": "jay-sawn" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -62,7 +62,7 @@ spelling, hyphens, and spacing:
|
||||
4. **Versions/numbers**: expand — `v0.7.36 → "version zero point seven
|
||||
point thirty-six"` (usually: don't speak versions at all),
|
||||
`1080×1080 → "ten-eighty by ten-eighty"`.
|
||||
5. **URLs**: `hyperframes.heygen.com → "hyperframes dot hey-jen dot com"`.
|
||||
5. **URLs**: `frames.hanzo.ai → "frames dot hey-jen dot com"`.
|
||||
6. **Filenames/extensions**: `.mp4 → "dot em pee four"` — or rephrase so the
|
||||
extension isn't spoken.
|
||||
7. **Emphasis/pauses**: commas and em-dashes, never caps. Ellipses are
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: motion-doctrine
|
||||
description: "GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]"
|
||||
description: "GATEWAY — load FIRST before composing any Frames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]"
|
||||
---
|
||||
|
||||
# Motion Doctrine (Gateway)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
#!/usr/bin/env node
|
||||
// seam-gate.mjs — numeric Seam Gate verifier for HyperFrames films (motion-doctrine).
|
||||
// seam-gate.mjs — numeric Seam Gate verifier for Frames films (motion-doctrine).
|
||||
// Zero npm dependencies: drives chrome-headless-shell over raw CDP (node >= 22).
|
||||
//
|
||||
// verify node seam-gate.mjs verify --ledger ledger.json --project <dir> [--json]
|
||||
@@ -71,7 +71,7 @@ async function ensureServer() {
|
||||
const port = 5380 + Math.floor(Math.random() * 20);
|
||||
const env = { ...process.env };
|
||||
delete env.HYPERFRAME_RUNTIME_URL; // wrong value fails silently as 200 HTML
|
||||
const cmd = flag("server-cmd", `npx --yes hyperframes preview --no-open --port ${port}`);
|
||||
const cmd = flag("server-cmd", `npx --yes frames preview --no-open --port ${port}`);
|
||||
const child = spawn("sh", ["-c", cmd.replace(/\{port\}/g, String(port))], {
|
||||
cwd: project,
|
||||
env,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: oversized-cursor
|
||||
description: House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.
|
||||
description: House-style oversized macOS cursor technique for Frames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.
|
||||
---
|
||||
|
||||
# Oversized Cursor — the eye-carrier
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: seam-craft
|
||||
description: Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.
|
||||
description: Render-correctness doctrine for scene-to-scene seams in Frames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.
|
||||
---
|
||||
|
||||
# Seam Craft — render prerequisites for scene-to-scene transitions
|
||||
|
||||
+10
-10
@@ -1,17 +1,17 @@
|
||||
{
|
||||
"name": "hyperframes",
|
||||
"description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
|
||||
"name": "frames",
|
||||
"description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for Frames.",
|
||||
"version": "0.7.81",
|
||||
"author": {
|
||||
"name": "HeyGen",
|
||||
"email": "hyper[email protected]",
|
||||
"url": "https://hyperframes.heygen.com"
|
||||
"email": "[email protected]",
|
||||
"url": "https://frames.hanzo.ai"
|
||||
},
|
||||
"homepage": "https://hyperframes.heygen.com",
|
||||
"repository": "https://github.com/heygen-com/hyperframes",
|
||||
"homepage": "https://frames.hanzo.ai",
|
||||
"repository": "https://github.com/hanzoai/frames",
|
||||
"license": "Apache-2.0",
|
||||
"keywords": [
|
||||
"hyperframes",
|
||||
"frames",
|
||||
"video",
|
||||
"html",
|
||||
"tailwind",
|
||||
@@ -29,13 +29,13 @@
|
||||
],
|
||||
"skills": "./skills/",
|
||||
"interface": {
|
||||
"displayName": "HyperFrames by HeyGen",
|
||||
"displayName": "Frames by HeyGen",
|
||||
"shortDescription": "Write HTML, render video",
|
||||
"longDescription": "Build videos from HTML with HyperFrames. Author compositions with HTML, CSS, Tailwind v4 browser-runtime styles, GSAP, Anime.js, Lottie, Three.js, and WAAPI adapter patterns, use the CLI for the dev loop (init/preview/render), preprocess assets (tts/transcribe/remove-background) for compositions, install reusable registry blocks and components, and turn any website into a video with the 7-step capture-to-video pipeline.",
|
||||
"longDescription": "Build videos from HTML with Frames. Author compositions with HTML, CSS, Tailwind v4 browser-runtime styles, GSAP, Anime.js, Lottie, Three.js, and WAAPI adapter patterns, use the CLI for the dev loop (init/preview/render), preprocess assets (tts/transcribe/remove-background) for compositions, install reusable registry blocks and components, and turn any website into a video with the 7-step capture-to-video pipeline.",
|
||||
"developerName": "HeyGen",
|
||||
"category": "Creativity",
|
||||
"capabilities": ["Read", "Write"],
|
||||
"websiteURL": "https://hyperframes.heygen.com",
|
||||
"websiteURL": "https://frames.hanzo.ai",
|
||||
"defaultPrompt": [
|
||||
"Turn this website into a 20-second product promo",
|
||||
"Create an animated title card with kinetic type",
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
{
|
||||
"$schema": "https://cursor.com/schemas/cursor-plugin/plugin.json",
|
||||
"name": "hyperframes",
|
||||
"displayName": "HyperFrames by HeyGen",
|
||||
"description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for HyperFrames.",
|
||||
"name": "frames",
|
||||
"displayName": "Frames by HeyGen",
|
||||
"description": "Write HTML, render video. Compositions, Tailwind v4 styles, GSAP and runtime adapter animations, captions, voiceovers, audio-reactive visuals, and website capture for Frames.",
|
||||
"version": "0.7.81",
|
||||
"author": {
|
||||
"name": "HeyGen",
|
||||
"email": "hyper[email protected]"
|
||||
"email": "[email protected]"
|
||||
},
|
||||
"publisher": "HeyGen",
|
||||
"homepage": "https://hyperframes.heygen.com",
|
||||
"repository": "https://github.com/heygen-com/hyperframes",
|
||||
"homepage": "https://frames.hanzo.ai",
|
||||
"repository": "https://github.com/hanzoai/frames",
|
||||
"license": "Apache-2.0",
|
||||
"logo": "assets/logo.png",
|
||||
"category": "developer-tools",
|
||||
"keywords": [
|
||||
"hyperframes",
|
||||
"frames",
|
||||
"video",
|
||||
"html",
|
||||
"tailwind",
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
# No environment variables required for basic usage.
|
||||
# Run `bun run dev` to start the studio, `npx hyperframes render` to render video.
|
||||
# Run `bun run dev` to start the studio, `npx frames render` to render video.
|
||||
|
||||
# Optional integrations:
|
||||
# GEMINI_API_KEY= # AI image captioning during website capture (~$0.001/image, https://aistudio.google.com/apikey)
|
||||
|
||||
@@ -6,9 +6,9 @@ body:
|
||||
attributes:
|
||||
value: |
|
||||
Thanks for taking the time to report a bug! Before filing, please:
|
||||
- Search [existing issues](https://github.com/heygen-com/hyperframes/issues) to avoid duplicates
|
||||
- Search [existing issues](https://github.com/hanzoai/frames/issues) to avoid duplicates
|
||||
- Make sure the issue reproduces without custom extensions or plugins
|
||||
- Test on the latest version (`npx hyperframes upgrade`)
|
||||
- Test on the latest version (`npx frames upgrade`)
|
||||
|
||||
- type: textarea
|
||||
id: description
|
||||
@@ -25,10 +25,10 @@ body:
|
||||
description: |
|
||||
A link to a **public** GitHub repository with a minimal reproduction of the issue.
|
||||
|
||||
Start from a clean project with `npx hyperframes 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 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-hyperframes-repro"
|
||||
placeholder: "https://github.com/username/my-frames-repro"
|
||||
validations:
|
||||
required: true
|
||||
|
||||
@@ -39,7 +39,7 @@ body:
|
||||
description: Step-by-step instructions using the linked reproduction.
|
||||
placeholder: |
|
||||
1. Clone the repo above
|
||||
2. Run `npx hyperframes render`
|
||||
2. Run `npx frames render`
|
||||
3. See error...
|
||||
validations:
|
||||
required: true
|
||||
@@ -64,7 +64,7 @@ body:
|
||||
id: environment
|
||||
attributes:
|
||||
label: Environment
|
||||
description: Run `npx hyperframes doctor` and paste the output here.
|
||||
description: Run `npx frames doctor` and paste the output here.
|
||||
render: shell
|
||||
placeholder: |
|
||||
✓ Version 0.x.x (latest)
|
||||
|
||||
@@ -5,7 +5,7 @@ body:
|
||||
- type: markdown
|
||||
attributes:
|
||||
value: |
|
||||
Thanks for suggesting an improvement! Please search [existing issues](https://github.com/heygen-com/hyperframes/issues) first to avoid duplicates.
|
||||
Thanks for suggesting an improvement! Please search [existing issues](https://github.com/hanzoai/frames/issues) first to avoid duplicates.
|
||||
|
||||
- type: textarea
|
||||
id: problem
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
},
|
||||
{
|
||||
"enabled": false,
|
||||
"matchPackageNames": ["/^@hyperframes//"]
|
||||
"matchPackageNames": ["/^@frames//"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -3,10 +3,10 @@ name: Catalog Previews
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
# Suppress hyperframes CLI telemetry from HeyGen's own CI runs.
|
||||
# Suppress frames CLI telemetry from HeyGen's own CI runs.
|
||||
# External users' CI continues to emit telemetry unless they set this themselves.
|
||||
env:
|
||||
HYPERFRAMES_NO_TELEMETRY: "1"
|
||||
FRAMES_NO_TELEMETRY: "1"
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
+30
-30
@@ -4,10 +4,10 @@ permissions:
|
||||
contents: read
|
||||
pull-requests: read
|
||||
|
||||
# Suppress hyperframes CLI telemetry from HeyGen's own CI runs.
|
||||
# Suppress frames CLI telemetry from HeyGen's own CI runs.
|
||||
# External users' CI continues to emit telemetry unless they set this themselves.
|
||||
env:
|
||||
HYPERFRAMES_NO_TELEMETRY: "1"
|
||||
FRAMES_NO_TELEMETRY: "1"
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
@@ -270,10 +270,10 @@ jobs:
|
||||
- uses: ./.github/actions/prepare-ffmpeg-bin
|
||||
- run: bun install --frozen-lockfile
|
||||
- run: bun run test:scripts
|
||||
- run: bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
|
||||
- run: bun run --filter '@frames/{parsers,lint,studio-server}' build
|
||||
- run: bun run --cwd packages/core build
|
||||
- run: bun run --cwd packages/core build:hyperframes-runtime
|
||||
- run: bun run --filter '!@hyperframes/producer' test
|
||||
- run: bun run --cwd packages/core build:frames-runtime
|
||||
- run: bun run --filter '!@frames/producer' test
|
||||
|
||||
producer-source-tests:
|
||||
name: "Producer: ${{ matrix.lane }} tests"
|
||||
@@ -300,9 +300,9 @@ jobs:
|
||||
sudo apt-get install -y --no-install-recommends ffmpeg
|
||||
- uses: ./.github/actions/prepare-ffmpeg-bin
|
||||
- run: bun install --frozen-lockfile
|
||||
- run: bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
|
||||
- run: bun run --filter '@frames/{parsers,lint,studio-server}' build
|
||||
- run: bun run --cwd packages/core build
|
||||
- run: bun run --filter @hyperframes/engine build
|
||||
- run: bun run --filter @frames/engine build
|
||||
- run: bun run producer:test:${{ matrix.lane }}
|
||||
|
||||
# Tests under skills/**/*.test.mjs are bare `node --test` files with only
|
||||
@@ -340,7 +340,7 @@ jobs:
|
||||
node --test "${SKILLS_TESTS[@]}"
|
||||
|
||||
# Guards that skills-manifest.json (the published freshness fingerprint read
|
||||
# by `hyperframes skills check`) was regenerated when a skill changed. Runs
|
||||
# by `frames skills check`) was regenerated when a skill changed. Runs
|
||||
# `gen:skills-manifest --check`, which compares per-skill content hashes; the
|
||||
# manifest carries no version/timestamp, so it only fails on real content
|
||||
# drift. bun runs the TS script directly, no install needed.
|
||||
@@ -423,11 +423,11 @@ jobs:
|
||||
- uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
|
||||
- uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6 # v2
|
||||
- run: bun install --frozen-lockfile
|
||||
# Build workspace deps so the sdk's @hyperframes/parsers + core subpath
|
||||
# Build workspace deps so the sdk's @frames/parsers + core subpath
|
||||
# imports resolve via the "node" export condition (dist) under vitest.
|
||||
- run: bun run --filter '@hyperframes/parsers' build
|
||||
- run: bun run --filter '@frames/parsers' build
|
||||
- run: bun run --cwd packages/core build
|
||||
- run: bun run --filter @hyperframes/sdk test
|
||||
- run: bun run --filter @frames/sdk test
|
||||
|
||||
test-runtime-contract:
|
||||
name: "Test: runtime contract"
|
||||
@@ -447,8 +447,8 @@ jobs:
|
||||
- run: bun install --frozen-lockfile
|
||||
# Runtime coverage now imports core modules that consume workspace
|
||||
# subpaths. Build their dist exports before Vitest resolves them.
|
||||
- run: bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
|
||||
- run: bun run --filter @hyperframes/core test:hyperframe-runtime-ci
|
||||
- run: bun run --filter '@frames/{parsers,lint,studio-server}' build
|
||||
- run: bun run --filter @frames/core test:hyperframe-runtime-ci
|
||||
|
||||
studio-load-smoke:
|
||||
name: "Studio: load smoke"
|
||||
@@ -467,15 +467,15 @@ jobs:
|
||||
- uses: ./.github/actions/prepare-ffmpeg-bin
|
||||
- run: bun install --frozen-lockfile
|
||||
# Build workspace deps so the studio vite.config.ts (loaded by Node) can
|
||||
# resolve @hyperframes/core and @hyperframes/studio-server via the "node"
|
||||
# resolve @frames/core and @frames/studio-server via the "node"
|
||||
# export condition (dist).
|
||||
- run: bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
|
||||
- run: bun run --filter '@frames/{parsers,lint,studio-server}' build
|
||||
- run: bun run --cwd packages/core build
|
||||
- run: bun run --cwd packages/core build:hyperframes-runtime
|
||||
- run: bun run --cwd packages/core build:frames-runtime
|
||||
- name: Start studio and check for runtime errors
|
||||
run: |
|
||||
# Start the studio Vite dev server (fast — no bundle step)
|
||||
bun run --filter '@hyperframes/studio' dev -- --port 5199 &
|
||||
bun run --filter '@frames/studio' dev -- --port 5199 &
|
||||
SERVER_PID=$!
|
||||
|
||||
# Wait for the server to be ready (up to 20s)
|
||||
@@ -520,14 +520,14 @@ jobs:
|
||||
|
||||
# Install globally using --prefix to avoid sudo
|
||||
- name: Install globally via npm
|
||||
run: npm install -g --prefix /tmp/hf-smoke ./packages/cli/hyperframes-cli-*.tgz
|
||||
run: npm install -g --prefix /tmp/hf-smoke ./packages/cli/frames-cli-*.tgz
|
||||
|
||||
# Scaffold a blank project
|
||||
- name: Init blank project
|
||||
run: |
|
||||
export PATH="/tmp/hf-smoke/bin:$PATH"
|
||||
mkdir /tmp/hf-project && cd /tmp/hf-project
|
||||
hyperframes init test-project --example blank
|
||||
frames init test-project --example blank
|
||||
|
||||
# Start preview, probe the runtime endpoint, assert no esbuild errors
|
||||
- name: Smoke-test preview server
|
||||
@@ -536,7 +536,7 @@ jobs:
|
||||
cd /tmp/hf-project/test-project
|
||||
|
||||
# Start the preview server in the background; capture stderr
|
||||
CI=true hyperframes preview --port 3099 2>/tmp/hf-stderr.log &
|
||||
CI=true frames preview --port 3099 2>/tmp/hf-stderr.log &
|
||||
SERVER_PID=$!
|
||||
|
||||
# Wait for the server to be ready (up to 15 s)
|
||||
@@ -610,21 +610,21 @@ jobs:
|
||||
# init's --skip-skills flag is neutered (see init.ts); opt out of the
|
||||
# GitHub skills check via this env so the smoke test stays offline/fast.
|
||||
env:
|
||||
HYPERFRAMES_SKIP_SKILLS: "1"
|
||||
FRAMES_SKIP_SKILLS: "1"
|
||||
run: |
|
||||
set -euo pipefail
|
||||
rm -rf /tmp/hf-cli-inside
|
||||
|
||||
bun run --filter @hyperframes/cli dev -- init /tmp/hf-cli-inside \
|
||||
bun run --filter @frames/cli dev -- init /tmp/hf-cli-inside \
|
||||
--example warm-grain \
|
||||
--video /tmp/hf-cli-input.mp4 \
|
||||
--skip-transcribe \
|
||||
--non-interactive \
|
||||
--skip-skills
|
||||
|
||||
bun run --filter @hyperframes/cli dev -- lint /tmp/hf-cli-inside
|
||||
bun run --filter @hyperframes/cli dev -- validate /tmp/hf-cli-inside --timeout 3000
|
||||
bun run --filter @hyperframes/cli dev -- render /tmp/hf-cli-inside \
|
||||
bun run --filter @frames/cli dev -- lint /tmp/hf-cli-inside
|
||||
bun run --filter @frames/cli dev -- validate /tmp/hf-cli-inside --timeout 3000
|
||||
bun run --filter @frames/cli dev -- render /tmp/hf-cli-inside \
|
||||
--quality standard \
|
||||
--workers auto \
|
||||
--strict \
|
||||
@@ -667,22 +667,22 @@ jobs:
|
||||
# init's --skip-skills flag is neutered (see init.ts); opt out of the
|
||||
# GitHub skills check via this env so the smoke test stays offline/fast.
|
||||
env:
|
||||
HYPERFRAMES_SKIP_SKILLS: "1"
|
||||
FRAMES_SKIP_SKILLS: "1"
|
||||
run: |
|
||||
set -euo pipefail
|
||||
export PATH="/tmp/hf-cli-global/bin:$PATH"
|
||||
rm -rf /tmp/hf-cli-outside
|
||||
|
||||
hyperframes init /tmp/hf-cli-outside \
|
||||
frames init /tmp/hf-cli-outside \
|
||||
--example warm-grain \
|
||||
--video /tmp/hf-cli-input.mp4 \
|
||||
--skip-transcribe \
|
||||
--non-interactive \
|
||||
--skip-skills
|
||||
|
||||
hyperframes lint /tmp/hf-cli-outside
|
||||
hyperframes validate /tmp/hf-cli-outside --timeout 3000
|
||||
hyperframes render /tmp/hf-cli-outside \
|
||||
frames lint /tmp/hf-cli-outside
|
||||
frames validate /tmp/hf-cli-outside --timeout 3000
|
||||
frames render /tmp/hf-cli-outside \
|
||||
--quality standard \
|
||||
--workers auto \
|
||||
--strict \
|
||||
|
||||
@@ -3,10 +3,10 @@ name: Docs
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
# Suppress hyperframes CLI telemetry from HeyGen's own CI runs.
|
||||
# Suppress frames CLI telemetry from HeyGen's own CI runs.
|
||||
# External users' CI continues to emit telemetry unless they set this themselves.
|
||||
env:
|
||||
HYPERFRAMES_NO_TELEMETRY: "1"
|
||||
FRAMES_NO_TELEMETRY: "1"
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
|
||||
@@ -39,7 +39,7 @@ jobs:
|
||||
context: .
|
||||
file: Dockerfile.test
|
||||
load: true
|
||||
tags: hyperframes-producer:test
|
||||
tags: frames-producer:test
|
||||
cache-from: type=gha,scope=regression-test-image
|
||||
cache-to: type=gha,mode=max,scope=regression-test-image
|
||||
|
||||
@@ -52,4 +52,4 @@ jobs:
|
||||
-e PRODUCER_VALIDATE_MIN_PSNR='${{ inputs.min_psnr }}' \
|
||||
--workdir /app/packages/producer \
|
||||
--entrypoint bunx \
|
||||
hyperframes-producer:test tsx scripts/validate-fast-video.ts
|
||||
frames-producer:test tsx scripts/validate-fast-video.ts
|
||||
|
||||
@@ -63,7 +63,7 @@
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<div id="headline">HYPERFRAMES</div>
|
||||
<div id="headline">FRAMES</div>
|
||||
<div id="sub">RENDERED ON WINDOWS</div>
|
||||
<div id="bar"></div>
|
||||
</div>
|
||||
|
||||
@@ -3,10 +3,10 @@ name: Player perf
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
# Suppress hyperframes CLI telemetry from HeyGen's own CI runs.
|
||||
# Suppress frames CLI telemetry from HeyGen's own CI runs.
|
||||
# External users' CI continues to emit telemetry unless they set this themselves.
|
||||
env:
|
||||
HYPERFRAMES_NO_TELEMETRY: "1"
|
||||
FRAMES_NO_TELEMETRY: "1"
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
@@ -88,7 +88,7 @@ jobs:
|
||||
|
||||
- run: bun install --frozen-lockfile
|
||||
|
||||
# Player perf loads packages/player/dist/hyperframes-player.global.js
|
||||
# Player perf loads packages/player/dist/frames-player.global.js
|
||||
# and packages/core/dist/hyperframe.runtime.iife.js, so a full build is required.
|
||||
- run: bun run build
|
||||
|
||||
|
||||
@@ -3,10 +3,10 @@ name: preview-regression
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
# Suppress hyperframes CLI telemetry from HeyGen's own CI runs.
|
||||
# Suppress frames CLI telemetry from HeyGen's own CI runs.
|
||||
# External users' CI continues to emit telemetry unless they set this themselves.
|
||||
env:
|
||||
HYPERFRAMES_NO_TELEMETRY: "1"
|
||||
FRAMES_NO_TELEMETRY: "1"
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
@@ -78,7 +78,7 @@ jobs:
|
||||
|
||||
- name: Build workspace packages (required for vite config loading)
|
||||
run: |
|
||||
bun run --filter '@hyperframes/{parsers,lint,studio-server}' build
|
||||
bun run --filter '@frames/{parsers,lint,studio-server}' build
|
||||
bun run --cwd packages/core build
|
||||
|
||||
- name: Run Studio preview routing regression
|
||||
@@ -87,7 +87,7 @@ jobs:
|
||||
bun run --cwd packages/studio-server test -- src/routes/thumbnail.test.ts
|
||||
|
||||
- name: Build preview runtime
|
||||
run: bun run --cwd packages/core build:hyperframes-runtime
|
||||
run: bun run --cwd packages/core build:frames-runtime
|
||||
|
||||
- name: Prepare parity fixtures
|
||||
run: bun run --cwd packages/producer parity:fixtures:ci
|
||||
|
||||
@@ -124,37 +124,37 @@ jobs:
|
||||
fi
|
||||
}
|
||||
|
||||
publish_pkg "@hyperframes/parsers" "@hyperframes/parsers"
|
||||
publish_pkg "@hyperframes/lint" "@hyperframes/lint"
|
||||
publish_pkg "@hyperframes/studio-server" "@hyperframes/studio-server"
|
||||
publish_pkg "@hyperframes/core" "@hyperframes/core"
|
||||
publish_pkg "@hyperframes/sdk" "@hyperframes/sdk"
|
||||
publish_pkg "@hyperframes/engine" "@hyperframes/engine"
|
||||
publish_pkg "@hyperframes/player" "@hyperframes/player"
|
||||
publish_pkg "@hyperframes/producer" "@hyperframes/producer"
|
||||
publish_pkg "@hyperframes/shader-transitions" "@hyperframes/shader-transitions"
|
||||
publish_pkg "@hyperframes/studio" "@hyperframes/studio"
|
||||
publish_pkg "@hyperframes/aws-lambda" "@hyperframes/aws-lambda"
|
||||
publish_pkg "@hyperframes/gcp-cloud-run" "@hyperframes/gcp-cloud-run"
|
||||
publish_pkg "@frames/parsers" "@frames/parsers"
|
||||
publish_pkg "@frames/lint" "@frames/lint"
|
||||
publish_pkg "@frames/studio-server" "@frames/studio-server"
|
||||
publish_pkg "@frames/core" "@frames/core"
|
||||
publish_pkg "@frames/sdk" "@frames/sdk"
|
||||
publish_pkg "@frames/engine" "@frames/engine"
|
||||
publish_pkg "@frames/player" "@frames/player"
|
||||
publish_pkg "@frames/producer" "@frames/producer"
|
||||
publish_pkg "@frames/shader-transitions" "@frames/shader-transitions"
|
||||
publish_pkg "@frames/studio" "@frames/studio"
|
||||
publish_pkg "@frames/aws-lambda" "@frames/aws-lambda"
|
||||
publish_pkg "@frames/gcp-cloud-run" "@frames/gcp-cloud-run"
|
||||
|
||||
# CLI is @hyperframes/cli in the monorepo but published as unscoped "hyperframes" on npm.
|
||||
# CLI is @frames/cli in the monorepo but published as unscoped "frames" on npm.
|
||||
# Rewrite the name in package.json before publishing, then use npm publish directly
|
||||
# since pnpm --filter won't match the rewritten name.
|
||||
if npm view "hyperframes@${VERSION}" version >/dev/null 2>&1; then
|
||||
echo "⏭️ hyperframes@${VERSION} already published — skipping"
|
||||
if npm view "frames@${VERSION}" version >/dev/null 2>&1; then
|
||||
echo "⏭️ frames@${VERSION} already published — skipping"
|
||||
else
|
||||
node -e "
|
||||
const fs = require('fs');
|
||||
const p = 'packages/cli/package.json';
|
||||
const pkg = JSON.parse(fs.readFileSync(p, 'utf8'));
|
||||
pkg.name = 'hyperframes';
|
||||
pkg.name = 'frames';
|
||||
fs.writeFileSync(p, JSON.stringify(pkg, null, 2) + '\n');
|
||||
"
|
||||
echo "📦 Publishing hyperframes@${VERSION}..."
|
||||
echo "📦 Publishing frames@${VERSION}..."
|
||||
if (cd packages/cli && npm publish --access public --tag "$DIST_TAG"); then
|
||||
echo "✅ hyperframes@${VERSION} published"
|
||||
echo "✅ frames@${VERSION} published"
|
||||
else
|
||||
echo "❌ hyperframes@${VERSION} failed to publish"
|
||||
echo "❌ frames@${VERSION} failed to publish"
|
||||
FAILED=1
|
||||
fi
|
||||
fi
|
||||
|
||||
@@ -3,10 +3,10 @@ name: regression
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
# Suppress hyperframes CLI telemetry from HeyGen's own CI runs.
|
||||
# Suppress frames CLI telemetry from HeyGen's own CI runs.
|
||||
# External users' CI continues to emit telemetry unless they set this themselves.
|
||||
env:
|
||||
HYPERFRAMES_NO_TELEMETRY: "1"
|
||||
FRAMES_NO_TELEMETRY: "1"
|
||||
|
||||
# Graphite can update a branch and its PR base separately for the same head
|
||||
# SHA. Keep only the newest expensive regression run for each PR/ref.
|
||||
@@ -106,7 +106,7 @@ jobs:
|
||||
context: .
|
||||
file: Dockerfile.test
|
||||
load: true
|
||||
tags: hyperframes-producer:test
|
||||
tags: frames-producer:test
|
||||
cache-from: type=gha,scope=regression-test-image
|
||||
# PR matrices can fan out across many stacked branches at once. Let
|
||||
# them consume the shared cache, but keep a single writer on main so
|
||||
@@ -122,7 +122,7 @@ jobs:
|
||||
--security-opt seccomp=unconfined \
|
||||
--shm-size=4g \
|
||||
-v ${{ github.workspace }}/packages/producer/tests:/app/packages/producer/tests \
|
||||
hyperframes-producer:test \
|
||||
frames-producer:test \
|
||||
--mode=${{ matrix.mode }} \
|
||||
${{ matrix.args }}
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@ jobs:
|
||||
- name: Authenticate
|
||||
env:
|
||||
CLAWHUB_TOKEN: ${{ secrets.CLAWHUB_TOKEN }}
|
||||
run: clawhub login --token "$CLAWHUB_TOKEN" --no-input --label "hyperframes CI"
|
||||
run: clawhub login --token "$CLAWHUB_TOKEN" --no-input --label "frames CI"
|
||||
|
||||
- name: Sync skills
|
||||
env:
|
||||
|
||||
@@ -3,12 +3,12 @@ name: Windows render verification
|
||||
permissions:
|
||||
contents: read
|
||||
|
||||
# Suppress hyperframes CLI telemetry from HeyGen's own CI runs.
|
||||
# Suppress frames CLI telemetry from HeyGen's own CI runs.
|
||||
# External users' CI continues to emit telemetry unless they set this themselves.
|
||||
env:
|
||||
HYPERFRAMES_NO_TELEMETRY: "1"
|
||||
FRAMES_NO_TELEMETRY: "1"
|
||||
|
||||
# Manually triggered smoke test that renders a HyperFrames composition on a
|
||||
# Manually triggered smoke test that renders a Frames composition on a
|
||||
# real Windows runner. Proves the PR #336 `where ffmpeg` fix actually works
|
||||
# end-to-end: FFmpeg is discovered natively on Windows, Chrome is installed
|
||||
# and launched, frames are captured, and an MP4 is produced — without Docker
|
||||
@@ -190,10 +190,10 @@ jobs:
|
||||
run: bun run build
|
||||
|
||||
# -----------------------------------------------------------------
|
||||
# Prove the PR #336 fix: hyperframes doctor exercises findFFmpeg()
|
||||
# Prove the PR #336 fix: frames doctor exercises findFFmpeg()
|
||||
# and whichBinary() — both must pass on Windows without workarounds.
|
||||
# -----------------------------------------------------------------
|
||||
- name: hyperframes doctor (verifies `where ffmpeg` fix)
|
||||
- name: frames doctor (verifies `where ffmpeg` fix)
|
||||
shell: pwsh
|
||||
run: node packages/cli/dist/cli.js doctor
|
||||
|
||||
@@ -202,7 +202,7 @@ jobs:
|
||||
# init's --skip-skills flag is neutered (see init.ts); opt out of the
|
||||
# GitHub skills check via this env so the canary scaffold stays offline.
|
||||
env:
|
||||
HYPERFRAMES_SKIP_SKILLS: "1"
|
||||
FRAMES_SKIP_SKILLS: "1"
|
||||
run: |
|
||||
New-Item -ItemType Directory -Force -Path "$env:RUNNER_TEMP\windows-canary" | Out-Null
|
||||
cd "$env:RUNNER_TEMP\windows-canary"
|
||||
@@ -440,11 +440,11 @@ jobs:
|
||||
# Enumerate the packages we want to test instead of negating —
|
||||
# `bun run --filter "!a" --filter "!b"` composes as a union (any
|
||||
# package matching either negation runs), not an intersection.
|
||||
# That meant `@hyperframes/producer` was effectively still being
|
||||
# That meant `@frames/producer` was effectively still being
|
||||
# tested on Windows, which is what we explicitly want skipped
|
||||
# (Docker / LFS-baseline tooling).
|
||||
run: bun run --filter @hyperframes/core --filter @hyperframes/engine --filter @hyperframes/player --filter @hyperframes/cli --filter @hyperframes/studio --filter @hyperframes/shader-transitions test
|
||||
run: bun run --filter @frames/core --filter @frames/engine --filter @frames/player --filter @frames/cli --filter @frames/studio --filter @frames/shader-transitions test
|
||||
|
||||
- name: Run runtime contract test
|
||||
shell: pwsh
|
||||
run: bun run --filter "@hyperframes/core" test:hyperframe-runtime-ci
|
||||
run: bun run --filter "@frames/core" test:hyperframe-runtime-ci
|
||||
|
||||
+6
-6
@@ -1,8 +1,8 @@
|
||||
# Adopters
|
||||
|
||||
This page lists organizations using HyperFrames in production or actively evaluating it. If your team is shipping with HyperFrames — whether you're rendering hundreds of videos a day, building agent-driven composition tooling, or experimenting with HTML-as-video for the first time — we'd love to hear about it.
|
||||
This page lists organizations using Frames in production or actively evaluating it. If your team is shipping with Frames — whether you're rendering hundreds of videos a day, building agent-driven composition tooling, or experimenting with HTML-as-video for the first time — we'd love to hear about it.
|
||||
|
||||
Adding your organization helps the community understand how HyperFrames is being used in the wild and makes it easier for new users to find peers solving similar problems.
|
||||
Adding your organization helps the community understand how Frames is being used in the wild and makes it easier for new users to find peers solving similar problems.
|
||||
|
||||
## How to add your organization
|
||||
|
||||
@@ -10,17 +10,17 @@ Open a pull request that adds a row to the table below. Keep entries short:
|
||||
|
||||
- **Organization** — your company or project name, linked to your website.
|
||||
- **Contact** — a GitHub handle or contact person who can answer questions about your usage.
|
||||
- **How HyperFrames is used** — one sentence on the use case (e.g., "Personalized video at scale," "Agent-authored marketing assets," "Slides-to-video pipeline").
|
||||
- **How Frames is used** — one sentence on the use case (e.g., "Personalized video at scale," "Agent-authored marketing assets," "Slides-to-video pipeline").
|
||||
|
||||
If you'd rather not be listed publicly, that's fine — drop a note in [our Discord](https://discord.gg/EbK98HBPdk) instead. We always like hearing about how the project is being used.
|
||||
|
||||
## Production
|
||||
|
||||
| Organization | Contact | How HyperFrames is used |
|
||||
| Organization | Contact | How Frames is used |
|
||||
| ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
|
||||
| [HeyGen](https://www.heygen.com) | [@jrusso1020](https://github.com/jrusso1020) | Powers AI-generated video composition and rendering across HeyGen's video product surface. |
|
||||
| [tldraw](https://tldraw.com) | [@steveruizok](https://github.com/steveruizok) | Generates automated pull-request walkthrough videos with GSAP-animated code diffs, narration, and captions. |
|
||||
| [TanStack](https://tanstack.com) | [@AlemTuzlak](https://github.com/AlemTuzlak) | Exploring HyperFrames for short-form code demo videos and documentation. |
|
||||
| [OptinMonster](https://optinmonster.com) | Angie Meeker | Exploring HyperFrames for marketing and product video content. |
|
||||
| [TanStack](https://tanstack.com) | [@AlemTuzlak](https://github.com/AlemTuzlak) | Exploring Frames for short-form code demo videos and documentation. |
|
||||
| [OptinMonster](https://optinmonster.com) | Angie Meeker | Exploring Frames for marketing and product video content. |
|
||||
| [reap](https://reap.video) | [@usamaabid](https://github.com/usamaabid) | Powers agent-first AI video clipping, editing, and rendering across reap.video's creator and agent workflows. |
|
||||
| [Typeframe](https://typeframe.app) | [@kiyeonjeon21](https://github.com/kiyeonjeon21) | Renders speech videos into shareable MP4 exports with word-timed typing captions and styled caption layouts. |
|
||||
|
||||
@@ -4,14 +4,14 @@ Open-source video rendering framework: write HTML, render video.
|
||||
|
||||
## Skills
|
||||
|
||||
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 `/hyperframes` router installs each creation workflow on demand; install everything only when the user explicitly asks for the full set.
|
||||
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 hyperframes skills update # default: installs/refreshes the core set — workflows install on demand
|
||||
npx skills add heygen-com/hyperframes --full-depth # interactive picker (terminal only — non-interactive without --skill installs everything)
|
||||
npx 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)
|
||||
```
|
||||
|
||||
**Creation workflows** route through one entry skill — read `/hyperframes` first: it orients you to the whole surface, confirms the brief up front (the intent layer), and maps "make me a…" intent — usually a video, but also a navigable deck (`/slideshow`) or a composition port (`/remotion-to-hyperframes`) — to a concrete workflow. Consult it before invoking a specific workflow:
|
||||
**Creation workflows** route through one entry skill — read `/frames` first: it orients you to the whole surface, confirms the brief up front (the intent layer), and maps "make me a…" intent — usually a video, but also a navigable deck (`/slideshow`) or a composition port (`/remotion-to-frames`) — to a concrete workflow. Consult it before invoking a specific workflow:
|
||||
|
||||
- `/product-launch-video` — any **website** URL (or a pre-written script / text brief in no-capture mode) → a product launch / promo video, or a site tour / showcase featuring the site's own captured screens; up to ~3 min (sweet spot ~30-90s).
|
||||
- `/faceless-explainer` — arbitrary text, **no URL and no website capture** → faceless explainer, up to ~3 min (sweet spot ~30-90s); every visual is LLM-invented (typography / abstract graphics / diagram / data-viz).
|
||||
@@ -21,9 +21,9 @@ npx skills add heygen-com/hyperframes --full-depth # interactive picker (termi
|
||||
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||
- `/music-to-video` — a **music track** (audio file, or video to pull audio from) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
|
||||
- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
|
||||
- `/general-video` — fallback for any other video creation (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes flow — design → plan → layout → build → validate, any length.
|
||||
- `/general-video` — fallback for any other video creation (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full Frames toolbox; the original frames flow — design → plan → layout → build → validate, any length.
|
||||
|
||||
**Porting an existing composition?** `/remotion-to-hyperframes` translates a Remotion (React) video composition into HyperFrames HTML — a source migration, separate from the creation workflows above.
|
||||
**Porting an existing composition?** `/remotion-to-frames` translates a Remotion (React) video composition into Frames HTML — a source migration, separate from the creation workflows above.
|
||||
|
||||
## Build & Test
|
||||
|
||||
@@ -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 hyperframes lint # Static HTML structure check
|
||||
npx hyperframes check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
npx frames lint # Static HTML structure check
|
||||
npx frames check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
```
|
||||
|
||||
Both must pass before previewing or considering work complete.
|
||||
@@ -60,10 +60,10 @@ Both must pass before previewing or considering work complete.
|
||||
|
||||
```
|
||||
packages/
|
||||
cli/ → hyperframes CLI (create, preview, lint, render)
|
||||
cli/ → frames CLI (create, preview, lint, render)
|
||||
core/ → Types, parsers, generators, linter, runtime, frame adapters
|
||||
engine/ → Seekable page-to-video capture engine (Puppeteer + FFmpeg)
|
||||
player/ → Embeddable <hyperframes-player> web component
|
||||
player/ → Embeddable <frames-player> web component
|
||||
producer/ → Full rendering pipeline (capture + encode + audio mix)
|
||||
shader-transitions/ → WebGL shader transitions for compositions
|
||||
studio/ → Browser-based composition editor UI
|
||||
@@ -71,7 +71,7 @@ registry/
|
||||
blocks/ → Installable sub-composition scenes (50+)
|
||||
components/ → Installable effects and snippets
|
||||
examples/ → Starter project templates
|
||||
docs/ → Mintlify documentation site (hyperframes.heygen.com)
|
||||
docs/ → Mintlify documentation site (frames.hanzo.ai)
|
||||
skills/ → AI agent skill definitions
|
||||
```
|
||||
|
||||
@@ -86,5 +86,5 @@ skills/ → AI agent skill definitions
|
||||
|
||||
## Documentation
|
||||
|
||||
- Docs: https://hyperframes.heygen.com/introduction
|
||||
- Catalog (50+ blocks): https://hyperframes.heygen.com/catalog/blocks/data-chart
|
||||
- Docs: https://frames.hanzo.ai/introduction
|
||||
- Catalog (50+ blocks): https://frames.hanzo.ai/catalog/blocks/data-chart
|
||||
|
||||
@@ -4,18 +4,18 @@ Open-source video rendering framework: write HTML, render video.
|
||||
|
||||
## Skills
|
||||
|
||||
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 `/hyperframes` router installs each creation workflow on demand; install all 19 only when the user explicitly asks for the full set.
|
||||
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 hyperframes skills update # default: installs/refreshes the core set — workflows install on demand
|
||||
npx skills add heygen-com/hyperframes --full-depth # interactive picker (terminal only — non-interactive without --skill installs all 19)
|
||||
npx skills add heygen-com/hyperframes --all --full-depth # all 19 at once — only on explicit request
|
||||
npx skills add heygen-com/hyperframes --skill <name> --full-depth # just one (bare name, no leading slash)
|
||||
npx 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)
|
||||
```
|
||||
|
||||
Keep `--full-depth`: it installs the current `main`. Without it, `skills add` fetches the skills.sh registry blob, which lags `main` by hours (you'd get a stale skill). `hyperframes skills update` already uses full-depth.
|
||||
Keep `--full-depth`: it installs the current `main`. Without it, `skills add` fetches the skills.sh registry blob, which lags `main` by hours (you'd get a stale skill). `frames skills update` already uses full-depth.
|
||||
|
||||
**`/hyperframes` is the entry skill — read it first.** It's the capability map for the domain skills below, the intent layer that confirms every creation brief up front, AND the intent router for the creation workflows. The full README skills section mirrors this list; keep them in sync (see "Skill catalog maintenance" below).
|
||||
**`/frames` is the entry skill — read it first.** It's the capability map for the domain skills below, the intent layer that confirms every creation brief up front, AND the intent router for the creation workflows. The full README skills section mirrors this list; keep them in sync (see "Skill catalog maintenance" below).
|
||||
|
||||
### Creation workflows
|
||||
|
||||
@@ -27,29 +27,29 @@ Keep `--full-depth`: it installs the current `main`. Without it, `skills add` fe
|
||||
- `/motion-graphics` — a short (typically under 10s) design-led **motion graphic**, motion-is-the-message, no narration: kinetic type, a stat / number count-up, a chart, a logo sting, a lower-third / overlay, or an animated tweet / headline / captured-page highlight; rendered to MP4 or a transparent overlay. Longer / narrated / custom → `/general-video`.
|
||||
- `/music-to-video` — a **music track** (audio file, or video to pull audio from) → beat-synced video (lyric / slideshow / kinetic promo). Music drives pacing; user-supplied images / videos are cut onto the same beat grid.
|
||||
- `/slideshow` — a **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video.
|
||||
- `/general-video` — fallback for any other video creation (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full HyperFrames toolbox; the original hyperframes flow — design → plan → layout → build → validate, any length.
|
||||
- `/remotion-to-hyperframes` — port an existing Remotion (React) composition to HyperFrames HTML. One-way migration, not creation.
|
||||
- `/general-video` — fallback for any other video creation (title card, longer brand / sizzle reel, multi-scene montage, static loop, custom composition) and the home of **companion mode** — co-create with the full Frames toolbox; the original frames flow — design → plan → layout → build → validate, any length.
|
||||
- `/remotion-to-frames` — port an existing Remotion (React) composition to Frames HTML. One-way migration, not creation.
|
||||
|
||||
### Domain skills (loaded on demand)
|
||||
|
||||
Atomic capabilities the creation workflows compose against — pull one when you need that specific layer:
|
||||
|
||||
- `/hyperframes-core` — the composition contract: `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules. Read before writing composition HTML.
|
||||
- `/hyperframes-animation` — all animation knowledge: atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP default, plus Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).
|
||||
- `/hyperframes-keyframes` — seek-safe keyframe authoring across runtimes: GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth; plus `hyperframes keyframes` diagnostics for surfacing and verifying rendered motion.
|
||||
- `/hyperframes-creative` — non-animation creative direction: `frame.md` / `design.md` handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
|
||||
- `/frames-core` — the composition contract: `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules. Read before writing composition HTML.
|
||||
- `/frames-animation` — all animation knowledge: atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP default, plus Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU).
|
||||
- `/frames-keyframes` — seek-safe keyframe authoring across runtimes: GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth; plus `frames keyframes` diagnostics for surfacing and verifying rendered motion.
|
||||
- `/frames-creative` — non-animation creative direction: `frame.md` / `design.md` handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns.
|
||||
- `/media-use` — the media OS: resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record; generate via TTS / music / image models when the catalog misses; transcribe, caption, remove backgrounds, and reuse assets across projects. One shared `scripts/audio.mjs` engine + manifest tracking; keeps search noise on disk.
|
||||
- `/hyperframes-cli` — CLI dev loop: `init`, `add`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, `lambda` (AWS Lambda cloud rendering).
|
||||
- `/hyperframes-registry` — install and wire registry blocks and components into compositions via `hyperframes add`. Covers authoring a new block or component to contribute upstream.
|
||||
- `/frames-cli` — CLI dev loop: `init`, `add`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, `lambda` (AWS Lambda cloud rendering).
|
||||
- `/frames-registry` — install and wire registry blocks and components into compositions via `frames add`. Covers authoring a new block or component to contribute upstream.
|
||||
- `/figma` — import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition.
|
||||
|
||||
## Skill catalog maintenance
|
||||
|
||||
When adding a new skill, or substantially renaming / repurposing an existing one, update all agent-facing discoverability surfaces in lockstep:
|
||||
|
||||
1. The skill list above (CLAUDE.md) AND the workflow list in the root `AGENTS.md` (it carries workflows only, no domain-skill section) AND the `## Skills` section in `README.md` AND `docs/guides/skills.mdx` (rendered at [hyperframes.heygen.com/guides/skills](https://hyperframes.heygen.com/guides/skills)). Out-of-date entries silently kill discovery.
|
||||
2. The scaffolded project template `packages/cli/src/templates/_shared/CLAUDE.md` + `AGENTS.md` — written into every `hyperframes init` project, so a stale entry there ships to users. The two template files must stay byte-identical.
|
||||
3. If the skill changes the routing surface for "make a video" requests, also update the routing table + intent layer in `skills/hyperframes/SKILL.md` AND that workflow's entry in `skills/hyperframes/references/workflow-catalog.md` (the input/output/trigger contract the router reads before the workflow is installed) — plus its row in `references/route-briefs.md` when the route asks questions.
|
||||
1. The skill list above (CLAUDE.md) AND the workflow list in the root `AGENTS.md` (it carries workflows only, no domain-skill section) AND the `## Skills` section in `README.md` AND `docs/guides/skills.mdx` (rendered at [frames.hanzo.ai/guides/skills](https://frames.hanzo.ai/guides/skills)). Out-of-date entries silently kill discovery.
|
||||
2. The scaffolded project template `packages/cli/src/templates/_shared/CLAUDE.md` + `AGENTS.md` — written into every `frames init` project, so a stale entry there ships to users. The two template files must stay byte-identical.
|
||||
3. If the skill changes the routing surface for "make a video" requests, also update the routing table + intent layer in `skills/frames/SKILL.md` AND that workflow's entry in `skills/frames/references/workflow-catalog.md` (the input/output/trigger contract the router reads before the workflow is installed) — plus its row in `references/route-briefs.md` when the route asks questions.
|
||||
4. Mirror the Router / Creation workflows / Domain skills grouping across all surfaces so a skill always lives in the same column.
|
||||
5. Skill count appears in the README and CLAUDE.md intro lines ("19 AI agent skills…") — update on add/remove. The `docs/guides/skills.mdx` page and the CLI templates deliberately omit a count to avoid drift; keep them count-free.
|
||||
|
||||
@@ -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 hyperframes lint # Static HTML structure check
|
||||
npx hyperframes check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
npx frames lint # Static HTML structure check
|
||||
npx frames check # Browser gate (headless Chrome — runtime errors, layout, motion, WCAG contrast)
|
||||
```
|
||||
|
||||
Both must pass before previewing or considering work complete.
|
||||
@@ -90,10 +90,10 @@ Both must pass before previewing or considering work complete.
|
||||
|
||||
```
|
||||
packages/
|
||||
cli/ → hyperframes CLI (create, preview, lint, render)
|
||||
cli/ → frames CLI (create, preview, lint, render)
|
||||
core/ → Types, parsers, generators, linter, runtime, frame adapters
|
||||
engine/ → Seekable page-to-video capture engine (Puppeteer + FFmpeg)
|
||||
player/ → Embeddable <hyperframes-player> web component
|
||||
player/ → Embeddable <frames-player> web component
|
||||
producer/ → Full rendering pipeline (capture + encode + audio mix)
|
||||
shader-transitions/ → WebGL shader transitions for compositions
|
||||
studio/ → Browser-based composition editor UI
|
||||
@@ -101,7 +101,7 @@ registry/
|
||||
blocks/ → Installable sub-composition scenes (50+)
|
||||
components/ → Installable effects and snippets
|
||||
examples/ → Starter project templates
|
||||
docs/ → Mintlify documentation site (hyperframes.heygen.com)
|
||||
docs/ → Mintlify documentation site (frames.hanzo.ai)
|
||||
skills/ → AI agent skill definitions
|
||||
```
|
||||
|
||||
@@ -116,5 +116,5 @@ skills/ → AI agent skill definitions
|
||||
|
||||
## Documentation
|
||||
|
||||
- Docs: https://hyperframes.heygen.com/introduction
|
||||
- Catalog (50+ blocks): https://hyperframes.heygen.com/catalog/blocks/data-chart
|
||||
- Docs: https://frames.hanzo.ai/introduction
|
||||
- Catalog (50+ blocks): https://frames.hanzo.ai/catalog/blocks/data-chart
|
||||
|
||||
+1
-1
@@ -30,7 +30,7 @@ Examples of unacceptable behavior:
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||
reported to the project maintainers via [GitHub Issues](https://github.com/heygen-com/hyperframes/issues). All complaints will
|
||||
reported to the project maintainers via [GitHub Issues](https://github.com/hanzoai/frames/issues). All complaints will
|
||||
be reviewed and investigated promptly and fairly.
|
||||
|
||||
## Attribution
|
||||
|
||||
+14
-14
@@ -5,7 +5,7 @@ Thanks for your interest in contributing to Hyperframes! This guide will help yo
|
||||
## Getting Started
|
||||
|
||||
1. Fork the repository
|
||||
2. Clone your fork: `git clone https://github.com/YOUR_USERNAME/hyperframes.git`
|
||||
2. Clone your fork: `git clone https://github.com/YOUR_USERNAME/frames.git`
|
||||
3. Install dependencies: `bun install`
|
||||
4. Create a branch: `git checkout -b my-feature`
|
||||
|
||||
@@ -23,9 +23,9 @@ bun run format:check # Check formatting
|
||||
### Running Tests
|
||||
|
||||
```bash
|
||||
bun run --filter @hyperframes/core test # Core unit tests (vitest)
|
||||
bun run --filter @hyperframes/engine test # Engine unit tests (vitest)
|
||||
bun run --filter @hyperframes/core test:hyperframe-runtime-ci # Runtime contract tests
|
||||
bun run --filter @frames/core test # Core unit tests (vitest)
|
||||
bun run --filter @frames/engine test # Engine unit tests (vitest)
|
||||
bun run --filter @frames/core test:hyperframe-runtime-ci # Runtime contract tests
|
||||
```
|
||||
|
||||
### Linting & Formatting
|
||||
@@ -63,7 +63,7 @@ const event = data as unknown as RuntimeEvent;
|
||||
|
||||
## Adding Registry Items (Blocks & Components)
|
||||
|
||||
The registry at `registry/` contains reusable items installable via `hyperframes add <name>`. Each item lives in its own directory under `registry/blocks/` or `registry/components/`.
|
||||
The registry at `registry/` contains reusable items installable via `frames add <name>`. Each item lives in its own directory under `registry/blocks/` or `registry/components/`.
|
||||
|
||||
### Directory structure
|
||||
|
||||
@@ -94,8 +94,8 @@ 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 hyperframes lint` and `npx hyperframes validate` on your HTML
|
||||
5. Test the install flow: `hyperframes add <name> --dir /tmp/test-project`
|
||||
4. Run `npx frames lint` and `npx frames validate` on your HTML
|
||||
5. Test the install flow: `frames add <name> --dir /tmp/test-project`
|
||||
|
||||
### Auto-generated docs
|
||||
|
||||
@@ -126,11 +126,11 @@ The script wipes `docs/catalog/` before regenerating, so deleted items are autom
|
||||
|
||||
| Package | Description |
|
||||
| ----------------------- | ------------------------------------------- |
|
||||
| `@hyperframes/core` | Types, HTML generation, runtime, linter |
|
||||
| `@hyperframes/engine` | Seekable page-to-video capture engine |
|
||||
| `@hyperframes/producer` | Full rendering pipeline (capture + encode) |
|
||||
| `@hyperframes/studio` | Composition editor UI |
|
||||
| `hyperframes` | CLI for creating, previewing, and rendering |
|
||||
| `@frames/core` | Types, HTML generation, runtime, linter |
|
||||
| `@frames/engine` | Seekable page-to-video capture engine |
|
||||
| `@frames/producer` | Full rendering pipeline (capture + encode) |
|
||||
| `@frames/studio` | Composition editor UI |
|
||||
| `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 @hyperframes/core@alpha` (or `@beta`, `@rc`). The `latest` tag is never touched by pre-releases, so `npm install @hyperframes/core` always gets the last stable version.
|
||||
Consumers install pre-releases with `npm install @frames/core@alpha` (or `@beta`, `@rc`). The `latest` tag is never touched by pre-releases, so `npm install @frames/core` always gets the last stable version.
|
||||
|
||||
Pre-releases also create GitHub Releases marked as **pre-release**.
|
||||
|
||||
@@ -178,7 +178,7 @@ bun run set-version 0.2.0 --no-tag # updates package.json files only
|
||||
|
||||
## Reporting Issues
|
||||
|
||||
- Use [GitHub Issues](https://github.com/heygen-com/hyperframes/issues) for bug reports and feature requests
|
||||
- Use [GitHub Issues](https://github.com/hanzoai/frames/issues) for bug reports and feature requests
|
||||
- Search existing issues before creating a new one
|
||||
- Include reproduction steps for bugs
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# HyperFrames Design System & Style Guide
|
||||
# Frames Design System & Style Guide
|
||||
|
||||
Use this guide to configure Mintlify docs or any other platform to match the HyperFrames brand.
|
||||
Use this guide to configure Mintlify docs or any other platform to match the Frames brand.
|
||||
|
||||
---
|
||||
|
||||
@@ -154,7 +154,7 @@ Use this guide to configure Mintlify docs or any other platform to match the Hyp
|
||||
|
||||
## Shadows & Effects
|
||||
|
||||
- **No heavy shadows** — HyperFrames uses a flat, minimal aesthetic
|
||||
- **No heavy shadows** — Frames uses a flat, minimal aesthetic
|
||||
- **Borders over shadows** — Use `1px solid var(--border)` instead of box-shadows
|
||||
- **Backdrop blur** for nav: `backdrop-filter: blur(12px)`
|
||||
- **Selection color**: `rgba(128,128,128,0.2)` (light) / `rgba(255,255,255,0.15)` (dark)
|
||||
@@ -296,6 +296,6 @@ Additional overrides (code font, CSS variables, heading tracking) live in `docs/
|
||||
|
||||
## Brand Assets
|
||||
|
||||
- **Logo**: "HyperFrames" in `--font-display` at 600 weight
|
||||
- **Logo**: "Frames" in `--font-display` at 600 weight
|
||||
- **Primary color**: `#0a0a0a` (near-black)
|
||||
- **Warm neutral palette**: Beige/cream tones, not pure grays
|
||||
|
||||
+1
-1
@@ -90,7 +90,7 @@ window.__timelines["my-video"] = tl;
|
||||
After CLI commands, show what the user should see:
|
||||
|
||||
```bash
|
||||
npx hyperframes preview
|
||||
npx frames preview
|
||||
# ✓ Server running at http://localhost:3000
|
||||
# ✓ Watching for changes...
|
||||
```
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
Hanzo Frames
|
||||
Copyright 2026 Hanzo AI, Inc.
|
||||
|
||||
This product includes software developed by the HyperFrames project
|
||||
(https://github.com/heygen-com/hyperframes), Copyright HeyGen, licensed under
|
||||
the Apache License, Version 2.0.
|
||||
|
||||
Hanzo Frames is a fork. It has been rebranded and adapted for the Hanzo stack:
|
||||
the package and identifiers were renamed hyperframes -> frames, and hosts point
|
||||
at frames.hanzo.ai.
|
||||
|
||||
The JSON Schema identifiers ($schema) were remapped to frames.hanzo.ai/schema/*.
|
||||
Those are dereferenced by validators, so the schema files in docs/schema/ MUST be
|
||||
served at that path; until they are, the identifiers name a host that does not
|
||||
answer.
|
||||
|
||||
The upstream HeyGen SaaS integration (CLI auth against heygen.com, api.heygen.com)
|
||||
is deliberately retained unrenamed pending removal: it is a dependency on their
|
||||
cloud rather than a name of ours to take.
|
||||
|
||||
Original attribution files (LICENSE, CREDITS.md) are carried forward unmodified.
|
||||
@@ -2,13 +2,13 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="docs/logo/dark.svg">
|
||||
<source media="(prefers-color-scheme: light)" srcset="docs/logo/light.svg">
|
||||
<img alt="HyperFrames" src="docs/logo/light.svg" width="300">
|
||||
<img alt="Frames" src="docs/logo/light.svg" width="300">
|
||||
</picture>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/v/hyperframes.svg?style=flat" alt="npm version"></a>
|
||||
<a href="https://www.npmjs.com/package/hyperframes"><img src="https://img.shields.io/npm/dm/hyperframes.svg?style=flat" alt="npm downloads"></a>
|
||||
<a href="https://www.npmjs.com/package/frames"><img src="https://img.shields.io/npm/v/frames.svg?style=flat" alt="npm version"></a>
|
||||
<a href="https://www.npmjs.com/package/frames"><img src="https://img.shields.io/npm/dm/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>
|
||||
<a href="https://discord.gg/EbK98HBPdk"><img src="https://img.shields.io/badge/Discord-Join-5865F2?logo=discord&logoColor=white" alt="Discord"></a>
|
||||
@@ -17,47 +17,47 @@
|
||||
<p align="center"><b>Write HTML. Render video. Built for agents.</b></p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://hyperframes.heygen.com/quickstart">Quickstart</a> |
|
||||
<a href="https://hyperframes.heygen.com/showcase">Showcase</a> |
|
||||
<a href="https://www.hyperframes.dev/">Playground</a> |
|
||||
<a href="https://hyperframes.heygen.com/catalog/blocks/data-chart">Catalog</a> |
|
||||
<a href="https://hyperframes.heygen.com/introduction">Docs</a> |
|
||||
<a href="https://frames.hanzo.ai/quickstart">Quickstart</a> |
|
||||
<a href="https://frames.hanzo.ai/showcase">Showcase</a> |
|
||||
<a href="https://www.frames.hanzo.ai/">Playground</a> |
|
||||
<a href="https://frames.hanzo.ai/catalog/blocks/data-chart">Catalog</a> |
|
||||
<a href="https://frames.hanzo.ai/introduction">Docs</a> |
|
||||
<a href="https://discord.gg/EbK98HBPdk">Discord</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<img src="docs/public/images/hyperframes-logo-motion-1280-trimmed.webp" alt="HyperFrames demo: HTML code on the left transforms into a rendered video on the right" width="800">
|
||||
<img src="docs/public/images/frames-logo-motion-1280-trimmed.webp" alt="Frames demo: HTML code on the left transforms into a rendered video on the right" width="800">
|
||||
</p>
|
||||
|
||||
HyperFrames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
|
||||
Frames is an open-source framework for turning HTML, CSS, media, and seekable animations into deterministic MP4 videos. Use it locally with the CLI, from AI coding agents with skills, or as the rendering core behind hosted authoring workflows.
|
||||
|
||||
## Quick Start
|
||||
|
||||
### With an AI coding agent
|
||||
|
||||
Install the HyperFrames skills, then describe the video you want:
|
||||
Install the Frames skills, then describe the video you want:
|
||||
|
||||
```bash
|
||||
npx skills add heygen-com/hyperframes --full-depth
|
||||
npx skills add hanzoai/frames --full-depth
|
||||
```
|
||||
|
||||
> The picker opens with nothing pre-selected — the **Core Skills** group is all you need: the `/hyperframes` router installs each creation workflow on demand. Agents and non-interactive runs should use `npx hyperframes 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 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. (`hyperframes skills update` already installs full-depth.)
|
||||
> `--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.)
|
||||
|
||||
Try a prompt like:
|
||||
|
||||
> Using `/hyperframes`, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
|
||||
> Using `/frames`, create a 10-second product intro with a fade-in title, a background video, and subtle background music.
|
||||
|
||||
The skills teach agents the HyperFrames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.
|
||||
The skills teach agents the Frames production loop: plan the video, write valid HTML, wire seekable animations, add media, lint, preview, and render. They work with Claude Code, Cursor, Gemini CLI, Codex, and other coding agents that support skills.
|
||||
|
||||
## Skills
|
||||
|
||||
HyperFrames ships 19 skills agents load on demand. Read `/hyperframes` 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.
|
||||
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 hyperframes skills update` installs exactly that from anywhere; the interactive picker (`npx skills add heygen-com/hyperframes --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 heygen-com/hyperframes --all --full-depth` to install all 19 deliberately (skips the picker), or `npx skills add heygen-com/hyperframes --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 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 hyperframes init` keeps the **core set** fresh (the router, the `hyperframes-*` 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 hyperframes skills update <workflow>` before entering one. Nothing re-pulls the full set behind your back.
|
||||
Installs stay lean after that: `npx 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 frames skills update <workflow>` before entering one. Nothing re-pulls the full set behind your back.
|
||||
|
||||
### Upload to Codex
|
||||
|
||||
@@ -67,13 +67,13 @@ Build the upload-ready Codex plugin archive from the committed `HEAD` version of
|
||||
bun run package:codex-plugin
|
||||
```
|
||||
|
||||
This writes `dist/hyperframes-plugin.zip` with a `hyperframes/` root folder and fails if the archive exceeds Codex's 100 MB upload limit.
|
||||
This writes `dist/frames-plugin.zip` with a `frames/` root folder and fails if the archive exceeds Codex's 100 MB upload limit.
|
||||
|
||||
### Router
|
||||
|
||||
| Skill | Use when |
|
||||
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `/hyperframes` | **Read first** for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below. |
|
||||
| `/frames` | **Read first** for any request to make / create / edit / animate / render a video, animation, or motion graphic. Capability map for the domain skills, the intent layer that confirms every creation brief up front, and intent router for the creation workflows below. |
|
||||
|
||||
### Creation workflows
|
||||
|
||||
@@ -88,7 +88,7 @@ This writes `dist/hyperframes-plugin.zip` with a `hyperframes/` root folder and
|
||||
| `/music-to-video` | A **music track** (audio file, or video to pull audio from) → a **beat-synced** video — lyric, slideshow, or kinetic promo; music drives pacing. |
|
||||
| `/slideshow` | A **presentation / pitch deck / interactive deck** — discrete slides, fragment reveals, branching, hotspot navigation, presenter mode. Output is a navigable deck, not a rendered video. |
|
||||
| `/general-video` | **Anything else** — longer or multi-scene pieces, brand / sizzle reel, title card, static loop, freeform composition. Input- and length-agnostic fallback, and the home of companion mode (co-create with the full toolbox). |
|
||||
| `/remotion-to-hyperframes` | **Porting an existing Remotion** (React) composition's source to HyperFrames HTML. One-way migration, not creation. |
|
||||
| `/remotion-to-frames` | **Porting an existing Remotion** (React) composition's source to Frames HTML. One-way migration, not creation. |
|
||||
|
||||
### Domain skills (loaded on demand)
|
||||
|
||||
@@ -96,31 +96,31 @@ Atomic capabilities the creation workflows compose against — pull one when you
|
||||
|
||||
| Skill | Covers |
|
||||
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `/hyperframes-core` | The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules. |
|
||||
| `/hyperframes-animation` | All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
|
||||
| `/hyperframes-keyframes` | Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `hyperframes keyframes` diagnostics for rendered motion. |
|
||||
| `/hyperframes-creative` | Non-animation creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns. |
|
||||
| `/frames-core` | The composition contract — `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, determinism rules. |
|
||||
| `/frames-animation` | All animation knowledge — atomic motion rules, scene blueprints, transitions, runtime adapters (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
|
||||
| `/frames-keyframes` | Seek-safe keyframe authoring across runtimes — GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, 3D depth — plus `frames keyframes` diagnostics for rendered motion. |
|
||||
| `/frames-creative` | Non-animation creative direction — `frame.md` / `design.md`, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns. |
|
||||
| `/media-use` | The media OS — resolve any media need (BGM, SFX, image, icon, logo, voice, color grade, LUT) into a frozen local file or paste-ready block + ledger record, generate via TTS/music/image models when the catalog misses, transcribe, caption, remove backgrounds, and reuse assets across projects. One shared audio engine + manifest tracking. |
|
||||
| `/hyperframes-cli` | CLI dev loop — `init`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, plus HeyGen-hosted cloud rendering (`cloud render`) and AWS Lambda rendering (`lambda deploy / render / progress`). |
|
||||
| `/hyperframes-registry` | Install and wire registry blocks and components into compositions via `hyperframes add`. Authoring a new block or component to contribute upstream. |
|
||||
| `/frames-cli` | CLI dev loop — `init`, `lint`, `check`, `snapshot`, `preview`, `render`, `publish`, `doctor`, plus HeyGen-hosted cloud rendering (`cloud render`) and AWS Lambda rendering (`lambda deploy / render / progress`). |
|
||||
| `/frames-registry` | Install and wire registry blocks and components into compositions via `frames add`. Authoring a new block or component to contribute upstream. |
|
||||
| `/figma` | Import Figma assets, tokens, components, and storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI) plus Motion animations (MCP) and shaders (MCP source / native export) into a composition. |
|
||||
|
||||
For visual design handoff workflows, see the [Claude Design guide](https://hyperframes.heygen.com/guides/claude-design) and [Open Design guide](https://hyperframes.heygen.com/guides/open-design).
|
||||
For visual design handoff workflows, see the [Claude Design guide](https://frames.hanzo.ai/guides/claude-design) and [Open Design guide](https://frames.hanzo.ai/guides/open-design).
|
||||
|
||||
### Manually with the CLI
|
||||
|
||||
```bash
|
||||
npx hyperframes init my-video
|
||||
npx frames init my-video
|
||||
cd my-video
|
||||
npx hyperframes preview # preview in browser with live reload
|
||||
npx hyperframes render # render to MP4
|
||||
npx frames preview # preview in browser with live reload
|
||||
npx frames render # render to MP4
|
||||
```
|
||||
|
||||
**Requirements:** Node.js 22+, FFmpeg
|
||||
|
||||
## What You Can Build
|
||||
|
||||
Need ideas? Browse the [Showcase](https://hyperframes.heygen.com/showcase) for finished videos you can watch, read, run, and remix.
|
||||
Need ideas? Browse the [Showcase](https://frames.hanzo.ai/showcase) for finished videos you can watch, read, run, and remix.
|
||||
|
||||
- Product launch videos and feature announcements
|
||||
- PR walkthroughs with animated code diffs, narration, and captions
|
||||
@@ -140,57 +140,57 @@ The output is a `DESIGN.md` superset your whole toolchain can read. Atoms stay s
|
||||
<table>
|
||||
<tr>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/biennale-yellow"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/biennale-yellow.png" alt="Biennale Yellow" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/biennale-yellow">Biennale Yellow</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/biennale-yellow"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/biennale-yellow.png" alt="Biennale Yellow" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/biennale-yellow">Biennale Yellow</a></b>
|
||||
</td>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/blockframe"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blockframe.png" alt="BlockFrame" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/blockframe">BlockFrame</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/blockframe"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/blockframe.png" alt="BlockFrame" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/blockframe">BlockFrame</a></b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/blue-professional"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/blue-professional.png" alt="Blue Professional" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/blue-professional">Blue Professional</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/blue-professional"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/blue-professional.png" alt="Blue Professional" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/blue-professional">Blue Professional</a></b>
|
||||
</td>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/bold-poster"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/bold-poster.png" alt="Bold Poster" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/bold-poster">Bold Poster</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/bold-poster"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/bold-poster.png" alt="Bold Poster" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/bold-poster">Bold Poster</a></b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/broadside"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/broadside.png" alt="Broadside" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/broadside">Broadside</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/broadside"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/broadside.png" alt="Broadside" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/broadside">Broadside</a></b>
|
||||
</td>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/capsule"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/capsule.png" alt="Capsule" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/capsule">Capsule</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/capsule"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/capsule.png" alt="Capsule" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/capsule">Capsule</a></b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/cartesian"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cartesian.png" alt="Cartesian" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/cartesian">Cartesian</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/cartesian"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/cartesian.png" alt="Cartesian" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/cartesian">Cartesian</a></b>
|
||||
</td>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/cobalt-grid"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/cobalt-grid.png" alt="Cobalt Grid" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/cobalt-grid">Cobalt Grid</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/cobalt-grid"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/cobalt-grid.png" alt="Cobalt Grid" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/cobalt-grid">Cobalt Grid</a></b>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/coral"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/coral.png" alt="Coral" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/coral">Coral</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/coral"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/coral.png" alt="Coral" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/coral">Coral</a></b>
|
||||
</td>
|
||||
<td width="50%" align="center">
|
||||
<a href="https://www.hyperframes.dev/design/creative-mode"><img src="https://static.heygen.ai/hyperframes-oss/docs/images/design-templates/creative-mode.png" alt="Creative Mode" width="100%"></a>
|
||||
<br><b><a href="https://www.hyperframes.dev/design/creative-mode">Creative Mode</a></b>
|
||||
<a href="https://www.frames.hanzo.ai/design/creative-mode"><img src="https://static.heygen.ai/frames-oss/docs/images/design-templates/creative-mode.png" alt="Creative Mode" width="100%"></a>
|
||||
<br><b><a href="https://www.frames.hanzo.ai/design/creative-mode">Creative Mode</a></b>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Browse and remix them all at [hyperframes.dev/design](https://www.hyperframes.dev/design).
|
||||
Browse and remix them all at [frames.hanzo.ai/design](https://www.frames.hanzo.ai/design).
|
||||
|
||||
## How It Works
|
||||
|
||||
@@ -230,9 +230,9 @@ Define a video as HTML. Add data attributes for timing and tracks. Use GSAP, CSS
|
||||
|
||||
Preview instantly in the browser. Render locally or in Docker. The renderer seeks each frame in headless Chrome and encodes the result with FFmpeg, so the same input produces the same video.
|
||||
|
||||
## HyperFrames Stack
|
||||
## Frames Stack
|
||||
|
||||
HyperFrames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.
|
||||
Frames is the open-source rendering engine, plus a growing set of tools around HTML-native video creation.
|
||||
|
||||
| Piece | Status | What it does |
|
||||
| ----------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------- |
|
||||
@@ -242,22 +242,22 @@ HyperFrames is the open-source rendering engine, plus a growing set of tools aro
|
||||
| Agent skills | Available | Teach coding agents the video-production patterns that generic web docs miss |
|
||||
| Studio | Available, evolving | Browser surface for previewing and editing compositions |
|
||||
| AWS Lambda rendering | Available | Deploy a distributed render stack and drive renders from your laptop or CI |
|
||||
| [hyperframes.dev](https://www.hyperframes.dev/) | Available | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects |
|
||||
| [frame.md](https://www.hyperframes.dev/design) | Available | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from |
|
||||
| [frames.hanzo.ai](https://www.frames.hanzo.ai/) | Available | Community playground for previewing, iterating, sharing, and rendering HTML-native video projects |
|
||||
| [frame.md](https://www.frames.hanzo.ai/design) | Available | Invert your design system for the camera — a DESIGN.md superset an agent can compose video from |
|
||||
|
||||
## Catalog
|
||||
|
||||
Install ready-to-use blocks and components:
|
||||
|
||||
```bash
|
||||
npx hyperframes add flash-through-white # shader transition
|
||||
npx hyperframes add instagram-follow # social overlay
|
||||
npx hyperframes add data-chart # animated chart
|
||||
npx frames add flash-through-white # shader transition
|
||||
npx frames add instagram-follow # social overlay
|
||||
npx frames add data-chart # animated chart
|
||||
```
|
||||
|
||||
Browse the catalog at [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart).
|
||||
Browse the catalog at [frames.hanzo.ai/catalog](https://frames.hanzo.ai/catalog/blocks/data-chart).
|
||||
|
||||
## Why HyperFrames?
|
||||
## Why Frames?
|
||||
|
||||
- **HTML-native:** compositions are HTML files with data attributes. No React requirement, no proprietary timeline format.
|
||||
- **Agent-friendly:** agents already write HTML, and the CLI is non-interactive by default.
|
||||
@@ -266,11 +266,11 @@ Browse the catalog at [hyperframes.heygen.com/catalog](https://hyperframes.heyge
|
||||
- **Adapter-based animation:** bring GSAP, CSS animations, Lottie, Three.js, Anime.js, WAAPI, or a custom runtime.
|
||||
- **Open source:** Apache 2.0 license, with no per-render fees or commercial-use thresholds.
|
||||
|
||||
## HyperFrames vs Remotion
|
||||
## Frames vs Remotion
|
||||
|
||||
HyperFrames is inspired by [Remotion](https://www.remotion.dev). Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion's bet is React components; HyperFrames' bet is plain HTML that humans and agents can both write easily.
|
||||
Frames is inspired by [Remotion](https://www.remotion.dev). Both tools render video with headless Chrome and FFmpeg. The main difference is the authoring model: Remotion's bet is React components; Frames' bet is plain HTML that humans and agents can both write easily.
|
||||
|
||||
| | **HyperFrames** | **Remotion** |
|
||||
| | **Frames** | **Remotion** |
|
||||
| ------------------------ | ------------------------------------- | --------------------------------------- |
|
||||
| Authoring | HTML + CSS + seekable animation | React components |
|
||||
| Build step | None; `index.html` plays as-is | Bundler required |
|
||||
@@ -279,39 +279,39 @@ HyperFrames is inspired by [Remotion](https://www.remotion.dev). Both tools rend
|
||||
| Distributed rendering | Local and AWS Lambda render paths | Remotion Lambda, mature cloud renderer |
|
||||
| License | Apache 2.0 | Source-available Remotion License |
|
||||
|
||||
Read the full comparison in the [HyperFrames vs Remotion guide](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion).
|
||||
Read the full comparison in the [Frames vs Remotion guide](https://frames.hanzo.ai/guides/frames-vs-remotion).
|
||||
|
||||
## Documentation
|
||||
|
||||
Full documentation: [hyperframes.heygen.com/introduction](https://hyperframes.heygen.com/introduction)
|
||||
Full documentation: [frames.hanzo.ai/introduction](https://frames.hanzo.ai/introduction)
|
||||
|
||||
- [Quickstart](https://hyperframes.heygen.com/quickstart)
|
||||
- [Showcase](https://hyperframes.heygen.com/showcase)
|
||||
- [Guides](https://hyperframes.heygen.com/guides/gsap-animation)
|
||||
- [API Reference](https://hyperframes.heygen.com/packages/core)
|
||||
- [Catalog](https://hyperframes.heygen.com/catalog/blocks/data-chart)
|
||||
- [Examples](https://hyperframes.heygen.com/examples)
|
||||
- [AWS Lambda rendering](https://hyperframes.heygen.com/deploy/aws-lambda)
|
||||
- [Quickstart](https://frames.hanzo.ai/quickstart)
|
||||
- [Showcase](https://frames.hanzo.ai/showcase)
|
||||
- [Guides](https://frames.hanzo.ai/guides/gsap-animation)
|
||||
- [API Reference](https://frames.hanzo.ai/packages/core)
|
||||
- [Catalog](https://frames.hanzo.ai/catalog/blocks/data-chart)
|
||||
- [Examples](https://frames.hanzo.ai/examples)
|
||||
- [AWS Lambda rendering](https://frames.hanzo.ai/deploy/aws-lambda)
|
||||
|
||||
## Packages
|
||||
|
||||
| Package | Description |
|
||||
| ---------------------------------------------------------------- | ----------------------------------------------------------------- |
|
||||
| [`hyperframes`](packages/cli) | CLI for creating, previewing, linting, and rendering compositions |
|
||||
| [`@hyperframes/core`](packages/core) | Types, parsers, generators, linter, runtime, and frame adapters |
|
||||
| [`@hyperframes/engine`](packages/engine) | Seekable page-to-video capture engine using Puppeteer and FFmpeg |
|
||||
| [`@hyperframes/producer`](packages/producer) | Full rendering pipeline for capture, encode, and audio mix |
|
||||
| [`@hyperframes/studio`](packages/studio) | Browser-based composition editor UI |
|
||||
| [`@hyperframes/player`](packages/player) | Embeddable `<hyperframes-player>` web component |
|
||||
| [`@hyperframes/shader-transitions`](packages/shader-transitions) | WebGL shader transitions for compositions |
|
||||
| [`@hyperframes/aws-lambda`](packages/aws-lambda) | AWS Lambda SDK and deployment surface for distributed renders |
|
||||
| [`frames`](packages/cli) | CLI for creating, previewing, linting, and rendering compositions |
|
||||
| [`@frames/core`](packages/core) | Types, parsers, generators, linter, runtime, and frame adapters |
|
||||
| [`@frames/engine`](packages/engine) | Seekable page-to-video capture engine using Puppeteer and FFmpeg |
|
||||
| [`@frames/producer`](packages/producer) | Full rendering pipeline for capture, encode, and audio mix |
|
||||
| [`@frames/studio`](packages/studio) | Browser-based composition editor UI |
|
||||
| [`@frames/player`](packages/player) | Embeddable `<frames-player>` web component |
|
||||
| [`@frames/shader-transitions`](packages/shader-transitions) | WebGL shader transitions for compositions |
|
||||
| [`@frames/aws-lambda`](packages/aws-lambda) | AWS Lambda SDK and deployment surface for distributed renders |
|
||||
|
||||
## Community
|
||||
|
||||
HyperFrames is used in production at [HeyGen](https://www.heygen.com), with community examples from teams like [tldraw](https://tldraw.com), [TanStack](https://tanstack.com), and others in [ADOPTERS.md](ADOPTERS.md). Open a PR if your team is using HyperFrames.
|
||||
Frames is used in production at [HeyGen](https://www.heygen.com), with community examples from teams like [tldraw](https://tldraw.com), [TanStack](https://tanstack.com), and others in [ADOPTERS.md](ADOPTERS.md). Open a PR if your team is using Frames.
|
||||
|
||||
- Questions and ideas: [Discord](https://discord.gg/EbK98HBPdk)
|
||||
- Bugs and feature requests: [GitHub Issues](https://github.com/heygen-com/hyperframes/issues)
|
||||
- Bugs and feature requests: [GitHub Issues](https://github.com/hanzoai/frames/issues)
|
||||
- Security reports: [SECURITY.md](SECURITY.md)
|
||||
- Contributions: [CONTRIBUTING.md](CONTRIBUTING.md)
|
||||
|
||||
@@ -336,7 +336,7 @@ git lfs install
|
||||
If you only need source files, you can skip LFS content:
|
||||
|
||||
```bash
|
||||
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/heygen-com/hyperframes.git
|
||||
GIT_LFS_SKIP_SMUDGE=1 git clone https://github.com/hanzoai/frames.git
|
||||
```
|
||||
|
||||
## License
|
||||
|
||||
+2
-2
@@ -6,7 +6,7 @@ If you discover a security vulnerability in Hyperframes, please report it respon
|
||||
|
||||
**Do not open a public GitHub issue for security vulnerabilities.**
|
||||
|
||||
Instead, open a [GitHub Security Advisory](https://github.com/heygen-com/hyperframes/security/advisories/new) with:
|
||||
Instead, open a [GitHub Security Advisory](https://github.com/hanzoai/frames/security/advisories/new) with:
|
||||
|
||||
- A description of the vulnerability
|
||||
- Steps to reproduce
|
||||
@@ -23,4 +23,4 @@ We will acknowledge receipt within 48 hours and aim to provide a fix or mitigati
|
||||
|
||||
## Scope
|
||||
|
||||
This policy applies to all packages in the `@hyperframes/*` npm scope and the code in this repository.
|
||||
This policy applies to all packages in the `@frames/*` npm scope and the code in this repository.
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add app-showcase
|
||||
npx frames add app-showcase
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add app-showcase
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `app-showcase.html` | `compositions/app-showcase.html` | hyperframes:composition |
|
||||
| `app-showcase.html` | `compositions/app-showcase.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -14,17 +14,17 @@ Created by [Stronkter](https://x.com/Stronkter).
|
||||
## Source Prompt
|
||||
|
||||
```text
|
||||
📷HyperFrames 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 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.
|
||||
```
|
||||
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-money-count
|
||||
npx frames add apple-money-count
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -41,8 +41,8 @@ npx hyperframes add apple-money-count
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `apple-money-count.html` | `compositions/apple-money-count.html` | hyperframes:composition |
|
||||
| `assets/sfx-production.wav` | `assets/sfx-production.wav` | hyperframes:asset |
|
||||
| `apple-money-count.html` | `compositions/apple-money-count.html` | frames:composition |
|
||||
| `assets/sfx-production.wav` | `assets/sfx-production.wav` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add blue-sweater-intro-video
|
||||
npx frames add blue-sweater-intro-video
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -35,9 +35,9 @@ npx hyperframes add blue-sweater-intro-video
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `blue-sweater-intro-video.html` | `compositions/blue-sweater-intro-video.html` | hyperframes:composition |
|
||||
| `assets/joe-sai-avatar.png` | `assets/joe-sai-avatar.png` | hyperframes:asset |
|
||||
| `assets/sfx/integrated-melodic-tech-mix.wav` | `assets/sfx/integrated-melodic-tech-mix.wav` | hyperframes:asset |
|
||||
| `blue-sweater-intro-video.html` | `compositions/blue-sweater-intro-video.html` | frames:composition |
|
||||
| `assets/joe-sai-avatar.png` | `assets/joe-sai-avatar.png` | frames:asset |
|
||||
| `assets/sfx/integrated-melodic-tech-mix.wav` | `assets/sfx/integrated-melodic-tech-mix.wav` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add chromatic-radial-split
|
||||
npx frames add chromatic-radial-split
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add chromatic-radial-split
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | hyperframes:composition |
|
||||
| `chromatic-radial-split.html` | `compositions/chromatic-radial-split.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add cinematic-zoom
|
||||
npx frames add cinematic-zoom
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add cinematic-zoom
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | hyperframes:composition |
|
||||
| `cinematic-zoom.html` | `compositions/cinematic-zoom.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-3d-extrude
|
||||
npx frames add code-3d-extrude
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-3d-extrude
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | hyperframes:composition |
|
||||
| `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-diff
|
||||
npx frames add code-diff
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-diff
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
|
||||
| `code-diff.html` | `compositions/code-diff.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-highlight
|
||||
npx frames add code-highlight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-highlight
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-highlight.html` | `compositions/code-highlight.html` | hyperframes:composition |
|
||||
| `code-highlight.html` | `compositions/code-highlight.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-morph
|
||||
npx frames add code-morph
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-morph
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
|
||||
| `code-morph.html` | `compositions/code-morph.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-particle-assemble
|
||||
npx frames add code-particle-assemble
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-particle-assemble
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | hyperframes:composition |
|
||||
| `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-scroll
|
||||
npx frames add code-scroll
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-scroll
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-scroll.html` | `compositions/code-scroll.html` | hyperframes:composition |
|
||||
| `code-scroll.html` | `compositions/code-scroll.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-shader-dissolve
|
||||
npx frames add code-shader-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-shader-dissolve
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | hyperframes:composition |
|
||||
| `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-basic
|
||||
npx frames add code-snippet-apple-terminal-basic
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-apple-terminal-basic
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,7 +39,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-basic.html` | `compositions/code-snippet-apple-terminal-basic.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-basic.html` | `compositions/code-snippet-apple-terminal-basic.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Clear Dark profile — translucent bla
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-dark
|
||||
npx frames add code-snippet-apple-terminal-clear-dark
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-clear-dark
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-clear-dark.html` | `compositions/code-snippet-apple-terminal-clear-dark.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-clear-dark.html` | `compositions/code-snippet-apple-terminal-clear-dark.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-clear-light
|
||||
npx frames add code-snippet-apple-terminal-clear-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-apple-terminal-clear-light
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,7 +39,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-clear-light.html` | `compositions/code-snippet-apple-terminal-clear-light.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-clear-light.html` | `compositions/code-snippet-apple-terminal-clear-light.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-grass
|
||||
npx frames add code-snippet-apple-terminal-grass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-apple-terminal-grass
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,7 +39,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-grass.html` | `compositions/code-snippet-apple-terminal-grass.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-grass.html` | `compositions/code-snippet-apple-terminal-grass.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Homebrew profile — black background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-homebrew
|
||||
npx frames add code-snippet-apple-terminal-homebrew
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-homebrew
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-homebrew.html` | `compositions/code-snippet-apple-terminal-homebrew.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-homebrew.html` | `compositions/code-snippet-apple-terminal-homebrew.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-man-page
|
||||
npx frames add code-snippet-apple-terminal-man-page
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-apple-terminal-man-page
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,7 +39,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-man-page.html` | `compositions/code-snippet-apple-terminal-man-page.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-man-page.html` | `compositions/code-snippet-apple-terminal-man-page.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-novel
|
||||
npx frames add code-snippet-apple-terminal-novel
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-novel
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-novel.html` | `compositions/code-snippet-apple-terminal-novel.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-novel.html` | `compositions/code-snippet-apple-terminal-novel.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-ocean
|
||||
npx frames add code-snippet-apple-terminal-ocean
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-ocean
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-ocean.html` | `compositions/code-snippet-apple-terminal-ocean.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-ocean.html` | `compositions/code-snippet-apple-terminal-ocean.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Pro profile — pure black background
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-pro
|
||||
npx frames add code-snippet-apple-terminal-pro
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-pro
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-pro.html` | `compositions/code-snippet-apple-terminal-pro.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-pro.html` | `compositions/code-snippet-apple-terminal-pro.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-red-sands
|
||||
npx frames add code-snippet-apple-terminal-red-sands
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-red-sands
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-red-sands.html` | `compositions/code-snippet-apple-terminal-red-sands.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-red-sands.html` | `compositions/code-snippet-apple-terminal-red-sands.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-silver-aerogel
|
||||
npx frames add code-snippet-apple-terminal-silver-aerogel
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-silver-aerogel
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-silver-aerogel.html` | `compositions/code-snippet-apple-terminal-silver-aerogel.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-silver-aerogel.html` | `compositions/code-snippet-apple-terminal-silver-aerogel.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
|
||||
## Install
|
||||
@@ -17,7 +17,7 @@ macOS Terminal.app window in the built-in Solid Colors profile — vivid deep pu
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-apple-terminal-solid-colors
|
||||
npx frames add code-snippet-apple-terminal-solid-colors
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -25,7 +25,7 @@ npx hyperframes add code-snippet-apple-terminal-solid-colors
|
||||
Install all Apple Terminal themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add apple-terminal
|
||||
npx frames add apple-terminal
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -40,7 +40,7 @@ npx hyperframes add apple-terminal
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-apple-terminal-solid-colors.html` | `compositions/code-snippet-apple-terminal-solid-colors.html` | hyperframes:composition |
|
||||
| `code-snippet-apple-terminal-solid-colors.html` | `compositions/code-snippet-apple-terminal-solid-colors.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-2026
|
||||
npx frames add code-snippet-dark-2026
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-dark-2026
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-2026.html` | `compositions/code-snippet-dark-2026.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-dark-2026.html` | `compositions/code-snippet-dark-2026.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-modern
|
||||
npx frames add code-snippet-dark-modern
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-dark-modern
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-modern.html` | `compositions/code-snippet-dark-modern.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-dark-modern.html` | `compositions/code-snippet-dark-modern.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-dark-plus
|
||||
npx frames add code-snippet-dark-plus
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-dark-plus
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-dark-plus.html` | `compositions/code-snippet-dark-plus.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-dark-plus.html` | `compositions/code-snippet-dark-plus.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-flight
|
||||
npx frames add code-snippet-flight
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-snippet-flight
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | hyperframes:composition |
|
||||
| `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-high-contrast-light
|
||||
npx frames add code-snippet-high-contrast-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-high-contrast-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-high-contrast-light.html` | `compositions/code-snippet-high-contrast-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-high-contrast-light.html` | `compositions/code-snippet-high-contrast-light.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-high-contrast
|
||||
npx frames add code-snippet-high-contrast
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-high-contrast
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-high-contrast.html` | `compositions/code-snippet-high-contrast.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-high-contrast.html` | `compositions/code-snippet-high-contrast.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-2026
|
||||
npx frames add code-snippet-light-2026
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-light-2026
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-2026.html` | `compositions/code-snippet-light-2026.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-light-2026.html` | `compositions/code-snippet-light-2026.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-modern
|
||||
npx frames add code-snippet-light-modern
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-light-modern
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-modern.html` | `compositions/code-snippet-light-modern.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-light-modern.html` | `compositions/code-snippet-light-modern.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-light-plus
|
||||
npx frames add code-snippet-light-plus
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-light-plus
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-light-plus.html` | `compositions/code-snippet-light-plus.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-light-plus.html` | `compositions/code-snippet-light-plus.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-monokai
|
||||
npx frames add code-snippet-monokai
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-monokai
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-monokai.html` | `compositions/code-snippet-monokai.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-monokai.html` | `compositions/code-snippet-monokai.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-solarized-light
|
||||
npx frames add code-snippet-solarized-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-solarized-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-solarized-light.html` | `compositions/code-snippet-solarized-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-solarized-light.html` | `compositions/code-snippet-solarized-light.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-visual-studio-dark
|
||||
npx frames add code-snippet-visual-studio-dark
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-visual-studio-dark
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-visual-studio-dark.html` | `compositions/code-snippet-visual-studio-dark.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-visual-studio-dark.html` | `compositions/code-snippet-visual-studio-dark.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-snippet-visual-studio-light
|
||||
npx frames add code-snippet-visual-studio-light
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -24,7 +24,7 @@ npx hyperframes add code-snippet-visual-studio-light
|
||||
Install all code snippet themes at once:
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code
|
||||
npx frames add code
|
||||
```
|
||||
|
||||
## Details
|
||||
@@ -39,8 +39,8 @@ npx hyperframes add code
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | hyperframes:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
|
||||
| `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | frames:composition |
|
||||
| `background.jpeg` | `assets/background.jpeg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add code-typing
|
||||
npx frames add code-typing
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add code-typing
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `code-typing.html` | `compositions/code-typing.html` | hyperframes:composition |
|
||||
| `code-typing.html` | `compositions/code-typing.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add cross-warp-morph
|
||||
npx frames add cross-warp-morph
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add cross-warp-morph
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | hyperframes:composition |
|
||||
| `cross-warp-morph.html` | `compositions/cross-warp-morph.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add data-chart
|
||||
npx frames add data-chart
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add data-chart
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `data-chart.html` | `compositions/data-chart.html` | hyperframes:composition |
|
||||
| `data-chart.html` | `compositions/data-chart.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add domain-warp-dissolve
|
||||
npx frames add domain-warp-dissolve
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add domain-warp-dissolve
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | hyperframes:composition |
|
||||
| `domain-warp-dissolve.html` | `compositions/domain-warp-dissolve.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flash-through-white
|
||||
npx frames add flash-through-white
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add flash-through-white
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flash-through-white.html` | `compositions/flash-through-white.html` | hyperframes:composition |
|
||||
| `flash-through-white.html` | `compositions/flash-through-white.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flowchart-vertical
|
||||
npx frames add flowchart-vertical
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add flowchart-vertical
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
|
||||
| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add flowchart
|
||||
npx frames add flowchart
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add flowchart
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `flowchart.html` | `compositions/flowchart.html` | hyperframes:composition |
|
||||
| `flowchart.html` | `compositions/flowchart.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add glitch
|
||||
npx frames add glitch
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add glitch
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `glitch.html` | `compositions/glitch.html` | hyperframes:composition |
|
||||
| `glitch.html` | `compositions/glitch.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add gravitational-lens
|
||||
npx frames add gravitational-lens
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,7 +33,7 @@ npx hyperframes add gravitational-lens
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `gravitational-lens.html` | `compositions/gravitational-lens.html` | hyperframes:composition |
|
||||
| `gravitational-lens.html` | `compositions/gravitational-lens.html` | frames:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4" poster="https://static.heygen.ai/hyperframes-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="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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add instagram-follow
|
||||
npx frames add instagram-follow
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -33,8 +33,8 @@ npx hyperframes add instagram-follow
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `instagram-follow.html` | `compositions/instagram-follow.html` | hyperframes:composition |
|
||||
| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
|
||||
| `instagram-follow.html` | `compositions/instagram-follow.html` | frames:composition |
|
||||
| `assets/avatar.jpg` | `assets/avatar.jpg` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
@@ -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/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
|
||||
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/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 />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add ios26-liquid-glass
|
||||
npx frames add ios26-liquid-glass
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
@@ -37,9 +37,9 @@ npx hyperframes add ios26-liquid-glass
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
|
||||
| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
|
||||
| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
|
||||
| `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | frames:composition |
|
||||
| `models/iphone.glb` | `models/iphone.glb` | frames:asset |
|
||||
| `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | frames:asset |
|
||||
|
||||
## Usage
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user