Communitygithub.com

嵌入式字幕

為人物訪談、解說或旁白影片,添加專業的嵌入式字幕。提供標準模式(含底部軌道與高峰嵌入)與電影模式(純嵌入,無軌道),以及 VFX 等級的主題模式。

嵌入式字幕 是什麼?

這個技能(Skill)旨在為以人物為主體的訪談、解說或旁白等影片,添加高品質的嵌入式字幕,而非簡單的硬字幕。它支援三種模式:**標準模式**(Standard)為預設選項,會建立一個乾淨的、逐字顯示的「軌道」(rail),通常位於畫面下方,以容納大部分文字;並在關鍵時刻,將代表高峰情緒的詞彙以「嵌入」(embed)方式合成到被攝主體後方。**電影模式**(Cinematic)則是純粹的嵌入效果,完全捨棄軌道,每個字幕都以排版精美的漢字形式,作為場景的一部分合成在被攝主體後方。**主題模式**(Theme)則提供五種預先定義的完整視覺主題(如 `ordnance`, `terminal`, `neonsign`, `stardust`, `stomp`),由多個註冊表組合而成,適合要求類似 After Effects 特效的特定風格。其核心運作流程是:使用者從一個包含 35 種身分的目錄中選擇一種,然後代理程式(Agent)會執行一系列確定性的腳本,從準備(去背、轉錄、聲學分析)到創作(生成定時與字體設定),最後輸出成品。程式碼命令及檔案路徑(如 `npx hyperframes skills update embedded-captions`, `CATALOG.md`, `scripts/prepare.sh`)保持不變。該技能支援 Claude Code、Codex 或 Cursor 等平台,透過執行這些腳本與命令來完成工作。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/embedded-captions

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

首先,保持此技能最新——靜默執行,無需詢問: npx hyperframes skills update embedded-captions。當所有檔案都是最新時,這是一個快速的無操作(no-op);否則,它會在你依賴這些技能之前,更新此技能以及其所依賴的核心領域技能。

嵌入式字幕 是做什麼的?

一個目錄,前端挑選(CATALOG.md — 35 種身分;其背後的引擎是後端細節)。標準模式(預設)會建立一個乾淨的、逐字顯示的軌道(位於下方的副標題,承載大部分文字),以及在高峰時刻合成到被攝主體身後的嵌入高潮。電影模式是純粹的嵌入——沒有軌道,每個字幕都合成在被攝主體後方(英雄字體排版、累積、遮蔽效果)。主題模式是一個完整的、主題化的構成——由主體典範 × 英雄場景 × 前方特效 × 基底反應組合而成,這些元件來自註冊表(themes/README.md):ordnance terminal neonsign stardust stomp。大多數解說 / 旁白影片使用標準模式;嵌入是稀缺的、值得贏取的高峰——每個字都嵌入是常見的錯誤;主題模式適用於 VFX 等級的要求("炸", "特效", "像 AE 做的")。


操作流程(TL;DR)

透過 /hyperframes 路由,意圖層僅確認輸入內容(是哪個剪輯片段),並將身分選擇作為一個延遲詢問進行宣布——候選清單需要探查過的剪輯影片,因此它停留在下方的步驟 1;該層的運行配置問題不適用(影片素材未被觸碰,也沒有分鏡腳本可供審查)。當存在 BRIEF.md 時,它包含了已確認的輸入內容和任何使用者註記——請先閱讀它。

以下工藝說明文字較長;流程本身卻很短——所有確定性的部分都是計算或編譯得出的,絕非手寫:

  1. 決策閘門(拒絕不好的剪輯)→ 從 CATALOG.md 中選擇一個身分(35 種身分;引擎/編譯器透過查表得出——絕不呈現模式/類別問題)
  2. hyperframes init(如果專案目錄已存在且包含影片,則跳過——matte.cjs/transcribe.cjs 會將目錄中的任何影片作為 source.mp4 使用)→ bash scripts/prepare.sh <project>(並行執行去背 ∥ 轉錄 ∥ 音頻包絡,然後執行安全區域 v2,並進行場景色盤/光學/照明分析——一個指令,萬無遺漏)
  3. 撰寫一個小的 JSON 創作選擇檔案(先讀取 safe-zones.json):電影模式 → plan.json → fill-timings.cjs → fit-fonts.cjs → make-composition.cjs;主題模式 → theme.json → make-theme.cjs(軌道/面板/詩歌/接管範例;anchor 是平靜軌道的預設值)
  4. 視覺 QA:node scripts/preview-frames.cjs <project> → 約 2 秒/幀的忠實合成預覽(無需渲染)。在支付渲染費用前,請先檢查 § 視覺 QA。
  5. render-and-composite.sh → 閘門(定時 / 遮蔽+英雄 / 溢出 / 交接)→ final.mp4

