[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GETMJ1EB33T4ENV02576WG":3,"skill-same:01M6GETMJ1EB33T4ENV02576WG":88},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":67,"commitSha":68,"skillDirectory":69,"forksCount":70,"repositoryHtmlUrl":71,"repositoryHomepageUrl":6,"ownerHtmlUrl":72,"ownerBlogUrl":6,"ownerDescription":73,"updatedAt":74,"install":75,"resources":87},"01M6GETMJ1EB33T4ENV02576WG","hyperframes",null,"Create HTML-to-video compositions with captions.","zapabob\u002FSkills","zapabob","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F130830376?v=4","01M6DBMYZAGRTFQDSQYW3W764P","峯岸 亮","01M6DBMZ3GKDSJ01NZ9XTZD7JD",2,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Farchive\u002Fskill-md-reviewed\u002Fsha256\u002Fcd\u002Fcd9e4ca05d9c33807a8da73f7bd528584cc5faf139f098c2191d123ea4de3d29\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",[5,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"node","heygen","motion-graphics","with","ffmpeg","meme","generation","npx","motion","creative","terminal","Captions","Animation","Video","gsap","create","windows","linux","graphics","2026-11-10 10:12:30",false,"---\r\nname: hyperframes\r\ndescription: \"Create HTML-to-video compositions with captions.\"\r\nversion: 1.0.0\r\nauthor: heygen-com\r\nlicense: Apache-2.0\r\nplatforms: [linux, macos, windows]\r\nprerequisites:\r\n  commands: [node, ffmpeg, npx]\r\nmetadata:\r\n  hermes:\r\n    tags: [creative, video, animation, html, gsap, motion-graphics]\r\n    related_skills: [manim-video, meme-generation]\r\n    category: creative\r\n    requires_toolsets: [terminal]\r\n---\r\n\r\n# HyperFrames\r\n\r\n**Default first choice for video in this Hermes profile.** HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The HyperFrames engine captures the page frame-by-frame and encodes to MP4\u002FWebM with FFmpeg.\r\n\r\n**Complement to `manim-video`:** Use `hyperframes` first for motion-graphics, talking-head with captions, product tours, social overlays, shader transitions, and anything driven by real video\u002Faudio media. Use `manim-video` only for pure math\u002Fequation animation (equations, 3B1B-style).\r\n\r\n## When to Use\r\n\r\n- User asks for a rendered video from text, a script, or a website\r\n- Animated title cards, lower thirds, or typographic intros\r\n- Captioned narration video (TTS + captions synced to waveform)\r\n- Audio-reactive visuals (beat sync, spectrum bars, pulsing glow)\r\n- Scene-to-scene transitions (crossfade, wipe, shader warp, flash-through-white)\r\n- Social overlays (Instagram\u002FTikTok\u002FYouTube style)\r\n- Website-to-video pipeline (capture a URL, produce a promo)\r\n- Any HTML\u002FCSS\u002FJS animation that must render deterministically to a video file\r\n\r\nDo **not** use this skill for:\r\n- Pure math\u002Fequation animation (→ `manim-video`)\r\n- Image generation or memes (→ `meme-generation`, image models)\r\n- Live video conferencing or streaming\r\n\r\n## Quick Reference\r\n\r\n```bash\r\nnpx hyperframes init my-video               # scaffold a project\r\ncd my-video\r\nnpx hyperframes lint                        # validate before preview\u002Frender\r\nnpx hyperframes preview                     # live-reload browser preview (port 3002)\r\nnpx hyperframes render --output final.mp4   # render to MP4\r\nnpx hyperframes doctor                      # diagnose environment issues\r\n```\r\n\r\nRender flags: `--quality draft|standard|high` · `--fps 24|30|60` · `--format mp4|webm` · `--docker` (reproducible) · `--strict`.\r\n\r\nFull CLI reference: [references\u002Fcli.md](references\u002Fcli.md).\r\n\r\n## Setup (one-time)\r\n\r\n```bash\r\nbash \"$(dirname \"$(find ~\u002F.hermes\u002Fskills -path '*\u002Fhyperframes\u002FSKILL.md' 2>\u002Fdev\u002Fnull | head -1)\")\u002Fscripts\u002Fsetup.sh\"\r\n```\r\n\r\nThe script:\r\n1. Verifies Node.js >= 22 and FFmpeg are installed (prints fix instructions if not).\r\n2. Installs the `hyperframes` CLI globally (`npm install -g hyperframes@>=0.4.2`).\r\n3. Pre-caches `chrome-headless-shell` via Puppeteer — **required** for best-quality rendering via Chrome's `HeadlessExperimental.beginFrame` capture path.\r\n4. Runs `npx hyperframes doctor` and reports the result.\r\n\r\nSee [references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md) if setup fails.\r\n\r\n## Procedure\r\n\r\n### 1. Plan before writing HTML\r\n\r\nBefore touching code, articulate at a high level:\r\n- **What** — narrative arc, key moments, emotional beats\r\n- **Structure** — compositions, tracks (video\u002Faudio\u002Foverlays), durations\r\n- **Visual identity** — colors, fonts, motion character (explosive \u002F cinematic \u002F fluid \u002F technical)\r\n- **Hero frame** — for each scene, the moment when the most elements are simultaneously visible. This is the static layout you'll build first.\r\n\r\n**Visual Identity Gate (HARD-GATE).** Before writing ANY composition HTML, a visual identity must be defined. Do NOT write compositions with default or generic colors (`#333`, `#3b82f6`, `Roboto` are tells that this step was skipped). Check in order:\r\n\r\n1. **`DESIGN.md` at project root?** → Use its exact colors, fonts, motion rules, and \"What NOT to Do\" constraints.\r\n2. **User named a style** (e.g. \"Swiss Pulse\", \"dark and techy\", \"luxury brand\")? → Generate a minimal `DESIGN.md` with `## Style Prompt`, `## Colors` (3-5 hex with roles), `## Typography` (1-2 families), `## What NOT to Do` (3-5 anti-patterns).\r\n3. **None of the above?** → Ask 3 questions before writing any HTML:\r\n   - Mood? (explosive \u002F cinematic \u002F fluid \u002F technical \u002F chaotic \u002F warm)\r\n   - Light or dark canvas?\r\n   - Any brand colors, fonts, or visual references?\r\n\r\n   Then generate a `DESIGN.md` from the answers. Every composition must trace its palette and typography back to `DESIGN.md` or explicit user direction.\r\n\r\n### 2. Scaffold\r\n\r\n```bash\r\nnpx hyperframes init my-video --non-interactive\r\n```\r\n\r\nTemplates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph`. Pass `--example \u003Cname>` to pick one, `--video clip.mp4` or `--audio track.mp3` to seed with media.\r\n\r\n### 3. Layout before animation\r\n\r\nWrite the static HTML+CSS for the **hero frame first** — no GSAP yet. The `.scene-content` container must fill the scene (`width:100%; height:100%; padding:Npx`) with `display:flex` + `gap`. Use padding to push content inward — never `position: absolute; top: Npx` on a content container (content overflows when taller than the remaining space).\r\n\r\nOnly after the hero frame looks right, add `gsap.from()` entrances (animate **to** the CSS position) and `gsap.to()` exits (animate **from** it).\r\n\r\nSee [references\u002Fcomposition.md](references\u002Fcomposition.md) for the full data-attribute schema and composition rules.\r\n\r\n### 4. Animate with GSAP\r\n\r\nEvery composition must:\r\n- Register its timeline: `window.__timelines[\"\u003Ccomposition-id>\"] = tl`\r\n- Start paused: `gsap.timeline({ paused: true })` — the player controls playback\r\n- Use finite `repeat` values (no `repeat: -1` — breaks the capture engine). Calculate: `repeat: Math.ceil(duration \u002F cycleDuration) - 1`.\r\n- Be deterministic — no `Math.random()`, `Date.now()`, or wall-clock logic. Use a seeded PRNG if you need pseudo-randomness.\r\n- Build synchronously — no `async`\u002F`await`, `setTimeout`, or Promises around timeline construction.\r\n\r\nSee [references\u002Fgsap.md](references\u002Fgsap.md) for the core GSAP API (tweens, eases, stagger, timelines).\r\n\r\n### 5. Transitions between scenes\r\n\r\nMulti-scene compositions require transitions. Rules:\r\n1. **Always use a transition between scenes** — no jump cuts.\r\n2. **Always use entrance animations** on every scene element (`gsap.from(...)`).\r\n3. **Never use exit animations** except on the final scene — the transition IS the exit.\r\n4. The final scene may fade out.\r\n\r\nUse `npx hyperframes add \u003Ctransition-name>` to install shader transitions (`flash-through-white`, `liquid-wipe`, etc.). Full list: `npx hyperframes add --list`.\r\n\r\n### 6. Audio, captions, TTS, audio-reactive, highlighting\r\n\r\n- **Audio:** always a separate `\u003Caudio>` element (video is `muted playsinline`).\r\n- **TTS:** `npx hyperframes tts \"Script text\" --voice af_nova --output narration.wav`. List voices with `--list`. Voice ID first letter encodes language (`a`\u002F`b`=English, `e`=Spanish, `f`=French, `j`=Japanese, `z`=Mandarin, etc.) — the CLI auto-infers the phonemizer locale; pass `--lang` only to override. Non-English phonemization requires `espeak-ng` installed system-wide.\r\n- **Captions:** `npx hyperframes transcribe narration.wav` → word-level transcript. Pick style from the transcript tone (hype \u002F corporate \u002F tutorial \u002F storytelling \u002F social — see the table in `references\u002Ffeatures.md`). **Language rule:** never use `.en` whisper models unless the audio is confirmed English — `.en` translates non-English audio instead of transcribing it. Every caption group MUST have a hard `tl.set(el, { opacity: 0, visibility: \"hidden\" }, group.end)` kill after its exit tween — otherwise groups leak visible into later ones.\r\n- **Audio-reactive visuals:** pre-extract audio bands (bass \u002F mid \u002F treble) and sample per-frame inside the timeline with a `for` loop of `tl.call(draw, [], f \u002F fps)` — a single long tween does NOT react to audio. Map bass → `scale` (pulse), treble → `textShadow`\u002F`boxShadow` (glow), overall amplitude → `opacity`\u002F`y`\u002F`backgroundColor`. Avoid equalizer-bar clichés — let content guide the visual, audio drive its behavior.\r\n- **Marker-style highlighting:** highlight, circle, burst, scribble, sketchout effects for text emphasis are deterministic CSS+GSAP — see `references\u002Ffeatures.md#marker-highlighting`. Fully seekable, no animated SVG filters.\r\n- **Scene transitions:** every multi-scene composition MUST use transitions (no jump cuts). Pick from CSS primitives (push slide, blur crossfade, zoom through, staggered blocks) or shader transitions (`flash-through-white`, `liquid-wipe`, `cross-warp-morph`, `chromatic-split`, etc.) via `npx hyperframes add`. Mood and energy tables live in `references\u002Ffeatures.md#transitions`. Do not mix CSS and shader transitions in the same composition.\r\n\r\n### 7. Lint, validate, inspect, preview, render\r\n\r\n```bash\r\nnpx hyperframes lint              # catches missing data-composition-id, overlapping tracks, unregistered timelines\r\nnpx hyperframes validate          # WCAG contrast audit at 5 timestamps\r\nnpx hyperframes inspect           # visual layout audit — overflow, off-frame elements, occluded text\r\nnpx hyperframes preview           # live browser preview\r\nnpx hyperframes render --quality draft --output draft.mp4    # fast iteration\r\nnpx hyperframes render --quality high --output final.mp4     # final delivery\r\n```\r\n\r\n`hyperframes validate` samples background pixels behind every text element and warns on contrast ratios below 4.5:1 (or 3:1 for large text). `hyperframes inspect` is the layout-side companion — runs the page at multiple timestamps and flags issues that a static lint can't see (a caption that wraps past the safe area only at 4.5s, a card that overflows when its title is the longest variant, an element that ends up behind a transition shader). Run `inspect` especially on compositions with speech bubbles, cards, captions, or tight typography.\r\n\r\n### 8. Website-to-video (if the user gives a URL)\r\n\r\nUse the 7-step capture-to-video workflow in [references\u002Fwebsite-to-video.md](references\u002Fwebsite-to-video.md): capture → DESIGN.md → SCRIPT.md → storyboard → composition → render → deliver.\r\n\r\n## Pitfalls\r\n\r\n- **`HeadlessExperimental.beginFrame' wasn't found`** — Chromium 147+ removed this protocol. Ensure you're on `hyperframes@>=0.4.2` (auto-detects and falls back to screenshot mode). Escape hatch: `export PRODUCER_FORCE_SCREENSHOT=true`. See [hyperframes#294](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fissues\u002F294) and [references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md).\r\n- **System Chrome (not `chrome-headless-shell`)** — renders hang for 120s then timeout. Run `npx puppeteer browsers install chrome-headless-shell` (setup.sh does this). `hyperframes doctor` reports which binary will be used.\r\n- **`repeat: -1` anywhere** — breaks the capture engine. Always compute a finite repeat count.\r\n- **`gsap.set()` on clip elements that enter later** — the element doesn't exist at page load. Use `tl.set(selector, vars, timePosition)` inside the timeline instead, at or after the clip's `data-start`.\r\n- **`\u003Cbr>` inside content text** — forced breaks don't know the rendered font width, so natural wrap + `\u003Cbr>` double-breaks. Use `max-width` to let text wrap. Exception: short display titles where each word is deliberately on its own line.\r\n- **Animating `visibility` or `display`** — GSAP can't tween these. Use `autoAlpha` (handles both visibility and opacity).\r\n- **Calling `video.play()` or `audio.play()`** — the framework owns playback. Never call these yourself.\r\n- **Building timelines async** — the capture engine reads `window.__timelines` synchronously after page load. Never wrap timeline construction in `async`, `setTimeout`, or a Promise.\r\n- **Standalone `index.html` wrapped in `\u003Ctemplate>`** — hides all content from the browser. Only **sub-compositions** loaded via `data-composition-src` use `\u003Ctemplate>`.\r\n- **Using video for audio** — always muted `\u003Cvideo>` + separate `\u003Caudio>`.\r\n\r\n## Verification\r\n\r\nBefore and after rendering:\r\n\r\n1. **Lint + validate + inspect pass:** `npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect` (lint catches structural issues, validate catches contrast, inspect catches visual layout \u002F overflow issues — see troubleshooting.md if warnings appear).\r\n2. **Animation choreography** — for new compositions or significant animation changes, run the animation map. `npx hyperframes init` copies the skill scripts into the project, so the path is project-local:\r\n   ```bash\r\n   node skills\u002Fhyperframes\u002Fscripts\u002Fanimation-map.mjs \u003Ccomposition-dir> \\\r\n     --out \u003Ccomposition-dir>\u002F.hyperframes\u002Fanim-map\r\n   ```\r\n   Outputs a single `animation-map.json` with per-tween summaries, ASCII Gantt timeline, stagger detection, dead zones (>1s with no animation), element lifecycles, and flags (`offscreen`, `collision`, `invisible`, `paced-fast` \u003C0.2s, `paced-slow` >2s). Scan summaries and flags — fix or justify each. Skip on small edits.\r\n3. **File exists + non-zero:** `ls -lh final.mp4`.\r\n4. **Duration matches `data-duration`:** `ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 final.mp4`.\r\n5. **Visual check:** extract a mid-composition frame: `ffmpeg -i final.mp4 -ss 00:00:05 -vframes 1 preview.png`.\r\n6. **Audio present if expected:** `ffprobe -v error -show_streams -select_streams a -of default=nw=1:nk=1 final.mp4 | head -1`.\r\n\r\nIf `hyperframes render` fails, run `npx hyperframes doctor` and attach its output when reporting.\r\n\r\n## References\r\n\r\n- [composition.md](references\u002Fcomposition.md) — data attributes, timeline contract, non-negotiable rules, typography\u002Fasset rules\r\n- [cli.md](references\u002Fcli.md) — every CLI command (init, capture, lint, validate, inspect, preview, render, transcribe, tts, doctor, browser, info, upgrade, benchmark)\r\n- [gsap.md](references\u002Fgsap.md) — GSAP core API for HyperFrames (tweens, eases, stagger, timelines, matchMedia)\r\n- [features.md](references\u002Ffeatures.md) — captions, TTS, audio-reactive, marker highlighting, transitions (load on demand)\r\n- [website-to-video.md](references\u002Fwebsite-to-video.md) — 7-step capture-to-video workflow\r\n- [troubleshooting.md](references\u002Ftroubleshooting.md) — OpenClaw fix, env vars, common render errors\r\n","# HyperFrames\r\n\r\n**Default first choice for video in this Hermes profile.** HTML is the source of truth for video. A composition is an HTML file with `data-*` attributes for timing, a GSAP timeline for animation, and CSS for appearance. The HyperFrames engine captures the page frame-by-frame and encodes to MP4\u002FWebM with FFmpeg.\r\n\r\n**Complement to `manim-video`:** Use `hyperframes` first for motion-graphics, talking-head with captions, product tours, social overlays, shader transitions, and anything driven by real video\u002Faudio media. Use `manim-video` only for pure math\u002Fequation animation (equations, 3B1B-style).\r\n\r\n## When to Use\r\n\r\n- User asks for a rendered video from text, a script, or a website\r\n- Animated title cards, lower thirds, or typographic intros\r\n- Captioned narration video (TTS + captions synced to waveform)\r\n- Audio-reactive visuals (beat sync, spectrum bars, pulsing glow)\r\n- Scene-to-scene transitions (crossfade, wipe, shader warp, flash-through-white)\r\n- Social overlays (Instagram\u002FTikTok\u002FYouTube style)\r\n- Website-to-video pipeline (capture a URL, produce a promo)\r\n- Any HTML\u002FCSS\u002FJS animation that must render deterministically to a video file\r\n\r\nDo **not** use this skill for:\r\n- Pure math\u002Fequation animation (→ `manim-video`)\r\n- Image generation or memes (→ `meme-generation`, image models)\r\n- Live video conferencing or streaming\r\n\r\n## Quick Reference\r\n\r\n```bash\r\nnpx hyperframes init my-video               # scaffold a project\r\ncd my-video\r\nnpx hyperframes lint                        # validate before preview\u002Frender\r\nnpx hyperframes preview                     # live-reload browser preview (port 3002)\r\nnpx hyperframes render --output final.mp4   # render to MP4\r\nnpx hyperframes doctor                      # diagnose environment issues\r\n```\r\n\r\nRender flags: `--quality draft|standard|high` · `--fps 24|30|60` · `--format mp4|webm` · `--docker` (reproducible) · `--strict`.\r\n\r\nFull CLI reference: [references\u002Fcli.md](references\u002Fcli.md).\r\n\r\n## Setup (one-time)\r\n\r\n```bash\r\nbash \"$(dirname \"$(find ~\u002F.hermes\u002Fskills -path '*\u002Fhyperframes\u002FSKILL.md' 2>\u002Fdev\u002Fnull | head -1)\")\u002Fscripts\u002Fsetup.sh\"\r\n```\r\n\r\nThe script:\r\n1. Verifies Node.js >= 22 and FFmpeg are installed (prints fix instructions if not).\r\n2. Installs the `hyperframes` CLI globally (`npm install -g hyperframes@>=0.4.2`).\r\n3. Pre-caches `chrome-headless-shell` via Puppeteer — **required** for best-quality rendering via Chrome's `HeadlessExperimental.beginFrame` capture path.\r\n4. Runs `npx hyperframes doctor` and reports the result.\r\n\r\nSee [references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md) if setup fails.\r\n\r\n## Procedure\r\n\r\n### 1. Plan before writing HTML\r\n\r\nBefore touching code, articulate at a high level:\r\n- **What** — narrative arc, key moments, emotional beats\r\n- **Structure** — compositions, tracks (video\u002Faudio\u002Foverlays), durations\r\n- **Visual identity** — colors, fonts, motion character (explosive \u002F cinematic \u002F fluid \u002F technical)\r\n- **Hero frame** — for each scene, the moment when the most elements are simultaneously visible. This is the static layout you'll build first.\r\n\r\n**Visual Identity Gate (HARD-GATE).** Before writing ANY composition HTML, a visual identity must be defined. Do NOT write compositions with default or generic colors (`#333`, `#3b82f6`, `Roboto` are tells that this step was skipped). Check in order:\r\n\r\n1. **`DESIGN.md` at project root?** → Use its exact colors, fonts, motion rules, and \"What NOT to Do\" constraints.\r\n2. **User named a style** (e.g. \"Swiss Pulse\", \"dark and techy\", \"luxury brand\")? → Generate a minimal `DESIGN.md` with `## Style Prompt`, `## Colors` (3-5 hex with roles), `## Typography` (1-2 families), `## What NOT to Do` (3-5 anti-patterns).\r\n3. **None of the above?** → Ask 3 questions before writing any HTML:\r\n   - Mood? (explosive \u002F cinematic \u002F fluid \u002F technical \u002F chaotic \u002F warm)\r\n   - Light or dark canvas?\r\n   - Any brand colors, fonts, or visual references?\r\n\r\n   Then generate a `DESIGN.md` from the answers. Every composition must trace its palette and typography back to `DESIGN.md` or explicit user direction.\r\n\r\n### 2. Scaffold\r\n\r\n```bash\r\nnpx hyperframes init my-video --non-interactive\r\n```\r\n\r\nTemplates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph`. Pass `--example \u003Cname>` to pick one, `--video clip.mp4` or `--audio track.mp3` to seed with media.\r\n\r\n### 3. Layout before animation\r\n\r\nWrite the static HTML+CSS for the **hero frame first** — no GSAP yet. The `.scene-content` container must fill the scene (`width:100%; height:100%; padding:Npx`) with `display:flex` + `gap`. Use padding to push content inward — never `position: absolute; top: Npx` on a content container (content overflows when taller than the remaining space).\r\n\r\nOnly after the hero frame looks right, add `gsap.from()` entrances (animate **to** the CSS position) and `gsap.to()` exits (animate **from** it).\r\n\r\nSee [references\u002Fcomposition.md](references\u002Fcomposition.md) for the full data-attribute schema and composition rules.\r\n\r\n### 4. Animate with GSAP\r\n\r\nEvery composition must:\r\n- Register its timeline: `window.__timelines[\"\u003Ccomposition-id>\"] = tl`\r\n- Start paused: `gsap.timeline({ paused: true })` — the player controls playback\r\n- Use finite `repeat` values (no `repeat: -1` — breaks the capture engine). Calculate: `repeat: Math.ceil(duration \u002F cycleDuration) - 1`.\r\n- Be deterministic — no `Math.random()`, `Date.now()`, or wall-clock logic. Use a seeded PRNG if you need pseudo-randomness.\r\n- Build synchronously — no `async`\u002F`await`, `setTimeout`, or Promises around timeline construction.\r\n\r\nSee [references\u002Fgsap.md](references\u002Fgsap.md) for the core GSAP API (tweens, eases, stagger, timelines).\r\n\r\n### 5. Transitions between scenes\r\n\r\nMulti-scene compositions require transitions. Rules:\r\n1. **Always use a transition between scenes** — no jump cuts.\r\n2. **Always use entrance animations** on every scene element (`gsap.from(...)`).\r\n3. **Never use exit animations** except on the final scene — the transition IS the exit.\r\n4. The final scene may fade out.\r\n\r\nUse `npx hyperframes add \u003Ctransition-name>` to install shader transitions (`flash-through-white`, `liquid-wipe`, etc.). Full list: `npx hyperframes add --list`.\r\n\r\n### 6. Audio, captions, TTS, audio-reactive, highlighting\r\n\r\n- **Audio:** always a separate `\u003Caudio>` element (video is `muted playsinline`).\r\n- **TTS:** `npx hyperframes tts \"Script text\" --voice af_nova --output narration.wav`. List voices with `--list`. Voice ID first letter encodes language (`a`\u002F`b`=English, `e`=Spanish, `f`=French, `j`=Japanese, `z`=Mandarin, etc.) — the CLI auto-infers the phonemizer locale; pass `--lang` only to override. Non-English phonemization requires `espeak-ng` installed system-wide.\r\n- **Captions:** `npx hyperframes transcribe narration.wav` → word-level transcript. Pick style from the transcript tone (hype \u002F corporate \u002F tutorial \u002F storytelling \u002F social — see the table in `references\u002Ffeatures.md`). **Language rule:** never use `.en` whisper models unless the audio is confirmed English — `.en` translates non-English audio instead of transcribing it. Every caption group MUST have a hard `tl.set(el, { opacity: 0, visibility: \"hidden\" }, group.end)` kill after its exit tween — otherwise groups leak visible into later ones.\r\n- **Audio-reactive visuals:** pre-extract audio bands (bass \u002F mid \u002F treble) and sample per-frame inside the timeline with a `for` loop of `tl.call(draw, [], f \u002F fps)` — a single long tween does NOT react to audio. Map bass → `scale` (pulse), treble → `textShadow`\u002F`boxShadow` (glow), overall amplitude → `opacity`\u002F`y`\u002F`backgroundColor`. Avoid equalizer-bar clichés — let content guide the visual, audio drive its behavior.\r\n- **Marker-style highlighting:** highlight, circle, burst, scribble, sketchout effects for text emphasis are deterministic CSS+GSAP — see `references\u002Ffeatures.md#marker-highlighting`. Fully seekable, no animated SVG filters.\r\n- **Scene transitions:** every multi-scene composition MUST use transitions (no jump cuts). Pick from CSS primitives (push slide, blur crossfade, zoom through, staggered blocks) or shader transitions (`flash-through-white`, `liquid-wipe`, `cross-warp-morph`, `chromatic-split`, etc.) via `npx hyperframes add`. Mood and energy tables live in `references\u002Ffeatures.md#transitions`. Do not mix CSS and shader transitions in the same composition.\r\n\r\n### 7. Lint, validate, inspect, preview, render\r\n\r\n```bash\r\nnpx hyperframes lint              # catches missing data-composition-id, overlapping tracks, unregistered timelines\r\nnpx hyperframes validate          # WCAG contrast audit at 5 timestamps\r\nnpx hyperframes inspect           # visual layout audit — overflow, off-frame elements, occluded text\r\nnpx hyperframes preview           # live browser preview\r\nnpx hyperframes render --quality draft --output draft.mp4    # fast iteration\r\nnpx hyperframes render --quality high --output final.mp4     # final delivery\r\n```\r\n\r\n`hyperframes validate` samples background pixels behind every text element and warns on contrast ratios below 4.5:1 (or 3:1 for large text). `hyperframes inspect` is the layout-side companion — runs the page at multiple timestamps and flags issues that a static lint can't see (a caption that wraps past the safe area only at 4.5s, a card that overflows when its title is the longest variant, an element that ends up behind a transition shader). Run `inspect` especially on compositions with speech bubbles, cards, captions, or tight typography.\r\n\r\n### 8. Website-to-video (if the user gives a URL)\r\n\r\nUse the 7-step capture-to-video workflow in [references\u002Fwebsite-to-video.md](references\u002Fwebsite-to-video.md): capture → DESIGN.md → SCRIPT.md → storyboard → composition → render → deliver.\r\n\r\n## Pitfalls\r\n\r\n- **`HeadlessExperimental.beginFrame' wasn't found`** — Chromium 147+ removed this protocol. Ensure you're on `hyperframes@>=0.4.2` (auto-detects and falls back to screenshot mode). Escape hatch: `export PRODUCER_FORCE_SCREENSHOT=true`. See [hyperframes#294](https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fissues\u002F294) and [references\u002Ftroubleshooting.md](references\u002Ftroubleshooting.md).\r\n- **System Chrome (not `chrome-headless-shell`)** — renders hang for 120s then timeout. Run `npx puppeteer browsers install chrome-headless-shell` (setup.sh does this). `hyperframes doctor` reports which binary will be used.\r\n- **`repeat: -1` anywhere** — breaks the capture engine. Always compute a finite repeat count.\r\n- **`gsap.set()` on clip elements that enter later** — the element doesn't exist at page load. Use `tl.set(selector, vars, timePosition)` inside the timeline instead, at or after the clip's `data-start`.\r\n- **`\u003Cbr>` inside content text** — forced breaks don't know the rendered font width, so natural wrap + `\u003Cbr>` double-breaks. Use `max-width` to let text wrap. Exception: short display titles where each word is deliberately on its own line.\r\n- **Animating `visibility` or `display`** — GSAP can't tween these. Use `autoAlpha` (handles both visibility and opacity).\r\n- **Calling `video.play()` or `audio.play()`** — the framework owns playback. Never call these yourself.\r\n- **Building timelines async** — the capture engine reads `window.__timelines` synchronously after page load. Never wrap timeline construction in `async`, `setTimeout`, or a Promise.\r\n- **Standalone `index.html` wrapped in `\u003Ctemplate>`** — hides all content from the browser. Only **sub-compositions** loaded via `data-composition-src` use `\u003Ctemplate>`.\r\n- **Using video for audio** — always muted `\u003Cvideo>` + separate `\u003Caudio>`.\r\n\r\n## Verification\r\n\r\nBefore and after rendering:\r\n\r\n1. **Lint + validate + inspect pass:** `npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect` (lint catches structural issues, validate catches contrast, inspect catches visual layout \u002F overflow issues — see troubleshooting.md if warnings appear).\r\n2. **Animation choreography** — for new compositions or significant animation changes, run the animation map. `npx hyperframes init` copies the skill scripts into the project, so the path is project-local:\r\n   ```bash\r\n   node skills\u002Fhyperframes\u002Fscripts\u002Fanimation-map.mjs \u003Ccomposition-dir> \\\r\n     --out \u003Ccomposition-dir>\u002F.hyperframes\u002Fanim-map\r\n   ```\r\n   Outputs a single `animation-map.json` with per-tween summaries, ASCII Gantt timeline, stagger detection, dead zones (>1s with no animation), element lifecycles, and flags (`offscreen`, `collision`, `invisible`, `paced-fast` \u003C0.2s, `paced-slow` >2s). Scan summaries and flags — fix or justify each. Skip on small edits.\r\n3. **File exists + non-zero:** `ls -lh final.mp4`.\r\n4. **Duration matches `data-duration`:** `ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 final.mp4`.\r\n5. **Visual check:** extract a mid-composition frame: `ffmpeg -i final.mp4 -ss 00:00:05 -vframes 1 preview.png`.\r\n6. **Audio present if expected:** `ffprobe -v error -show_streams -select_streams a -of default=nw=1:nk=1 final.mp4 | head -1`.\r\n\r\nIf `hyperframes render` fails, run `npx hyperframes doctor` and attach its output when reporting.\r\n\r\n## References\r\n\r\n- [composition.md](references\u002Fcomposition.md) — data attributes, timeline contract, non-negotiable rules, typography\u002Fasset rules\r\n- [cli.md](references\u002Fcli.md) — every CLI command (init, capture, lint, validate, inspect, preview, render, transcribe, tts, doctor, browser, info, upgrade, benchmark)\r\n- [gsap.md](references\u002Fgsap.md) — GSAP core API for HyperFrames (tweens, eases, stagger, timelines, matchMedia)\r\n- [features.md](references\u002Ffeatures.md) — captions, TTS, audio-reactive, marker highlighting, transitions (load on demand)\r\n- [website-to-video.md](references\u002Fwebsite-to-video.md) — 7-step capture-to-video workflow\r\n- [troubleshooting.md](references\u002Ftroubleshooting.md) — OpenClaw fix, env vars, common render errors\r\n",{"name":5,"author":51,"license":15,"version":52,"metadata":53,"platforms":63,"description":7,"prerequisites":65},"heygen-com","1.0.0",{"hermes":54},{"tags":55,"category":36,"related_skills":59,"requires_toolsets":62},[36,56,57,58,41,29],"video","animation","html",[60,61],"manim-video","meme-generation",[37],[44,64,43],"macos",{"commands":66},[27,31,34],"main","0d1434f89f4bc6b07e9d272accd8c1013768820f","archive\u002Fskill-md-reviewed\u002Fsha256\u002Fcd\u002Fcd9e4ca05d9c33807a8da73f7bd528584cc5faf139f098c2191d123ea4de3d29",0,"https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills","https:\u002F\u002Fgithub.com\u002Fzapabob","The Open University of JAPAN　2019-now\r\n\r\nTokyo University of Science　2007-2010","2026-10-26 16:29:01",{"source":8,"skillName":5,"commands":76,"prompt":85,"zipAvailable":86},[77,79,82],{"tool":34,"command":78},"npx skills add zapabob\u002FSkills --skill hyperframes",{"tool":80,"command":81},"bunx","bunx skills add zapabob\u002FSkills --skill hyperframes",{"tool":83,"command":84},"pnpm","pnpm dlx skills add zapabob\u002FSkills --skill hyperframes","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Farchive\u002Fskill-md-reviewed\u002Fsha256\u002Fcd\u002Fcd9e4ca05d9c33807a8da73f7bd528584cc5faf139f098c2191d123ea4de3d29\u002FSKILL.md",true,[],[89,123,158,183,210,225],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":93,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":107,"publishedAt":46},"01M6GJTE1GESGGF9K028Y7753E","xurl","X\u002FTwitter via xurl CLI: post, search, DM, media, v2 API.","MIT","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fxurl\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[96,99,102],{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[91,108,64,109,110,44,43,111,112,113,114,115,116,117,118,119,67,120,121,122],"openclaw","cli","github","official","search","https","social-media","api","Media","hermes","hermes agent","twitter","social","via","post",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":93,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":140,"publishedAt":46},"01M6GJT8S1PXQ8WPXT1HSNBWH2","writing-plans","Write implementation plans: bite-sized tasks, paths, code.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwriting-plans\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[129,132,135,136,137],{"categoryNo":130,"categoryName":131,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":133,"categoryName":134,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},{"categoryNo":138,"categoryName":139,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000036","内容创作者",[141,142,143,144,64,145,44,146,43,147,148,149,150,151,152,153,154,155,156,157],"writing","writing plans","plans","design","review","workflow","documentation","tasks","development","code","planning","code-review","subagent","write","superpowers","paths","test-driven-development",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":93,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":165,"publishedAt":46},"01M6GJST0H5X7WHBJ3BZK0DVKH","whisper","OpenAI's general-purpose speech recognition model. Supports 99 languages, transcription, translation to English, and language identification. Six model sizes from tiny (39M params) to large (1550M params). Use for speech-to-text, podcast transcription, or multilingual audio processing. Best for robust, multilingual ASR.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwhisper\u002Fvariants\u002Fhermes-agent-optional\u002FSKILL.md",[164],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[160,64,44,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182],"openai","speech","multimodal","Transformers","ASR","Audio","text","model","speech recognition","use","general","multilingual","translation","english","identification","processing","Audio Processing",{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":93,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":192,"publishedAt":46},"01M6GJSMRQ8EETZTYMG72P70EA","weights-and-biases","W&B: log ML experiments, sweeps, model registry, dashboards.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fweights-and-biases\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[189],{"categoryNo":190,"categoryName":191,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化",[193,64,194,195,43,196,197,198,199,200,201,173,202,203,204,205,206,207,208,209],"weights and biases","tensorflow","experiments","pytorch","visualization","registry","real-time","tuning","dashboards","experiment","log","time","Experiment Tracking","Model Registry","Hyperparameter Tuning","WandB","Real-Time Visualization",{"skillNo":211,"name":212,"nameZh":6,"description":213,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":93,"licenseFileUrl":6,"sourceHtmlUrl":214,"categories":215,"keywords":217,"publishedAt":46},"01M6GJS19KDPRY112JTR326S06","watchers","Poll RSS, JSON APIs, and GitHub with watermark dedup.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fwatchers\u002Fvariants\u002Fhermes-agent-optional\u002FSKILL.md",[216],{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},[212,64,37,110,44,218,219,220,221,222,223,117,118,224,30],"automation","http","monitoring","cron","json","rss","devops",{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":93,"licenseFileUrl":6,"sourceHtmlUrl":229,"categories":230,"keywords":233,"publishedAt":46},"01M6GJRHJD2A6Q830SWF9W48BC","serving-llms-vllm","vLLM: high-throughput LLM serving, OpenAI API, quantization.","https:\u002F\u002Fgithub.com\u002Fzapabob\u002FSkills\u002Fblob\u002Fmain\u002Fregistry\u002Fskills\u002Fvllm\u002Fvariants\u002Fhermes-agent\u002FSKILL.md",[231,232],{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},[234,235,236,44,237,166,238,239,240,169,241,115,242,243,244,245,246,247,248,249],"llms","vLLM","serving llms vllm","research","openai api","tensor","Inference Serving","Production","llm serving","High Throughput","PagedAttention","Continuous Batching","Quantization","Tensor Parallelism","high-throughput","throughput"]