[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70MMBC4NMNP6DC3KCG9GDFA":3,"skill-same:01M70MMBC4NMNP6DC3KCG9GDFA":73},{"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":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":56,"ownerDescription":57,"updatedAt":58,"install":59,"resources":72},"01M70MMBC4NMNP6DC3KCG9GDFA","hyperframes-media",null,"Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio\u002Fvideo transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fhyperframes-hyperframes-media\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"hyperframes media","hyperframes","Media","asset","video transcription","background removal","run","command","voiceover","whisper","text","image","preprocessing","when","overlays","model","overlay","Captions","Audio","Video","2026-11-10 10:12:30",false,"---\nname: hyperframes-media\ndescription: Asset preprocessing for HyperFrames compositions — text-to-speech narration (Kokoro), audio\u002Fvideo transcription (Whisper), and background removal for transparent overlays (u2net). Use when generating voiceover from text, transcribing speech for captions, removing the background from a video or image to use as a transparent overlay, choosing a TTS voice or whisper model, or chaining these (TTS → transcribe → captions). Each command downloads its own model on first run.\n---\n\n# HyperFrames Media Preprocessing\n\nThree CLI commands that produce assets for compositions: `tts` (speech), `transcribe` (timestamps), and `remove-background` (transparent video). Each downloads a model on first run and caches it under `~\u002F.cache\u002Fhyperframes\u002F`. Drop the output into the project, then reference it from the composition HTML — see the `hyperframes` skill for the audio\u002Fvideo element conventions.\n\n## Text-to-Speech (`tts`)\n\nGenerate speech audio locally with Kokoro-82M. No API key.\n\n```bash\nnpx hyperframes tts \"Text here\" --voice af_nova --output narration.wav\nnpx hyperframes tts script.txt --voice bf_emma --output narration.wav\nnpx hyperframes tts --list                       # all 54 voices\n```\n\n### Voice Selection\n\nMatch voice to content. Default is `af_heart`.\n\n| Content type      | Voice                 | Why                           |\n| ----------------- | --------------------- | ----------------------------- |\n| Product demo      | `af_heart`\u002F`af_nova`  | Warm, professional            |\n| Tutorial \u002F how-to | `am_adam`\u002F`bf_emma`   | Neutral, easy to follow       |\n| Marketing \u002F promo | `af_sky`\u002F`am_michael` | Energetic or authoritative    |\n| Documentation     | `bf_emma`\u002F`bm_george` | Clear British English, formal |\n| Casual \u002F social   | `af_heart`\u002F`af_sky`   | Approachable, natural         |\n\n### Multilingual\n\nVoice IDs encode language in the first letter: `a`=American English, `b`=British English, `e`=Spanish, `f`=French, `h`=Hindi, `i`=Italian, `j`=Japanese, `p`=Brazilian Portuguese, `z`=Mandarin. The CLI auto-detects the phonemizer locale from the prefix — no `--lang` needed when the voice matches the text.\n\n```bash\nnpx hyperframes tts \"La reunión empieza a las nueve\" --voice ef_dora --output es.wav\nnpx hyperframes tts \"今日はいい天気ですね\" --voice jf_alpha --output ja.wav\n```\n\nUse `--lang` only to override auto-detection (stylized accents). Valid codes: `en-us`, `en-gb`, `es`, `fr-fr`, `hi`, `it`, `pt-br`, `ja`, `zh`. Non-English phonemization requires `espeak-ng` system-wide (`brew install espeak-ng` \u002F `apt-get install espeak-ng`).\n\n### Speed\n\n- `0.7-0.8` — tutorial, complex content, accessibility\n- `1.0` — natural pace (default)\n- `1.1-1.2` — intros, transitions, upbeat content\n- `1.5+` — rarely appropriate; test carefully\n\n### Long Scripts\n\nFor more than a few paragraphs, write to a `.txt` file and pass the path. Inputs over ~5 minutes of speech may benefit from splitting into segments.\n\n### Requirements\n\nPython 3.8+ with `kokoro-onnx` and `soundfile` (`pip install kokoro-onnx soundfile`). Model downloads on first use (~311 MB + ~27 MB voices, cached in `~\u002F.cache\u002Fhyperframes\u002Ftts\u002F`).\n\n## Transcription (`transcribe`)\n\nProduce a normalized `transcript.json` with word-level timestamps.\n\n```bash\nnpx hyperframes transcribe audio.mp3\nnpx hyperframes transcribe video.mp4 --model small --language es\nnpx hyperframes transcribe subtitles.srt          # import existing\nnpx hyperframes transcribe subtitles.vtt\nnpx hyperframes transcribe openai-response.json\n```\n\n### Language Rule (Non-Negotiable)\n\n**Never use `.en` models unless the user explicitly states the audio is English.** `.en` models (`small.en`, `medium.en`) **translate** non-English audio into English instead of transcribing it. This silently destroys the original language.\n\n1. Language known and non-English → `--model small --language \u003Ccode>` (no `.en` suffix)\n2. Language known and English → `--model small.en`\n3. Language unknown → `--model small` (no `.en`, no `--language`) — whisper auto-detects\n\n**Default model is `small`, not `small.en`.**\n\n### Model Sizes\n\n| Model      | Size   | Speed    | When to use                           |\n| ---------- | ------ | -------- | ------------------------------------- |\n| `tiny`     | 75 MB  | Fastest  | Quick previews, testing pipeline      |\n| `base`     | 142 MB | Fast     | Short clips, clear audio              |\n| `small`    | 466 MB | Moderate | **Default** — most content            |\n| `medium`   | 1.5 GB | Slow     | Important content, noisy audio, music |\n| `large-v3` | 3.1 GB | Slowest  | Production quality                    |\n\nMusic with vocals: start at `medium` minimum; produced tracks often need manual SRT\u002FVTT import. For caption-quality checks (mandatory after every transcription), the cleaning JS, retry rules, and the OpenAI\u002FGroq API import path, see [hyperframes\u002Freferences\u002Ftranscript-guide.md](..\u002Fhyperframes\u002Freferences\u002Ftranscript-guide.md).\n\n### Output Shape\n\nCompositions consume a flat array of word objects. The `id` field (`w0`, `w1`, ...) is added during normalization for stable references in caption overrides; it's optional for backwards compatibility.\n\n```json\n[\n  { \"id\": \"w0\", \"text\": \"Hello\", \"start\": 0.0, \"end\": 0.5 },\n  { \"id\": \"w1\", \"text\": \"world.\", \"start\": 0.6, \"end\": 1.2 }\n]\n```\n\n## Background Removal (`remove-background`)\n\nRemove the background from a video or image so the subject (typically a person — avatar, presenter, talking head) sits as a transparent overlay in a composition.\n\n```bash\nnpx hyperframes remove-background subject.mp4 -o transparent.webm  # default: VP9 alpha WebM\nnpx hyperframes remove-background subject.mp4 -o transparent.mov   # ProRes 4444 (editing)\nnpx hyperframes remove-background portrait.jpg -o cutout.png       # single-image cutout\nnpx hyperframes remove-background subject.mp4 -o subject.webm \\\n  --background-output plate.webm                                   # both layers in one pass\nnpx hyperframes remove-background subject.mp4 -o transparent.webm --device cpu\nnpx hyperframes remove-background --info                           # detected providers\n```\n\nUses `u2net_human_seg` (MIT). First run downloads ~168 MB of weights to `~\u002F.cache\u002Fhyperframes\u002Fbackground-removal\u002Fmodels\u002F`.\n\n### Layer separation (`--background-output`)\n\nPass `--background-output` (or `-b`) to emit a **second** transparent video alongside the cutout: same source RGB, alpha is `255 − mask` instead of `mask`. The cutout is the subject with a transparent background; the plate is the original surroundings with a transparent hole where the subject was.\n\n| File                             | Alpha is…                                                 | Use it for                                                      |\n| -------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------- |\n| `-o subject.webm`                | The mask — subject opaque, background transparent         | Foreground layer, place on top                                  |\n| `--background-output plate.webm` | Inverse — surroundings opaque, subject region transparent | Bottom layer; put text or graphics between this and the subject |\n\nBoth outputs share the same `--quality` preset and run from a single inference pass — encode cost roughly doubles, segmentation cost stays the same. Only valid for video inputs and `.webm`\u002F`.mov` outputs.\n\n**Hole-cut plate, not an inpainted clean plate.** The subject region in `plate.webm` is fully transparent — composite something opaque under it to fill the hole. The single test for whether `--background-output` is the right tool: _will anything ever be visible through the subject's silhouette where the subject used to be?_\n\n| Use case                                                                            | Right tool                                                                         |\n| ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| Text\u002Fgraphics between the cutout and the plate (this command's reason for existing) | **Hole-cut** (`--background-output`)                                               |\n| Subject onto an unrelated scene                                                     | Just `subject.webm`; ignore the plate                                              |\n| Show the room _without_ the person, alone over no other content                     | **Clean plate** — needs an inpainter (LaMa, ProPainter, E2FGVI). Not this command. |\n| Replace the subject with a different subject                                        | **Clean plate** — same as above                                                    |\n\nIf a user asks for \"the room with the person removed\" and intends to display it standalone, do **not** reach for `--background-output`. Tell them they need an inpainter.\n\nTypical layered composition (the canonical hole-cut use case):\n\n```html\n\u003C!-- z=1 the inverse-alpha plate fills everything except the subject region -->\n\u003Cvideo\n  src=\"plate.webm\"\n  data-start=\"0\"\n  data-duration=\"6\"\n  data-track-index=\"0\"\n  muted\n  playsinline\n>\u003C\u002Fvideo>\n\n\u003C!-- z=2 graphics \u002F text live between the two layers -->\n\u003Ch1 id=\"headline\" style=\"z-index:2; ...\">MAKE IT IN HYPERFRAMES\u003C\u002Fh1>\n\n\u003C!-- z=3 the cutout floats the subject back over the headline -->\n\u003Cdiv class=\"cutout-wrap\" style=\"position:absolute;inset:0;z-index:3\">\n  \u003Cvideo\n    src=\"subject.webm\"\n    data-start=\"0\"\n    data-duration=\"6\"\n    data-track-index=\"1\"\n    muted\n    playsinline\n  >\u003C\u002Fvideo>\n\u003C\u002Fdiv>\n```\n\nThis is functionally equivalent to the text-behind-subject pattern below, but you don't need the original `presenter.mp4` in the project — the plate replaces it. Useful when you want to ship just the two transparent layers and let the user drop arbitrary content between them.\n\n### Output Format\n\n| Format                | When                                                          |\n| --------------------- | ------------------------------------------------------------- |\n| `.webm` (VP9 + alpha) | Default. Compositions play this directly via `\u003Cvideo>`.       |\n| `.mov` (ProRes 4444)  | Editing in DaVinci\u002FPremiere\u002FFCP. Large files.                 |\n| `.png`                | Single-image cutout (still subject, layered over a backdrop). |\n\nChrome decodes VP9 alpha natively, so the `.webm` plugs into a composition like any other muted-autoplay video — see the `hyperframes` skill for the `\u003Cvideo>` track conventions.\n\n### Quality presets\n\n`--quality fast|balanced|best` controls only the VP9 encoder's CRF — segmentation quality is fixed.\n\n| Preset     | CRF | When                                                  |\n| ---------- | --- | ----------------------------------------------------- |\n| `fast`     | 30  | Iterating, smaller file, looser color match           |\n| `balanced` | 18  | Default. Visually identical for most uses             |\n| `best`     | 12  | Master \u002F final delivery. Largest file, tightest match |\n\n### Compositing patterns — pick the right one\n\nThe cutout webm is a **re-encoded copy** of the source mp4's RGB. That choice has consequences depending on what you put behind it:\n\n| Pattern                                                  | What's behind the cutout                   | Result                                                                                                                                                                                                                            |\n| -------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Cutout over a different scene** (most common)          | Static image, gradient, or unrelated video | Looks great. The cutout's RGB is the only source of the subject — no doubling, no edge halo. This is what `remove-background` is built for.                                                                                       |\n| **Cutout over its own source mp4** (text-behind-subject) | Same mp4 the cutout was generated from     | Two RGB sources for the same person. At default `--quality balanced` (crf 18) the doubling is barely visible; at `--quality fast` (crf 30) you'll see a faint color shift \u002F edge halo. Use `--quality best` (crf 12) for masters. |\n| **Cutout over a _different_ take of the same person**    | Footage of the same subject                | Will look like two separate people overlapping. Don't do this.                                                                                                                                                                    |\n\n**Text-behind-subject** (headline behind a presenter):\n\n```html\n\u003Cvideo\n  src=\"presenter.mp4\"\n  id=\"bg\"\n  data-start=\"0\"\n  data-duration=\"6\"\n  data-track-index=\"0\"\n  muted\n  playsinline\n>\u003C\u002Fvideo>\n\u003Ch1 id=\"headline\" style=\"z-index:2; ...\">MAKE IT IN HYPERFRAMES\u003C\u002Fh1>\n\u003Cdiv class=\"cutout-wrap\" style=\"position:absolute;inset:0;z-index:3;opacity:0\">\n  \u003Cvideo\n    src=\"presenter.webm\"\n    data-start=\"0\"\n    data-duration=\"6\"\n    data-track-index=\"1\"\n    muted\n    playsinline\n  >\u003C\u002Fvideo>\n\u003C\u002Fdiv>\n```\n\nTwo key rules:\n\n1. **Wrap the cutout video in a non-timed `\u003Cdiv>`** and animate the wrapper's opacity, not the video element's. The framework forces opacity:1 on active clips (any element with `data-start`\u002F`data-duration`), so animating the video's opacity directly is silently overridden. The wrapper has no `data-*` attributes, so it's owned by your CSS\u002FGSAP.\n2. **Both videos use `data-start=\"0\"` and `data-media-start=\"0\"`** so the framework decodes them in sync from t=0. Late-mounting the cutout (`data-start=3.3`) introduces a seek + warm-up that lands a frame off the base mp4 — visible as one frame of misalignment at the cut.\n\nThen GSAP-flip the wrapper opacity at the cut: `tl.set(cutoutWrap, { opacity: 1 }, 3.3)`.\n\n## TTS → Transcribe → Captions\n\nWhen there's no pre-recorded voiceover, generate one and transcribe it back to get word-level timestamps for captions:\n\n```bash\nnpx hyperframes tts script.txt --voice af_heart --output narration.wav\nnpx hyperframes transcribe narration.wav   # → transcript.json\n```\n\nWhisper extracts precise word boundaries from the generated audio, so caption timing matches delivery without hand-tuning.\n","# HyperFrames Media Preprocessing\n\nThree CLI commands that produce assets for compositions: `tts` (speech), `transcribe` (timestamps), and `remove-background` (transparent video). Each downloads a model on first run and caches it under `~\u002F.cache\u002Fhyperframes\u002F`. Drop the output into the project, then reference it from the composition HTML — see the `hyperframes` skill for the audio\u002Fvideo element conventions.\n\n## Text-to-Speech (`tts`)\n\nGenerate speech audio locally with Kokoro-82M. No API key.\n\n```bash\nnpx hyperframes tts \"Text here\" --voice af_nova --output narration.wav\nnpx hyperframes tts script.txt --voice bf_emma --output narration.wav\nnpx hyperframes tts --list                       # all 54 voices\n```\n\n### Voice Selection\n\nMatch voice to content. Default is `af_heart`.\n\n| Content type      | Voice                 | Why                           |\n| ----------------- | --------------------- | ----------------------------- |\n| Product demo      | `af_heart`\u002F`af_nova`  | Warm, professional            |\n| Tutorial \u002F how-to | `am_adam`\u002F`bf_emma`   | Neutral, easy to follow       |\n| Marketing \u002F promo | `af_sky`\u002F`am_michael` | Energetic or authoritative    |\n| Documentation     | `bf_emma`\u002F`bm_george` | Clear British English, formal |\n| Casual \u002F social   | `af_heart`\u002F`af_sky`   | Approachable, natural         |\n\n### Multilingual\n\nVoice IDs encode language in the first letter: `a`=American English, `b`=British English, `e`=Spanish, `f`=French, `h`=Hindi, `i`=Italian, `j`=Japanese, `p`=Brazilian Portuguese, `z`=Mandarin. The CLI auto-detects the phonemizer locale from the prefix — no `--lang` needed when the voice matches the text.\n\n```bash\nnpx hyperframes tts \"La reunión empieza a las nueve\" --voice ef_dora --output es.wav\nnpx hyperframes tts \"今日はいい天気ですね\" --voice jf_alpha --output ja.wav\n```\n\nUse `--lang` only to override auto-detection (stylized accents). Valid codes: `en-us`, `en-gb`, `es`, `fr-fr`, `hi`, `it`, `pt-br`, `ja`, `zh`. Non-English phonemization requires `espeak-ng` system-wide (`brew install espeak-ng` \u002F `apt-get install espeak-ng`).\n\n### Speed\n\n- `0.7-0.8` — tutorial, complex content, accessibility\n- `1.0` — natural pace (default)\n- `1.1-1.2` — intros, transitions, upbeat content\n- `1.5+` — rarely appropriate; test carefully\n\n### Long Scripts\n\nFor more than a few paragraphs, write to a `.txt` file and pass the path. Inputs over ~5 minutes of speech may benefit from splitting into segments.\n\n### Requirements\n\nPython 3.8+ with `kokoro-onnx` and `soundfile` (`pip install kokoro-onnx soundfile`). Model downloads on first use (~311 MB + ~27 MB voices, cached in `~\u002F.cache\u002Fhyperframes\u002Ftts\u002F`).\n\n## Transcription (`transcribe`)\n\nProduce a normalized `transcript.json` with word-level timestamps.\n\n```bash\nnpx hyperframes transcribe audio.mp3\nnpx hyperframes transcribe video.mp4 --model small --language es\nnpx hyperframes transcribe subtitles.srt          # import existing\nnpx hyperframes transcribe subtitles.vtt\nnpx hyperframes transcribe openai-response.json\n```\n\n### Language Rule (Non-Negotiable)\n\n**Never use `.en` models unless the user explicitly states the audio is English.** `.en` models (`small.en`, `medium.en`) **translate** non-English audio into English instead of transcribing it. This silently destroys the original language.\n\n1. Language known and non-English → `--model small --language \u003Ccode>` (no `.en` suffix)\n2. Language known and English → `--model small.en`\n3. Language unknown → `--model small` (no `.en`, no `--language`) — whisper auto-detects\n\n**Default model is `small`, not `small.en`.**\n\n### Model Sizes\n\n| Model      | Size   | Speed    | When to use                           |\n| ---------- | ------ | -------- | ------------------------------------- |\n| `tiny`     | 75 MB  | Fastest  | Quick previews, testing pipeline      |\n| `base`     | 142 MB | Fast     | Short clips, clear audio              |\n| `small`    | 466 MB | Moderate | **Default** — most content            |\n| `medium`   | 1.5 GB | Slow     | Important content, noisy audio, music |\n| `large-v3` | 3.1 GB | Slowest  | Production quality                    |\n\nMusic with vocals: start at `medium` minimum; produced tracks often need manual SRT\u002FVTT import. For caption-quality checks (mandatory after every transcription), the cleaning JS, retry rules, and the OpenAI\u002FGroq API import path, see [hyperframes\u002Freferences\u002Ftranscript-guide.md](..\u002Fhyperframes\u002Freferences\u002Ftranscript-guide.md).\n\n### Output Shape\n\nCompositions consume a flat array of word objects. The `id` field (`w0`, `w1`, ...) is added during normalization for stable references in caption overrides; it's optional for backwards compatibility.\n\n```json\n[\n  { \"id\": \"w0\", \"text\": \"Hello\", \"start\": 0.0, \"end\": 0.5 },\n  { \"id\": \"w1\", \"text\": \"world.\", \"start\": 0.6, \"end\": 1.2 }\n]\n```\n\n## Background Removal (`remove-background`)\n\nRemove the background from a video or image so the subject (typically a person — avatar, presenter, talking head) sits as a transparent overlay in a composition.\n\n```bash\nnpx hyperframes remove-background subject.mp4 -o transparent.webm  # default: VP9 alpha WebM\nnpx hyperframes remove-background subject.mp4 -o transparent.mov   # ProRes 4444 (editing)\nnpx hyperframes remove-background portrait.jpg -o cutout.png       # single-image cutout\nnpx hyperframes remove-background subject.mp4 -o subject.webm \\\n  --background-output plate.webm                                   # both layers in one pass\nnpx hyperframes remove-background subject.mp4 -o transparent.webm --device cpu\nnpx hyperframes remove-background --info                           # detected providers\n```\n\nUses `u2net_human_seg` (MIT). First run downloads ~168 MB of weights to `~\u002F.cache\u002Fhyperframes\u002Fbackground-removal\u002Fmodels\u002F`.\n\n### Layer separation (`--background-output`)\n\nPass `--background-output` (or `-b`) to emit a **second** transparent video alongside the cutout: same source RGB, alpha is `255 − mask` instead of `mask`. The cutout is the subject with a transparent background; the plate is the original surroundings with a transparent hole where the subject was.\n\n| File                             | Alpha is…                                                 | Use it for                                                      |\n| -------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------- |\n| `-o subject.webm`                | The mask — subject opaque, background transparent         | Foreground layer, place on top                                  |\n| `--background-output plate.webm` | Inverse — surroundings opaque, subject region transparent | Bottom layer; put text or graphics between this and the subject |\n\nBoth outputs share the same `--quality` preset and run from a single inference pass — encode cost roughly doubles, segmentation cost stays the same. Only valid for video inputs and `.webm`\u002F`.mov` outputs.\n\n**Hole-cut plate, not an inpainted clean plate.** The subject region in `plate.webm` is fully transparent — composite something opaque under it to fill the hole. The single test for whether `--background-output` is the right tool: _will anything ever be visible through the subject's silhouette where the subject used to be?_\n\n| Use case                                                                            | Right tool                                                                         |\n| ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| Text\u002Fgraphics between the cutout and the plate (this command's reason for existing) | **Hole-cut** (`--background-output`)                                               |\n| Subject onto an unrelated scene                                                     | Just `subject.webm`; ignore the plate                                              |\n| Show the room _without_ the person, alone over no other content                     | **Clean plate** — needs an inpainter (LaMa, ProPainter, E2FGVI). Not this command. |\n| Replace the subject with a different subject                                        | **Clean plate** — same as above                                                    |\n\nIf a user asks for \"the room with the person removed\" and intends to display it standalone, do **not** reach for `--background-output`. Tell them they need an inpainter.\n\nTypical layered composition (the canonical hole-cut use case):\n\n```html\n\u003C!-- z=1 the inverse-alpha plate fills everything except the subject region -->\n\u003Cvideo\n  src=\"plate.webm\"\n  data-start=\"0\"\n  data-duration=\"6\"\n  data-track-index=\"0\"\n  muted\n  playsinline\n>\u003C\u002Fvideo>\n\n\u003C!-- z=2 graphics \u002F text live between the two layers -->\n\u003Ch1 id=\"headline\" style=\"z-index:2; ...\">MAKE IT IN HYPERFRAMES\u003C\u002Fh1>\n\n\u003C!-- z=3 the cutout floats the subject back over the headline -->\n\u003Cdiv class=\"cutout-wrap\" style=\"position:absolute;inset:0;z-index:3\">\n  \u003Cvideo\n    src=\"subject.webm\"\n    data-start=\"0\"\n    data-duration=\"6\"\n    data-track-index=\"1\"\n    muted\n    playsinline\n  >\u003C\u002Fvideo>\n\u003C\u002Fdiv>\n```\n\nThis is functionally equivalent to the text-behind-subject pattern below, but you don't need the original `presenter.mp4` in the project — the plate replaces it. Useful when you want to ship just the two transparent layers and let the user drop arbitrary content between them.\n\n### Output Format\n\n| Format                | When                                                          |\n| --------------------- | ------------------------------------------------------------- |\n| `.webm` (VP9 + alpha) | Default. Compositions play this directly via `\u003Cvideo>`.       |\n| `.mov` (ProRes 4444)  | Editing in DaVinci\u002FPremiere\u002FFCP. Large files.                 |\n| `.png`                | Single-image cutout (still subject, layered over a backdrop). |\n\nChrome decodes VP9 alpha natively, so the `.webm` plugs into a composition like any other muted-autoplay video — see the `hyperframes` skill for the `\u003Cvideo>` track conventions.\n\n### Quality presets\n\n`--quality fast|balanced|best` controls only the VP9 encoder's CRF — segmentation quality is fixed.\n\n| Preset     | CRF | When                                                  |\n| ---------- | --- | ----------------------------------------------------- |\n| `fast`     | 30  | Iterating, smaller file, looser color match           |\n| `balanced` | 18  | Default. Visually identical for most uses             |\n| `best`     | 12  | Master \u002F final delivery. Largest file, tightest match |\n\n### Compositing patterns — pick the right one\n\nThe cutout webm is a **re-encoded copy** of the source mp4's RGB. That choice has consequences depending on what you put behind it:\n\n| Pattern                                                  | What's behind the cutout                   | Result                                                                                                                                                                                                                            |\n| -------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **Cutout over a different scene** (most common)          | Static image, gradient, or unrelated video | Looks great. The cutout's RGB is the only source of the subject — no doubling, no edge halo. This is what `remove-background` is built for.                                                                                       |\n| **Cutout over its own source mp4** (text-behind-subject) | Same mp4 the cutout was generated from     | Two RGB sources for the same person. At default `--quality balanced` (crf 18) the doubling is barely visible; at `--quality fast` (crf 30) you'll see a faint color shift \u002F edge halo. Use `--quality best` (crf 12) for masters. |\n| **Cutout over a _different_ take of the same person**    | Footage of the same subject                | Will look like two separate people overlapping. Don't do this.                                                                                                                                                                    |\n\n**Text-behind-subject** (headline behind a presenter):\n\n```html\n\u003Cvideo\n  src=\"presenter.mp4\"\n  id=\"bg\"\n  data-start=\"0\"\n  data-duration=\"6\"\n  data-track-index=\"0\"\n  muted\n  playsinline\n>\u003C\u002Fvideo>\n\u003Ch1 id=\"headline\" style=\"z-index:2; ...\">MAKE IT IN HYPERFRAMES\u003C\u002Fh1>\n\u003Cdiv class=\"cutout-wrap\" style=\"position:absolute;inset:0;z-index:3;opacity:0\">\n  \u003Cvideo\n    src=\"presenter.webm\"\n    data-start=\"0\"\n    data-duration=\"6\"\n    data-track-index=\"1\"\n    muted\n    playsinline\n  >\u003C\u002Fvideo>\n\u003C\u002Fdiv>\n```\n\nTwo key rules:\n\n1. **Wrap the cutout video in a non-timed `\u003Cdiv>`** and animate the wrapper's opacity, not the video element's. The framework forces opacity:1 on active clips (any element with `data-start`\u002F`data-duration`), so animating the video's opacity directly is silently overridden. The wrapper has no `data-*` attributes, so it's owned by your CSS\u002FGSAP.\n2. **Both videos use `data-start=\"0\"` and `data-media-start=\"0\"`** so the framework decodes them in sync from t=0. Late-mounting the cutout (`data-start=3.3`) introduces a seek + warm-up that lands a frame off the base mp4 — visible as one frame of misalignment at the cut.\n\nThen GSAP-flip the wrapper opacity at the cut: `tl.set(cutoutWrap, { opacity: 1 }, 3.3)`.\n\n## TTS → Transcribe → Captions\n\nWhen there's no pre-recorded voiceover, generate one and transcribe it back to get word-level timestamps for captions:\n\n```bash\nnpx hyperframes tts script.txt --voice af_heart --output narration.wav\nnpx hyperframes transcribe narration.wav   # → transcript.json\n```\n\nWhisper extracts precise word boundaries from the generated audio, so caption timing matches delivery without hand-tuning.\n",{"name":5,"description":7},"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002Fhyperframes-hyperframes-media",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":60,"prompt":70,"zipAvailable":71},[61,64,67],{"tool":62,"command":63},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill hyperframes-media",{"tool":65,"command":66},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill hyperframes-media",{"tool":68,"command":69},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill hyperframes-media","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fhyperframes-hyperframes-media\u002FSKILL.md",true,[],[74,91,124,149,171,191],{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":83,"publishedAt":44},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[80],{"categoryNo":81,"categoryName":82,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",[84,85,86,87,88,89,90],"methodology","xiaolai","xiaolai methodology","朋友","投资","writing","收入",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":105,"publishedAt":44},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[97,100],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[93,106,107,108,109,110,111,112,30,113,114,115,116,117,118,119,120,121,122,123],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","generate","intent","cli","map","documentation","project wiki","disk","architecture","code","unknown","generated",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":134,"publishedAt":44},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[130,131],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":132,"categoryName":133,"taxonomyType":103,"taxonomyTypeDesc":104},"01JBSEEDCAT000000000000036","内容创作者",[126,135,136,137,138,139,140,141,113,142,143,144,37,145,146,147,43,148],"user","content","视频","creator","generate video","videos","launch","video content","create","upload","use","auto","types","创作",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":156,"publishedAt":44},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[155],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},[157,158,126,159,160,43,161,162,163,164,165,166,167,168,112,169,37,145,106,170],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":172,"name":173,"nameZh":6,"description":174,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":175,"categories":176,"keywords":181,"publishedAt":44},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[177,178,179,180],{"categoryNo":81,"categoryName":82,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":101,"categoryName":102,"taxonomyType":103,"taxonomyTypeDesc":104},{"categoryNo":132,"categoryName":133,"taxonomyType":103,"taxonomyTypeDesc":104},[182,89,183,184,185,186,121,37,145,187,188,189,190],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":199,"publishedAt":44},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[197,198],{"categoryNo":81,"categoryName":82,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":132,"categoryName":133,"taxonomyType":103,"taxonomyTypeDesc":104},[200,89,201,110,202,188,37,183,186,145,189],"Rules","writing rules","project rules"]