人們經常遺漏的承載性規則:

  • 軌道(預設)+ 嵌入(提升)。 drop(填充詞,不顯示)/ rail(逐字副標題,位於前景,承載大部分文字)/ embed(一個高峰詞,合成在被攝主體後方)。標準模式兩者都用,僅嵌入高峰詞。請參閱 § 字幕模型。
  • 影片以未觸碰的原始狀態交付(標準模式/電影模式;主題模式的 PLATE 預算是唯一被許可的例外——由註冊表門控的反應節拍(充電-變暗、衝擊、晃動、顆粒),根據每個主題的 DNA 定義,並在去背合成之後應用,使得主體+文字+基底作為一個畫框移動)——只添加字幕;去背僅讓主體遮蔽嵌入軌道。切勿對影片進行調色/重新著色/掃描線。
  • 兩本規則手冊:軌道 → references/rail.md(簡短),嵌入創作 → references/composition-craft.md(豐富,僅限嵌入)。按需瀏覽。

字幕模型 — 軌道 + 嵌入

每個口語短語都是以下三種事物之一:

什麼如何顯示
drop填充詞——嗯/呃、口吃、自我修正不顯示
rail預設——普通的說話內容(逐字)乾淨的畫面下方副標題,位於前景,可讀。一個強調詞可以獲得行內 emphasis 高亮(強調色 / 活動詞彈出)——它仍然留在軌道上。
embed一個被提升的高峰——主要的亮點節拍一個大詞,合成在被攝主體後方(去遮蔽效果),設計了入場和出場

軌道承載大部分文字;嵌入是稀缺的、值得贏取的高峰。 稀缺性是按節拍/區塊計算,而非按剪輯:每個區塊(思想)最多一個英雄詞,永遠不要兩個同時可見,英雄視窗之間至少間隔一個節拍(編譯器會在少於 0.6 秒時發出警告)。一個短片 → 通常 1-2 個;一個長篇解說 → 大約每個章節一個。在多個英雄詞中,撰寫的最大一個是 APEX(它獨自獲得完整的鎖定嵌入 + 寬度適配提升);較小的則是次要高峰,它們在其列中作為超大的強調行(前景,阻尼運動)——並非每個節拍都需要去背展示,這正保持了 apex 作為一個事件。將每個詞都嵌入仍然是常見的錯誤。

軌道表面身分正是建立這樣的結構(軌道 = rail.html,嵌入 = index.html 中的高潮)。欄位流動身分則捨棄軌道,使所有內容都採用嵌入風格——僅在強調氛圍勝於逐字可讀性的要求下推薦使用,永遠不要用於解說 / 旁白(其中文字必須能被閱讀)(CATALOG.md 針對每個身分編碼了這項資訊)。


步驟 0 — 從目錄中選擇一個身分

一個前端,三個後端引擎。 使用者從 CATALOG.md 中選擇一個身分(35 條目:10 經典 + 25 主題);引擎、編譯器和創作檔案透過目錄行查詢得出。切勿將「標準模式 vs 電影模式 vs 主題模式」作為一個問題提出——這些是後端名稱(一個產品儘管有多個引擎,但只有一個使用者體驗)。目錄編碼了路由所需的一切:閱讀表面、語氣、推薦場景、場景需求、以及真正相近配對的相鄰註記(loud↔ordnance, neon↔neonsign, cream↔stardust)。

身分選擇是一個偏好閘門(../hyperframes-core/references/brief-contract.md § 1):在自主模式中("給個驚喜" / "你幫我決定"),由你自行從候選清單中挑選,並陳述一句話的原因,無需詢問。

