{"id":"c57bc149-60c7-49ff-b277-8beaa807032d","entityType":"agent","slug":"clawhub-heygen-com-website-to-video","name":"Website To Video","canonicalUrl":"https://www.xpersona.co/agent/clawhub-heygen-com-website-to-video","canonicalPath":"/agent/clawhub-heygen-com-website-to-video","generatedAt":"2026-10-11T21:54:07.485Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T18:59:34.932Z","emptyReason":null},"description":"Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand... Skill: Website To Video Owner: heygen-com Summary: Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand... Tags: latest:1.0.7 Version history: v1.0.7 | 2026-07-10T22:50:42.522Z | user Synced from 00d059b (main) v1.0.6 | 2026-07-10T02:58:02.499Z | user Synced from a8f242e (main) v1.0.5 | 2026-07-08T18:02:16.584Z | u","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s17fpgb0p797dzkbtbrxw5x1hh89qs64:website-to-video","sourceUrl":"https://clawhub.ai/heygen-com/website-to-video","homepage":"https://clawhub.ai/heygen-com/skills/website-to-video","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/heygen-com/website-to-video","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/heygen-com/skills/website-to-video","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand... "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:59:34.932Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:59:34.932Z","emptyReason":null},"stars":null,"forks":null,"downloads":1006,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.7","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T18:59:34.873Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T18:59:34.932Z","lastCrawledAt":"2026-10-11T18:59:34.873Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T18:59:34.873Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.7","createdAt":"2026-07-10T22:50:42.522Z","changelog":"Synced from 00d059b (main)","fileCount":15,"zipByteSize":109251},{"version":"1.0.6","createdAt":"2026-07-10T02:58:02.499Z","changelog":"Synced from a8f242e (main)","fileCount":15,"zipByteSize":109284},{"version":"1.0.5","createdAt":"2026-07-08T18:02:16.584Z","changelog":"Synced from 17b8527 (main)","fileCount":15,"zipByteSize":109117},{"version":"1.0.4","createdAt":"2026-07-08T17:34:07.241Z","changelog":"Synced from 81884a7 (main)","fileCount":15,"zipByteSize":108828},{"version":"1.0.3","createdAt":"2026-07-08T16:00:31.778Z","changelog":"Synced from 4d3cdc3 (main)","fileCount":15,"zipByteSize":108712},{"version":"1.0.2","createdAt":"2026-07-07T20:29:22.284Z","changelog":"Synced from 7286b00 (main)","fileCount":15,"zipByteSize":108722},{"version":"1.0.1","createdAt":"2026-07-07T19:01:13.358Z","changelog":"Synced from 5fe9573 (main)","fileCount":15,"zipByteSize":108568},{"version":"1.0.0","createdAt":"2026-07-01T12:07:18.391Z","changelog":"Official HyperFrames skills from heygen-com/hyperframes","fileCount":15,"zipByteSize":108682}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s17fpgb0p797dzkbtbrxw5x1hh89qs64:website-to-video","setupComplexity":"low","setupSteps":["Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T21:54:07.482Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-heygen-com-website-to-video/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T18:59:34.932Z","emptyReason":null},"readme":"Skill: Website To Video\n\nOwner: heygen-com\n\nSummary: Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand...\n\nTags: latest:1.0.7\n\nVersion history:\n\nv1.0.7 | 2026-07-10T22:50:42.522Z | user\n\nSynced from 00d059b (main)\n\nv1.0.6 | 2026-07-10T02:58:02.499Z | user\n\nSynced from a8f242e (main)\n\nv1.0.5 | 2026-07-08T18:02:16.584Z | user\n\nSynced from 17b8527 (main)\n\nv1.0.4 | 2026-07-08T17:34:07.241Z | user\n\nSynced from 81884a7 (main)\n\nv1.0.3 | 2026-07-08T16:00:31.778Z | user\n\nSynced from 4d3cdc3 (main)\n\nv1.0.2 | 2026-07-07T20:29:22.284Z | user\n\nSynced from 7286b00 (main)\n\nv1.0.1 | 2026-07-07T19:01:13.358Z | user\n\nSynced from 5fe9573 (main)\n\nv1.0.0 | 2026-07-01T12:07:18.391Z | user\n\nOfficial HyperFrames skills from heygen-com/hyperframes\n\nArchive index:\n\nArchive v1.0.7: 15 files, 109251 bytes\n\nFiles: assets/sfx/CREDITS.md (1183b), assets/sfx/manifest.json (4313b), references/beat-builder-guide.md (20886b), references/capabilities.md (57750b), references/step-0-capture.md (4087b), references/step-1-design.md (20761b), references/step-2-brief.md (14955b), references/step-3-storyboard.md (49367b), references/step-4-vo.md (13180b), references/step-5-build.md (28215b), references/step-6-validate.md (23447b), scripts/w2h-verify.mjs (28755b), skill-card.md (2593b), SKILL.md (12743b), _meta.json (135b)\n\nFile v1.0.7:SKILL.md\n\n---\nname: website-to-video\ndescription: \"Capture a general website/URL and turn it into a video OF the site — tour, showcase, or social clip built from captured screenshots and the site's own brand assets. Use for portfolio / blog / docs / landing-page showcases. Not a product launch or promo, even from a URL (/product-launch-video). Unclear → /hyperframes.\"\n---\n\n> **First, keep this skill fresh — run silently, don't ask:** `npx hyperframes skills update website-to-video`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.\n\n> **media-use**: Before sourcing audio/images/logos, call `/media-use` to resolve BGM/SFX/images from the HeyGen catalog and brand logos from their official sources. Run `--adopt` first to register existing assets. See `/media-use` skill.\n\n> **figma source**: If the URL is a figma.com link (not a live product site), run `/figma` first — asset export, brand tokens, and components/storyboard reconstruction if needed — then build this workflow from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.\n\n# Website to HyperFrames\n\nCapture a website, then produce a professional video from it.\n\n> **Confirm the route before Step 0.** This skill makes a video _of / from a general site_. If the user is really **marketing / launching / promoting a product** (even from this URL, even \"promo for our site\") → `/product-launch-video`. A **topic explainer with no site** → `/faceless-explainer`; a **GitHub PR** → `/pr-to-video`; **re-cutting / recoloring / reordering an existing video file** → out of scope. Routed here on a vague \"make a video\", or unsure launch-vs-general-site? **Read `/hyperframes` first** (full routing table + § What HyperFrames cannot do).\n\nUsers say things like:\n\n- \"Turn this website into a 15-second social clip for Instagram\"\n- \"Make a 30-second site tour / showcase from https://...\"\n- \"Capture our homepage and build a video from its own visuals\"\n\nThe workflow has 7 steps. Each produces an artifact that gates the next. By default it's collaborative — gates marked 💬 stop and ask the user. Mode semantics (signals, propagation, gate taxonomy) are canonical in `../hyperframes-core/references/brief-contract.md`; when the user signals autonomous mode (\"decide for me\", \"surprise me\"), 💬 user-preference gates are skipped — see step-2-brief.md for how that propagates through this workflow.\n\n**Autonomous mode is NOT \"skip all gates\"** (brief contract § 1). It covers user-preference questions (TTS provider, voice, color emphasis, beat count, music yes/no, captions yes/no — where the agent decides on the user's behalf). It does NOT cover quality-verification gates. The following remain non-skippable in auto mode:\n\n- Asset Audit (Step 3) — viewing contact sheets and justifying USE/SKIP for each asset\n- Per-beat HTML read (Step 5) — structured evidence block per beat\n- DoD checklist (Step 6) — including animation-map, per-warning WCAG verification, audio/motion playback\n- Honest disclosure section (Step 6) — \"What I did NOT verify\" must appear in your final summary\n\nIf you find yourself reasoning \"auto mode says bias toward action, so I'll skip X\" — and X is a verification gate, not a preference question — that reasoning is wrong. Bias toward action applies to deciding _what to build_, not to deciding _whether to verify_.\n\n---\n\n## Step 0: Capture & Understand the Brand\n\n**Read:** [references/step-0-capture.md](references/step-0-capture.md)\n\nCapture the site, then read the extracted data to understand the **brand and product** — what it does, who it's for, what voice it speaks in, what mood it lives in. The captured assets are a brand toolkit for later, not the building blocks the video is made from.\n\n**Show sign-in status before the brief** — run `npx hyperframes auth status` and **relay its output verbatim (don't paraphrase or rewrite it).** It reports whether voice/BGM will use HeyGen or local engines and, when not signed in, how to sign in. **If not signed in, STOP and wait for the user to choose — sign in, or say \"go\"/\"offline\" to continue with local engines — before asking the brief or anything else.** Treat it as a real decision point, not a passing note; don't fold the choice into the brief question, and don't write keys into a per-repo `.env`. (In autonomous mode, note the status and continue offline.) See `../media-use` → Preflight for the canonical guidance.\n\n**Gate:** Site summary printed — strategy-first (what the product does, who it's for, brand voice) before the asset / color / font inventory; sign-in status was shown (signed in, or continuing offline).\n\n---\n\n## Step 1: Brand Identity\n\n**Read:** [references/step-1-design.md](references/step-1-design.md)\n\nWrite DESIGN.md — a brand cheat sheet covering the visual identity: colors, typography, component styles, layout principles. Use `design-styles.json` for exact computed values.\n\n**Speed option:** For fast-pacing videos (billboard-per-beat), DESIGN.md can be a 50-line summary of colors + fonts + do's/don'ts — not a 300-line document. The sub-agent prompt in Step 5 pastes brand values directly, so DESIGN.md depth only matters for complex compositions.\n\n**Gate:** `DESIGN.md` exists (any length) with at minimum: color palette, font choices, and do's/don'ts.\n\n---\n\n## Step 2: Strategy & Messaging\n\n**Read:** [references/step-2-brief.md](references/step-2-brief.md), [references/capabilities.md](references/capabilities.md) (scan the Table of Contents — deep-dive sections only as needed)\n\nAlign with the user on **what the video must communicate** before talking visuals or assets. Parse the user's prompt — they probably already gave you the video type and style. Ask only what's missing: the ONE thing this video must say, the narrative arc, and the audience.\n\n**Gate:** Video type, duration, format, and — critically — the message and narrative arc are locked. Without those, Step 3 can't write a concept-first storyboard.\n\n---\n\n## Step 3: Storyboard + Script 💬\n\n**Read:** [references/step-3-storyboard.md](references/step-3-storyboard.md)\n\nWrite the storyboard concept-first: message → narrative arc → beats that serve the arc → techniques per beat → brand accents pass at the end. Then write the narration script to match. Present both to the user with a beat-by-beat summary. Iterate until they approve.\n\n**Gate:** `STORYBOARD.md` + `SCRIPT.md` exist AND the user has approved the plan.\n\n---\n\n## Step 4: VO, Timing + Captions 💬\n\n**Read:** [references/step-4-vo.md](references/step-4-vo.md)\n\nIf Step 2 said no narration — ask about background music, then skip to Step 5. Otherwise: ask the user which TTS provider (HeyGen TTS, ElevenLabs, or Kokoro), generate audio, transcribe, map timestamps to beats. Then ask about captions.\n\n**Gate:** Either (a) no narration was requested and storyboard has manual beat timings, or (b) `narration.wav` + `transcript.json` exist and beat timings updated with real durations.\n\n---\n\n## Step 5: Build Compositions\n\n**Read:** The `hyperframes` skill (load it — every rule matters)\n**Read:** [references/step-5-build.md](references/step-5-build.md)\n\nBuild index.html and compositions following the architecture and pacing chosen in the storyboard (Step 3). Sub-agents run `hyperframes lint` and `hyperframes snapshot` on each beat before reporting back.\n\n**Gate:** Every `compositions/beat-N.html` has been read top-to-bottom by the main agent against DESIGN.md and STORYBOARD.md. The per-beat checklist lives in [step-5-build.md](references/step-5-build.md).\n\n---\n\n## Step 6: Validate & Deliver\n\n**Read:** [references/step-6-validate.md](references/step-6-validate.md)\n\nLint, validate, take snapshots scaled to video length (formula: `max(beats × 3, ceil(duration_seconds / 2))`), and review each one. Fix issues before delivering. Deliver the localhost Studio project URL — only render to MP4 on explicit user request. Surface that Studio URL **only at handoff** — it is the final, stable preview; the build-phase snapshots are headless, so do not pop a preview mid-build.\n\n**Deliver something you're proud of.** Before handing off, ask yourself: would I post this on social media with my name on it? If not, fix what's wrong.\n\n**Gate:** `npx hyperframes check` pass with zero errors, and the final response includes the active Studio project URL.\n\n---\n\n## Quick Reference\n\n### Video Types\n\nTypical constraints by video type — use as a starting point, not a formula. Beat count should follow from the content and the narration, not from a target range.\n\n| Type | Typical duration | Duration driver | Narration |\n| ----------------------- | ---------------- | ------------------ | --------------------- |\n| Social clip (IG/TikTok) | 10–15s | Platform limit | Optional |\n| Site walkthrough | 30–60s | Script length | Full narration |\n| Content announcement | 15–30s | Content complexity | Full narration |\n| Brand reel | 20–45s | Music track | Optional, music focus |\n\n(A product demo, feature announcement, or launch teaser that _sells_ the product belongs to `/product-launch-video` — see the routing note at the top.)\n\nBeat count is not in this table intentionally — it should come from the storyboard, not from \"social ad = 3-4 beats.\" A social ad for a complex product might need 5 well-timed beats. A brand reel with one strong visual thesis might need 3.\n\n### Format\n\n- **Landscape**: 1920x1080 (default)\n- **Portrait**: 1080x1920 (Instagram Stories, TikTok)\n- **Square**: 1080x1080 (Instagram feed)\n\n### Reference Files\n\n| File | When to read |\n| ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |\n| [step-0-capture.md](references/step-0-capture.md) | Step 0 — capture, understand the brand and product, write strategy-first site summary |\n| [step-1-design.md](references/step-1-design.md) | Step 1 — write DESIGN.md brand cheat sheet (5 sections, 250-350 lines; 50-line fast-path for billboard-style social ads) |\n| [step-2-brief.md](references/step-2-brief.md) | Step 2 — align on message, narrative arc, audience with user |\n| [capabilities.md](references/capabilities.md) | Steps 2 & 5 — full inventory of what HyperFrames can do (24 sections). Scan the TOC during the brief, deep-dive specific sections during build |\n| [step-3-storyboard.md](references/step-3-storyboard.md) | Step 3 — storyboard + script (combined) with user review gate |\n| [step-4-vo.md](references/step-4-vo.md) | Step 4 — TTS provider choice, generation, timing |\n| [step-5-build.md](references/step-5-build.md) | Step 5 — build index.html + compositions |\n| [step-6-validate.md](references/step-6-validate.md) | Step 6 — lint, validate, snapshots (scaled to video length), preview |\n| [techniques.md](../hyperframes/references/techniques.md) | Steps 3 & 5 — 13 primitive animation techniques with code patterns (adapt, don't copy-paste) |\n| [html-in-canvas-patterns.md](../hyperframes/references/html-in-canvas-patterns.md) | Step 5 — complete code patterns for HTML-in-Canvas effects (lives in the hyperframes skill) |\n\nFile v1.0.7:_meta.json\n\n{\n \"ownerId\": \"kn77d06grj6xqp3dqwkk4bavhn89pegt\",\n \"slug\": \"website-to-video\",\n \"version\": \"1.0.7\",\n \"publishedAt\": 1783723842522\n}\n\nFile v1.0.7:references/beat-builder-guide.md\n\n# Beat Builder Guide\n\nYou are building ONE beat of a multi-beat video composition. This file tells you what to read, how to build, how to verify, and how to report back.\n\n## Step 1: Read and understand\n\n**Required (every beat):**\n\n1. **Load the `hyperframes` skill** — composition rules, data attributes, timeline contract, deterministic rendering. Read the whole skill.\n2. **[capabilities.md](capabilities.md)** — full inventory of HyperFrames capabilities (24 sections). Read the Table of Contents first, then deep-dive sections your beat needs.\n3. **The beat spec** the main agent gave you — concept, choreography, assets, brand values, timing.\n\n**Read based on what your beat needs (pick relevant ones):**\n\n| Resource | What it covers | Read when |\n| ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- |\n| [techniques.md](../../hyperframes/references/techniques.md) | 13 primitive animation techniques: SVG path drawing, Canvas 2D, CSS 3D, kinetic type, variable fonts, MotionPath, etc. | Beat uses any of these techniques |\n| [text-effects.md](../../hyperframes/references/text-effects.md) | 24 named text animations from `pixel-point/animate-text` (separate skill — load via `/animate-text` for specs) | Beat has text animation |\n| [html-in-canvas-patterns.md](../../hyperframes/references/html-in-canvas-patterns.md) | HTML-in-Canvas: iPhone/MacBook mockups, liquid glass, magnetic, portal, shatter, text cursor | Beat uses device mockups or WebGL effects on HTML |\n| [transitions.md](../../hyperframes/references/transitions.md) | Shader transition API, HyperShader.init() pattern, all 14 WebGL shaders | Beat has shader transitions |\n| [transitions/](../../hyperframes/references/transitions/) | 14 CSS transition category files: push, scale, dissolve, blur, 3D flip, light leak, distortion, grid, mechanical, destruction | Beat uses CSS transitions |\n| [css-patterns.md](../../hyperframes/references/css-patterns.md) | Text markers: highlight sweeps, hand-drawn circles, burst lines, scribble, sketchout | Beat uses text emphasis/markers |\n| [audio-reactive.md](../../hyperframes/references/audio-reactive.md) | Bass→scale, mid→shape, treble→glow mappings | Beat reacts to music/audio |\n| [captions.md](../../hyperframes/references/captions.md) | Per-word karaoke, tone-adaptive styling, positioning | Beat includes captions |\n| [typography.md](../../hyperframes/references/typography.md) | Font hierarchy, variable fonts, responsive type scaling | Beat has complex typography |\n| [motion-principles.md](../../hyperframes/references/motion-principles.md) | Velocity matching, easing philosophy, motion continuity | Beat needs polished motion design |\n| [dynamic-techniques.md](../../hyperframes/references/dynamic-techniques.md) | Counter animations, data-driven visuals, dynamic content | Beat has counters or data visualization |\n| [video-composition.md](../../hyperframes/references/video-composition.md) | Frame composition, color presence, scale, density rules | General composition quality |\n\n**Other skills you can load if needed:**\n\n- `/gsap` or `/gsap-core`, `/gsap-timeline`, `/gsap-plugins` — deeper GSAP reference\n- `/animate-text` — curated text animation catalog with exact JSON specs\n- `/hyperframes-registry` — if you need to install and wire registry blocks\n- `/hyperframes-contrast` — audit color contrast (WCAG)\n- `/lottie`, `/three`, `/waapi`, `/animejs`, `/css-animations` — if beat uses these engines\n\n**Always open the captured assets folder before designing the beat:**\n\n- `capture/assets/svgs/` — brand logos, icons, decorative marks. SVGs are infinitely scalable and stroke-animatable (path drawing, dash offset). A logo SVG drawing itself onto frame can carry an entire beat.\n- `capture/assets/` — hero illustrations, screenshots, product art, gradients, photography. These are first-class beat subjects, not background decoration. A breathing hero illustration with a single line of kinetic type is a complete shot.\n- VIEW every image before placing text on it. Check safe zones, contrast, actual content, where the focal point sits.\n\n**If your beat spec names a captured asset, USE it.** Don't substitute a CSS recreation. The user captured these from the real brand site precisely so the video carries the brand's actual visual identity.\n\n## Step 2: Build the composition\n\nSave to the path the main agent specified (usually `compositions/beat-N-name.html`).\n\n```html\n\n```\n\n**Critical:** `data-composition-id`, `data-width`, `data-height` on the root div MUST match the host div in index.html.\n\n## Step 3: Lint\n\n```bash\nnpx hyperframes lint .\n```\n\nFix ALL errors. Zero errors required.\n\n## Step 4: Snapshot and verify\n\n```bash\nnpx hyperframes snapshot . --frames 3\n```\n\n**READ the contact sheet** (`snapshots/contact-sheet.jpg`). For each frame:\n\n- Is content visible? (not black, blank, or loading)\n- Is text readable, properly positioned, correct font/color?\n- Are assets at the right size and position?\n- Does the animation state match the beat spec at this timestamp?\n\n**If anything is wrong:** fix, re-snapshot, re-check. You are done ONLY when every frame matches the spec.\n\n## Step 5: Report back honestly\n\nAfter lint passes, snapshots are taken, and you've fixed every issue you saw — report back to the main agent with concrete observations. Not \"0 errors, looks good.\" That phrasing is what got prior videos shipped with mismatched brand colors, missing logos, and headlines too small to read.\n\n**The main agent will OPEN your composition file and read it top-to-bottom** to cross-check against DESIGN.md and STORYBOARD.md — does the brand bg/accent hex actually appear in your CSS, are the captured assets the storyboard called for actually referenced, is the headline ≥80px, does the GSAP timeline cover the full beat duration. You cannot pass that check by claiming things you didn't do; the file is on disk, the truth is in the file.\n\nSo in your report, name the hex codes you used, the captured asset paths you placed, the headline `font-size`, and the GSAP timeline's last `tl.fromTo(...)` timestamp. Brief, concrete, true. If anything diverges from DESIGN.md or the storyboard, say so explicitly — the main agent can decide whether to accept the divergence or send you back to fix it. Surprises caught at this hand-off cost minutes; surprises caught at Step 6 cost iterations.\n\n### FLAG protocol — required phrasing for non-blocking issues\n\nWhen you find any of these, surface them as **FLAGS** in your report, not as conditional suggestions:\n\n- Visual states that briefly look broken (empty containers, hanging elements, gap moments)\n- Spec ambiguities you had to resolve by guessing\n- Linter bugs you worked around\n- Tween values you changed from the spec because they wouldn't fit\n\n**Forbidden phrasing:** \"if the X feels too long, you could...\", \"consider tweaking Y\", \"might want to...\"\n\n**Required phrasing — concrete, actionable, with line numbers:**\n\n```\nFLAG: at beat-local t=1.2s the doc card is visible but its inner content is still\n opacity 0 — a 0.4s empty-panel window.\n RECOMMENDED FIX: pull title typewriter from 1.6s → 1.4s\n in compositions/beat-5-name.html line 234.\n```\n\nThe main agent MUST EITHER apply each FLAG's fix OR write a one-sentence rejection with reason. Silently dropping a FLAG is a verification failure that gets caught at Step 6 (or worse, in the user's preview).\n\n### Spec ambiguity — escalate, don't paper over\n\nIf STORYBOARD.md gives you a transition or transformation but doesn't establish the **start** state, do NOT guess. Examples of ambiguity worth flagging:\n\n- \"Row 1 transitions from Huly Blue to Huly Orange at 3.5s\" — but Row 1's initial color isn't specified\n- \"Headline grows\" — but the start size isn't specified\n- \"Cards slide in\" — but the off-screen position isn't specified\n- \"Subhead appears after the headline\" — but exact timing offset isn't specified\n\n**Required action:** FLAG the ambiguity in your report verbatim:\n\n```\nFLAG: STORYBOARD.md beat 3 says \"Row 1 transitions blue → orange at 3.5s\" but\n Row 1's initial color is not specified anywhere. I interpreted Row 1 starts\n blue and tweened to orange. CONFIRM or correct.\n```\n\nThe main agent then confirms or corrects before Step 6 advances. Picking an interpretation silently means the build looks \"fine\" while diverging from intent — and the user only notices in motion.\n\n### Sub-agent diagnoses are unverified claims, not facts\n\nWhen a sub-agent reports \"this is a linter false positive\" / \"this is a known bug\" / \"this attribute doesn't work as documented\" — those are HYPOTHESES, not findings. Sub-agents diagnose from one symptom; they don't have repo-wide context.\n\nBefore propagating any sub-agent diagnosis (e.g., applying the same \"workaround\" to another beat, or telling the user \"this is a known bug\"), do ONE of:\n\n1. **Verify by reading the source.** Open the file the sub-agent claims is buggy. Confirm the bug exists. Example: \"I read `packages/core/src/lint/utils.ts:42` and confirmed the regex matches `url(\\\"data:image/svg+xml...\\\")` incorrectly. The workaround is to base64-encode the URI.\"\n2. **Disclose the unverified claim.** Don't suppress it — surface it. Example: \"Sub-agent for beat 2 diagnosed `root_missing_composition_id` as a linter false positive on inline SVG data URIs. I applied the same workaround to beat 4 WITHOUT verifying the underlying claim. Worth filing as a regression against `packages/core/src/lint/utils.ts` to confirm.\"\n\n**Forbidden:** silently adopting the workaround pattern and presenting \"lint passes\" as evidence. If the workaround came from an unverified diagnosis, \"lint passes because the diagnosis was correct AND I worked around it\" and \"lint passes because the diagnosis was wrong but the workaround happened to make the symptom disappear\" are both possible. Without verification, you don't know which. The next session inherits the workaround AND the unverified diagnosis.\n\n### When you accept a sub-agent's divergence from spec — UPDATE the spec\n\nIf a sub-agent reports \"I diverged from STORYBOARD.md because...\" AND you accept the divergence, you MUST update STORYBOARD.md to reflect the actual implementation. Otherwise the spec lies about the artifact.\n\nExamples:\n\n- Sub-agent: \"Storyboard says 'HULY' uppercase but the actual logo asset is lowercase 'huly'. I used lowercase.\" Accept → edit STORYBOARD.md beat N to say \"huly\" lowercase. Note the change inline.\n- Sub-agent: \"Storyboard says cells at 56px but they read too small at 1920×1080. I used 96px.\" Accept → edit STORYBOARD.md beat N's cell size to 96px.\n- Sub-agent: \"Storyboard says SFX at t=4.7s but the visual moment lands at t=5.2s; I aligned SFX to the visual.\" Accept → edit STORYBOARD.md SFX line to t=5.2s.\n\n**Forbidden:** accepting the divergence silently and leaving the storyboard with the wrong spec. The next session reading STORYBOARD.md will trust it as ground truth. The spec is a contract; if you break the contract, update the contract.\n\n---\n\n## Continuous motion — the most important rule\n\nA beat is a SHOT in a film, not a webpage with entrance animations. Your GSAP timeline should have events spread across the ENTIRE beat duration — not just entrance tweens in the first 1-2 seconds followed by nothing. If an element is on screen, it should be doing something. After elements enter, add continuous hold motion: camera dolly, parallax layers moving at different speeds, secondary elements appearing mid-beat, real depth shifts.\n\n## You are building a SHOT, not a webpage\n\nThe storyboard tells you the shot framing (close-up / medium / wide / etc.) and the camera move. Implement them. A beat is a moment, not a screenshot. The distinction is **what the camera is doing**, not whether the subject is a UI element or a logo — a tight push-in on a real product screenshot is a shot; a centered card on a parked camera is a webpage.\n\n**Patterns that turn a shot back into a webpage:**\n\nThese are defaults to avoid, **not absolute prohibitions.** If the storyboard genuinely calls for \"the kanban app interface\" or \"the browser chrome\" as the subject of a specific beat (a product tour, a \"this is how it works\" demo, a stylized window mockup for the closer), then build it. The rule is: don't reach for these patterns by default when the storyboard didn't ask for them.\n\n- ⚠ **macOS / browser window chrome reproduced in CSS** — traffic-light dots, URL bars, browser tabs. Fine when the storyboard makes the chrome the subject (e.g. \"stylized macOS window framing the product UI\" for a closer). NOT fine when it's a frame you added around a card \"to make it look like an app.\"\n- ⚠ **Full webpage layout** (sidebar + header + footer + main content area) — fine when the beat is genuinely a product tour shot. NOT fine when the beat was supposed to be about _the kanban moment_ and you defaulted to drawing the whole app around it.\n- ❌ **Parked-camera composition** — centered card with 60–120px margins on all sides and no camera move. Almost always wrong. Either give it a real push-in / dolly / parallax, or reframe.\n- ❌ **\"Hold with breathing\"** implemented as `y: ±1–2px` or `scale: 1.01` — invisible at 1920×1080+ scale. If continuous motion is required, use camera dolly (scale 1.0 → 1.05), parallax pan (x/y ±30–80px), or progressive reveals.\n- ❌ **Hover-state simulations** — videos have no hover. If the brand uses hover effects, show the BEFORE and AFTER as discrete frames in the timeline.\n- ❌ **Counter pulses + dot pulses + tiny scale wobbles** as the only motion during the hold — these are \"I ran out of ideas\" filler.\n\nThe test: if the storyboard says _\"this beat is the product tour, viewer sees the app interface\"_, building a CSS dashboard with chrome is correct. If the storyboard says _\"this beat is the kanban moment, single card sliding home\"_, drawing the full app around it is wrong. Read the beat spec carefully.\n\n**Patterns that ARE shots (do these freely):**\n\n- ✅ **Captured SVG logo drawing itself stroke-by-stroke** (DrawSVG / path dashoffset) — a complete opener or stinger.\n- ✅ **Captured hero illustration with camera dolly** — push-in from 1.0 → 1.08 over 4s, focal element holds frame.\n- ✅ **Captured product screenshot with parallax layers** — separate the foreground UI from background panels and move them at different speeds, or use HTML-in-Canvas for an iPhone/MacBook mockup.\n- ✅ **Captured asset as the bed, kinetic type as the punchline** — the brand's hero image holds the frame while a one-line message arrives, splits, reflows.\n- ✅ **Composed-from-divs UI moment** when the beat is specifically about that UI's interaction (a card sliding into a column, a search result resolving) — this is the legit case for CSS-only composition.\n\n**Required motion magnitudes** (anything smaller is invisible at video scale):\n\n| Motion type | Minimum magnitude |\n| --------------- | ------------------------------------------- |\n| Translate (y/x) | 30px (entrance) / 8px (drift during hold) |\n| Scale | 0.05 change (1.0 → 1.05 or larger) |\n| Opacity | full 0 → 1 or vice versa for reveals |\n| Rotate | 4° minimum to read (Dutch angles, ticks) |\n| Camera dolly | scale 1.0 → 1.06 minimum over beat duration |\n\n**Required cinematography per beat** (the storyboard should give you these; if it doesn't, escalate):\n\n- A **shot type** (close-up / medium / wide / over-the-shoulder / Dutch)\n- A **camera move** (dolly in/out, push, parallax pan, orbit, rack focus)\n- A **depth strategy** (what's foreground / midground / background)\n- A **purpose** (what specific feeling or noticing the shot delivers)\n\nIf any are missing from the beat spec, the beat is under-defined. Don't fill the gap with \"centered layout + breathing\" — re-read the spec, and if it's genuinely missing, ask the main agent.\n\n## Rules\n\n- SCRIPT PLACEMENT: scripts inside ``. Scripts outside see no DOM.\n- GSAP FROM TRAP: never `gsap.from(el, {opacity:0})` with CSS `opacity:0`. It animates 0→0. Use `tl.fromTo()`.\n- STYLE: avoid CSS `opacity:0` on GSAP-animated elements. Use GSAP fromTo for initial states.\n- ASSET PATHS: project-root-relative. `capture/assets/file.png` ✅ `../capture/assets/file.png` ❌\n- SVG VIA IMG: `` can't inherit CSS color. Inline SVG or `filter: brightness(0) invert(1)`.\n- CSS CENTERING: no `transform: translate(-50%, -50%)` with GSAP transforms. Use flexbox or `xPercent/yPercent`.\n- QUERYSELECTOR: `document.getElementById(\"id\")` with null guards. No method calls without null check.\n- CHARACTER SPANS: `display:inline-block` on spaces collapses them. Use ` ` or per-word spans.\n- COUNTERS: no `onUpdate` for numeric counters — use discrete `tl.set(el, {textContent: \"42\"}, 2.5)` at timestamps. `onUpdate` and `tl.call()` ARE supported for canvas/WebGL rendering loops and character-by-character typing — see capabilities.md §10.\n- TIMELINE: `window.__timelines[\"beat-N-name\"] = tl` synchronously. Key = `data-composition-id`.\n- DETERMINISTIC: no `Math.random()`, `Date.now()`, `requestAnimationFrame`, `repeat:-1`.\n- Always `tl.fromTo()` not `tl.from()` for entrances.\n- Never stack two transform tweens on same element at same time.\n- FONTS: copy the `@font-face` block VERBATIM from DESIGN.md's Fonts section. Do NOT guess which `.woff2` file belongs to which family — capture filenames are content-hashed (`14d7ce3e41dcbb66-s.p.woff2`) and there is no visible mapping. If DESIGN.md doesn't include exact `src:` paths per family, STOP and ask the main agent to add them; never pair an arbitrary `.woff2` file with a family name from memory.\n\n## Easing — pick per intent\n\nDo NOT default to `power2.out` on everything.\n\n| Intent | GSAP Ease | Use for |\n| --------------- | --------------------- | ------------------------------------ |\n| Snap (iOS feel) | `power4.out` | Hero text, UI elements |\n| Whip overshoot | `back.out(1.7)` | Numbers, badges, impact |\n| Soft land | `expo.out` | Per-word reveals, gentle entrances |\n| Mechanical | `power1.out` | Terminal text, code typing |\n| Bounce settle | `elastic.out(1, 0.5)` | Counters, CTA buttons |\n| Dramatic | `expo.inOut` | Full-screen statements, hero reveals |\n| Drift | `\"none\"` | Parallax, Ken Burns, camera drift |\n\nStaggered items: `power4.out` with `stagger: 0.08` to `0.15`.\n\nFile v1.0.7:references/capabilities.md\n\n# HyperFrames — Complete Capabilities Inventory\n\nEverything possible in HyperFrames as of today's workspace, synthesized from direct source reads of all 7 packages, 16 skills, and the full registry.\n\n> **How to read this file.** Scan the **Table of Contents** below first. **Do NOT read this file linearly** — it is a 700+ line inventory; reading top-to-bottom every session wastes context. When the storyboard or a specific beat needs a particular capability (HTML-in-Canvas, shader transitions, audio-reactive, dynamic counters, etc.), jump straight to that section.\n\nYou are NOT limited to what was captured from the website. You can create shaders from scratch, search for and download registry blocks, build Three.js scenes, write custom WebGL effects, use any web API — anything a browser can render.\n\nFor implementation patterns (working code), see `techniques.md`. This file is the WHAT; techniques.md is the HOW.\n\n## Essential Rules\n\n- **Deterministic:** No `Math.random()`, no `Date.now()`, no `requestAnimationFrame`, no `repeat: -1`. The render engine seeks to exact timestamps.\n- **Timeline contract:** `window.__timelines[\"composition-id\"] = tl` must be set synchronously. The timeline length defines the composition duration.\n- **Sub-compositions:** External `.html` files loaded via `data-composition-src`. Auto-nested timelines, scoped CSS, scoped scripts.\n- **Linter:** 60+ rules. Run `npx hyperframes lint` before render. Catches missing timelines, overlapping clips, broken paths, GSAP errors.\n\n## Table of Contents\n\n| # | Section | What it covers |\n| --- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| 1 | **Composition fundamentals** | Data attributes, timeline contract, resolution presets (1080p, 4K, portrait, square, custom) |\n| 2 | **Animation engines (6 adapters)** | GSAP + 15 plugins, Anime.js v4, CSS @keyframes, WAAPI, Lottie (lottie-web + dotlottie), Three.js (hf-seek event) |\n| 3 | **Shader transitions (14 WebGL)** | domain-warp, ridged-burn, whip-pan, sdf-iris, ripple-waves, gravitational-lens, cinematic-zoom, chromatic-split, swirl-vortex, thermal-distortion, flash-through-white, cross-warp-morph, light-leak, glitch — plus custom GLSL |\n| 4 | **CSS scene transitions (30+)** | Push/slide, scale/zoom, radial/clip, 3D flip, blur, dissolve, cover/blinds, light leak/burn, distortion/glitch, mechanical/shutter, grid dissolve, destruction/burn, VHS/gravity/morph — 6 timing presets |\n| 5 | **Visual effects + textures** | Text markers (highlight, circle, burst, scribble, sketchout), grain/noise, light leaks, film burn, vignette, glow, paper texture, shimmer sweep |\n| 6 | **Caption techniques** | Per-word karaoke, intensity tiers, 5 exit styles, 6 tone mappings, per-word styling triggers, 7 audio source formats, positioning helpers |\n| 7 | **Audio-reactive animation** | Bass→scale, mid→shape, treble→glow; any GSAP property; band extraction script; banned patterns |\n| 8 | **HTML-in-canvas** | Live DOM as GPU texture (drawElementImage), Three.js planes, WebGL shaders on HTML, 7 VFX blocks (iPhone/MacBook device, liquid, glass, magnetic, portal, shatter, text cursor) |\n| 9 | **Three.js / WebGL custom scenes** | Full 3D: AnimationMixer, custom GLSL, post-processing, GLTF models, lights, cameras, materials — all deterministic via hf-seek |\n| 10 | **SVG / canvas / variable fonts** | SVG path drawing, Canvas 2D procedural art, CSS 3D card, per-word type, variable font axes, character typing, velocity-matched cuts, MotionPath |\n| 11 | **Media: video, audio, TTS** | Video compositing + frame injection, audio mixer (multi-track), Kokoro TTS (54 voices, 9 languages), Whisper/Groq/OpenAI transcription, background removal (u2net) |\n| 12 | **Registry (51 blocks + 4 components + 8 examples)** | Social overlays (8), showcases (5), data viz (2), logo branding (1), 3D/VFX (7), shader transitions (14), transition galleries (13), components (grain, shimmer, pixelate, texture-mask), 8 starter examples |\n| 13 | **CLI (25 commands)** | init, add, catalog, play, preview, publish, render (MP4/WebM/MOV/PNG, HDR, GPU, parallel), lint, validate, inspect, snapshot, capture, tts, transcribe, remove-background, doctor, and more |\n| 14 | **Linter (60+ rules)** | Core, media, GSAP, captions, composition, adapters, textures, fonts — plus async URL checks |\n| 15 | **Player web component** | `` with seek/play/pause API, 11 events, media mirror, runtime auto-inject |\n| 16 | **Engine + Producer** | MP4/WebM/MOV/PNG output, HDR (PQ/HLG), transparency (ProRes), GPU encoding (NVENC/VideoToolbox/VAAPI/QSV), parallel rendering, video frame injection |\n| 17 | **Studio (in-browser NLE)** | Timeline editor, drag/resize clips, asset browser, render queue, lint modal, caption editor, element picker |\n| 18 | **Determinism guarantees** | No Math.random, no Date.now, no RAF, no repeat:-1, no callbacks, synchronous construction |\n| 19 | **Variables / parameterization** | Typed runtime variables (string, color, number, boolean, enum), CLI override, strict validation |\n| 20 | **Sub-compositions** | External file or inline template, auto-nested timelines, scoped CSS, scoped scripts, variable inheritance |\n| 21 | **Global runtime APIs** | 25+ window globals for timelines, player, variables, adapters, hooks |\n| 22 | **Skills (16)** | hyperframes, cli, media, registry, contrast, animation-map, website-to-video, remotion, gsap, animejs, css-animations, waapi, lottie, three, tailwind, contribute-catalog |\n| 23 | **References (15 docs)** | transitions, css-patterns, dynamic-techniques, motion-principles, typography, narration, captions, audio-reactive, transcript-guide, techniques, beat-direction, visual-styles, and more |\n| 24 | **Documentation (27 pages)** | Guides + package docs covering rendering, HDR, html-in-canvas, performance, prompting, troubleshooting, etc. |\n\n---\n\n## 1. Composition fundamentals\n\n### Data attributes recognized by the runtime\n\n- **Root composition:** `data-composition-id`, `data-start`, `data-duration`, `data-width`, `data-height`, `data-composition-src` (external sub-comp), `data-composition-duration`, `data-composition-variables` (JSON), `data-variable-values` (override)\n- **Every clip:** `id`, `data-start`, `data-duration`, `data-track-index`, `class=\"clip\"`, optional `data-media-start`, `data-volume`, `data-playback-start`\n- **Sub-composition host:** `data-composition-id`, `data-composition-src` OR inline `