流程:探查剪輯 → 從目錄中挑選 2-3 個身分作為候選 → 推薦一個並附上一句原因 → 使用者選擇(自主模式:你選擇,陳述原因) → 撰寫該身分的檔案。身分與引擎綁定(無跨組合;開啟一個是一個驗證事件——請參閱 dna/README.md)。

在撰寫之前,始終提出你的推薦並讓使用者選擇。 請勿靜默地使用預設值。

(完整的身分表位於 CATALOG.md 中——這是路由的單一事實來源。下面的引擎文件描述了每個後端的創作合約。)

推薦啟發法:使用 CATALOG.md 中的「候選清單啟發法」——它們是身分層級的(例如「炸」會將 ordnance/stomp/terminal/loud 列入候選,並根據應該爆炸的_內容_來選擇),絕非類別層級。不確定時 → anchor。

  • 電影模式 → 為鎖定的模板撰寫 plan.json,由 make-composition.cjs 編譯。
  • 主題模式 → 閱讀 themes/README.md,撰寫 theme.json,執行 scripts/render-theme.sh(編譯 + 渲染 + 基底反應 → final_fx.mp4)。

決策閘門 — 首先執行

在選擇模式之前,先探查影片並對場景進行分類。

ffprobe <video.mp4>                    # 規格
ffmpeg -ss <t> -i <video.mp4> -vframes 1 sample.png   # 在 20/50/80% 處

讀取樣本。在以下情況拒絕:

  • 多位說話者 / 硬剪輯(分別分割並渲染每個鏡頭,或拒絕)
  • 沒有人類主體(此技能是為人物談話設計的)
  • 少於 3 秒,沒有說話聲,或臉部從未清晰可見——transcribe.cjs 會在音頻接近無聲時發出警告(Whisper 會在靜音上幻覺出像 "Thank you." 這樣的詞語);注意警告並拒絕,而不是為虛構的詞語添加字幕
  • 來源影片已存在燒錄字幕 / 隱藏字幕 / 大量文字圖形——添加第二個字幕系統會產生衝突,且影片素材以原始狀態交付(無覆蓋/修補)。燒錄的文字通常只在片段中間出現:抽樣一個 1fps 的縮略圖索引(ffmpeg -i in.mp4 -vf "fps=1,scale=160:-1,tile=10x5" sheet.png),不要相信 3 個抽樣圖框。
  • 轉錄文字是垃圾——非母語/帶有濃重口音的語音可能會被轉錄成自信的亂碼。在創作之前,先進行理智檢查 transcript.json;如果它無法被解析為語言,請嘗試一次 WHISPER_MODEL=medium,否則拒絕(一個由虛構詞語組成的逐字軌道比沒有字幕更糟)。
  • 手持攝影、晃動劇烈、有快速運動(去背會閃爍)

預飛探查(無成本,防止最嚴重的失敗)

  1. 鏡頭剪輯探查。 在 20%, 50%, 80% 處抽樣圖框。如果出現不同的主體/場景,在剪輯前修剪片段。
  2. 信箱 / 柱箱模式探查。 第一幀是否有黑邊?計算安全內容矩形,並將字幕放置限制在其中。
  3. 亮度探查。 抽樣字幕區域的平均亮度——低於 60 → 淺色文字可直接閱讀,60-180 → 添加字形遮罩,180+ → 不透明文字 + 遮罩(絕不只用淺色文字)。電影模式模板是固定的 cream+screen——使用此探查來_選擇一個合適的身分_(明亮場景 → ink,或使用不透明軌道的 anchor 主題),絕非重新為某個身分著色。
  4. 依語調的身分推薦(你推薦;使用者選擇——請參閱步驟 0 + CATALOG.md)。 解說 / 採訪 / 必須閱讀的文字 → 軌道/面板表面身分;詩意 / 社群 / 「電影感」 → 按語域選擇欄位流動身分;「炸 / 特效 / VFX」 / 具名世界 → 主題身分。不確定時 → anchor(文字可讀,場景安全)——但提出一個候選清單並讓使用者選擇。

流程 — 5 個步驟

1. hyperframes init <project> --non-interactive --video <video.mp4> --skill=embedded-captions
2. bash scripts/prepare.sh <project>       # 並行去背 ∥ 轉錄 → 安全區域。一個指令。
                                           #   → frames_fg/ transcript.json safe-zones.json
3. [代理步驟 — 唯一創作步驟] 撰寫一個小的 JSON;依模式見下方
   電影模式:撰寫 plan.json → node scripts/fill-timings.cjs → fit-fonts.cjs → make-composition.cjs
   主題模式:撰寫 theme.json → bash scripts/render-theme.sh <project>   (編譯 + 渲染 + 基底特效)
4. node scripts/preview-frames.cjs <project>   # ~2秒/幀 合成預覽 → § 視覺 QA(在渲染之前)
5. bash scripts/render-and-composite.sh <project>  # 閘門 → final.mp4 + history/ 快照
   (主題模式:跳過步驟 3b/5 — render-theme.sh 已執行編譯 + render-and-composite
    + _postfx.sh;交付物是 final_fx.mp4,final.mp4 是未添加基底反應之前的版本)

步驟 1 的 init 會檢查已安裝的技能與 GitHub 上最新的版本,如果任何技能過時,則更新全域集合。

步驟 3 因模式而異:

步驟 3 — 電影模式(純嵌入)

  1. 首先讀取 safe-zones.json。 敘述平面放置在 zones.hugLeft/hugRight——緊貼人物剪影的乾淨條帶(遠離身體的文字看起來像是浮動的,而非嵌入;遠角是備用方案,非預設值)。英雄詞預設使用 heroAnchor/heroBands.best(以主體為中心,約 30–55% 被遮蔽)。recommendation:"fg" 將敘述移到前景以提高可讀性;只要 heroBands.feasible,英雄詞就保持嵌入狀態——英雄詞置於前景是最後的手段。
  2. DNA 就是你在步驟 0 選擇的身分(CATALOG.md)——請勿在此處重新開啟選擇。根據場景對其進行理智檢查(明亮的英雄頻帶亮度 > 150 需要 ink;完整的選擇指南位於目錄中,涵蓋所有十個身分,包括 neon / glitch / chrome / velocity)。陳述你的選擇 + 原因;使用者決定。DNA 鎖定了類型/色盤/混合/運動 + 英雄三幕;safe-zones v2(palette/optics/lighting)會自動根據_此_場景進行參數化。
  3. 撰寫 <project>/cinematic.json —— "dna": "<name>" + 思想區塊,而不是原始分組:每個區塊 = 單詞行(按子句邊界分組 2-5 個) + 其堆疊的平面 + 每行的 css(僅限大小/粗細/樣式——無位置) + 最多一行標記為 "hero": true(被提升的詞;"text" 用於顯示形式)。架構:scripts/make-cinematic.cjs 的標頭。
  4. 編譯:node scripts/make-cinematic.cjs <project> —— 降階區塊 → plan.json → index.html。為你生成:按轉錄文字排序的定時、區塊內累積、區塊間翻頁、英雄詞鎖定(一個英雄區塊的前文脈絡、英雄詞和後文脈絡堆疊成一個單一的、以主體為中心的鍵合組合——閱讀順序由上到下 = 建構時的說話順序;前文脈絡浮在前景,而英雄詞則嵌在後方 = 深度夾層;一個質量規則確保英雄詞主導其文脈絡)、apex/次要英雄詞分割、按建構順序閱讀、依 safe-zones 的前景備用方案。然後照常執行閘門。(直接手寫 plan.json 對於區塊無法表達的設計仍然可行——然後自行執行 fill-timings.cjs + fit-fonts.cjs + make-composition.cjs。)

步驟 3 — 主題模式(主題化構成)

首先閱讀 themes/README.md——典範/場景註冊表、連結、硬性規則,以及確切的 theme.json 架構。

  1. 依內容註冊表選擇一個主題 DNA(每個 themes/<name>.json 都有 voice + when)。陳述你的選擇 + 原因;使用者決定。
  2. 撰寫 <project>/theme.json —— dna, lines(逐字,按轉錄順序;1

…

[為翻譯而截斷]

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

相關技能