Communitygithub.com

heygen-com/hyperframes

將現有的談話性頭像、訪談或Podcast影片,與按時間設計的圖形疊加卡(動態標題、下方三分之一處、數據提示、引言、側邊面板、子母畫面)打包,並與逐字稿同步,支援16:9、9:16、4:5等畫布,原始影片保持不變播放。

hyperframes 是什麼?

HyperFrames 的 Talking Head Recut 技能是一個強大的 AI 代理工具,能將現有影片與設計精美的圖形疊加卡動態同步。它透過分析逐字稿時間軸,自動在影片上方添加標題、數據提示、引言、子母畫面等元件,且不影響原始影片播放。此技能完全在本地運行,使用 Whisper 進行語音辨識,無需第三方 API 或金鑰。支援多種畫布比例(如 16:9、9:16、4:5),並提供靈活的卡片設計機制(透過 HTML 和 GSAP 動畫)。輸出的組合可透過 hyperframes CLI 渲染為 MP4 檔案。它與僅顯示純字幕的 embedded-captions 技能互補,專注於圖形化包裝。

相容平台~Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/talking-head-recut

在你喜歡的 AI 中提問

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

說明文件

外掛安裝: 在執行設定或更新命令之前,若此技能位於 HyperFrames 外掛內,請遵循外掛執行規則。獨立安裝則保留下方更新說明。

首先,保持此技能最新 — 在使用前先向使用者確認並執行: npx hyperframes skills update talking-head-recut。如果所有內容都是最新的,這會是一個快速的空操作;否則它會重新整理此技能及其依賴的核心領域技能,然後再使用它們。

談話性頭像重剪

Talking Head Recut 會將本地影片完整播放,並在其上層疊一系列按時間設計的圖形卡片 — 標題、下方三分之一處、數據提示、引言、側邊面板、子母畫面 — 並與說話內容同步。代理會設計卡片(時間 + 內容),並在對話中直接撰寫每張卡片的 HTML,然後組合成一個組合 HTML,並透過 hyperframes 渲染為 MP4。沒有固定的原型列表,也沒有規定的卡片結構 — 疊加內容完全來自逐字稿的實際內容。

入口是 /hyperframes。 此技能將現有的談話性頭像片段與設計好的圖形卡片(標題、下方三分之一處、數據提示、引言、側邊面板、PiP)打包 — 不是純字幕(口語文字作為文字)。片段保持不變播放。 任何其他意圖 — 純字幕、獨立圖形、從頭建立影片 — 或不確定時 → 請先閱讀 /hyperframes:意圖層負責所有路由決策。

embedded-captions 的圖形包裝兄弟技能。 字幕是將口語文字加為可讀字幕;這是在播放的影片上添加設計好的圖形。純字幕 → embedded-captions。從頭建立影片 → 創作工作流程(product-launch-video / faceless-explainer / …)。

透過 /hyperframes 路由後,意圖層僅確認輸入(哪個片段)並宣布渲染策略問題為延後詢問 — 長寬比、佈局、風格組和卡片數量保留在第 7 步,由探查過的素材和逐字稿提供建議;該層的執行形狀問題不適用。當存在 BRIEF.md 時,它會攜帶已確認的輸入和使用者備註 — 請優先閱讀它。

工作目錄中可檢查的中間檔案:

  • metadata.json — 時長 / 寬度 / 高度 / fps
  • audio.mp3 — 提取的音訊
  • transcript.json — 一個扁平的單字陣列 [{ text, start, end }, …](Whisper;沒有 segments,沒有 words 包裝)
  • storyboard.json — 輕量級卡片大綱(代理的計劃)
  • public/cards/card-XX.html — 每張卡片的 HTML 片段
  • public/index.html — 最終組合的組合
  • output.mp4 — 渲染的影片

CLI 解析

# hyperframes — 語音辨識(本地 Whisper)+ 將組合 HTML 渲染為 MP4
npx hyperframes --help

此技能完全在 hyperframes CLI 加上系統 ffmpeg / ffprobe 上執行。語音辨識是本地 Whisper,透過 hyperframes transcribe — 無需第三方服務、API 金鑰或速率限制代理。

工作流程

1. 檢查環境

npx hyperframes doctor          # ffmpeg, headless browser, render deps
# 確認捆綁的資產:
ls "<SKILL_DIR>/assets/fonts" "<SKILL_DIR>/assets/vendor/gsap.min.js"

所需項目:

  • ffmpeg / ffprobe(系統)
  • <SKILL_DIR>/assets/fonts/*.woff2、<SKILL_DIR>/assets/vendor/gsap.min.js(捆綁在此技能內,在第 9 步中推送到工作目錄)

語音辨識不需要金鑰 — hyperframes transcribe 在本地執行 Whisper(第 4 步)。

在 macOS 上強烈建議用於 hyperframes render:

export PRODUCER_BROWSER_GPU_MODE=hardware

2. 建立工作目錄

所有產出檔案都放在 videos/<project-name>/ 下 — 與其他影片工作流程(product-launch-video / faceless-explainer / pr-to-video)相同的慣例。保持 cwd 在工作區根目錄;以下所有內容都寫入這個子目錄。

VIDEO_PATH="/absolute/path/input.mp4"
WORK_DIR="videos/$(basename "$VIDEO_PATH" | sed 's/\.[^.]*$//')"
mkdir -p "$WORK_DIR"

3. 提取音訊和中繼資料

# 中繼資料 — 時長 / 寬度 / 高度 / fps
ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,r_frame_rate \
  -show_entries format=duration -of json "$VIDEO_PATH" > "$WORK_DIR/metadata.json"
# 音訊
ffmpeg -y -i "$VIDEO_PATH" -vn -acodec libmp3lame -q:a 2 "$WORK_DIR/audio.mp3"

輸出:metadata.json(讀取 width/height/duration;fps = r_frame_rate 分數評估結果,例如 30000/1001 → 29.97)+ audio.mp3。

4. 語音辨識

npx hyperframes transcribe "$WORK_DIR/audio.mp3" -d "$WORK_DIR" --json --model small.en

本地 Whisper — 無需 API 金鑰、無代理、無速率限制。將逐字層級的 transcript.json 寫入工作目錄(單詞 text + start / end 時間戳)。讀取它以獲取驅動第 6 步卡片時間的單詞/句子時間;如果需要區段級別的區塊,請自行根據標點符號/停頓將單詞分組為句子。

限制到媒體時長。 Whisper 可能返回最後一個單詞的 end 略超過實際片段長度 — 將每個卡片 endSec 和 composition.durationSeconds 限制為 metadata.json 中的時長,否則渲染將在影片結束後顯示黑色尾部。

5. 修正逐字稿

transcript.json 是一個扁平的字詞物件陣列 — [{ "text": "…", "start": s, "end": s }, …](沒有 segments 陣列,沒有 words 包裝;每個字詞的鍵是 text)。讀取它並修正明顯的 ASR 錯誤:

  • 同音字、產品名稱、技術術語、標點符號
  • 就地編輯單詞的 text;保留其 start / end 時間戳
  • 沒有預先分組的 segments 陣列 — 當您需要區段級別的區塊用於卡片時間時,請自行將單詞分組為句子(在終端標點符號/停頓處分割)

6. 起草輕量級分鏡腳本(在聊天中)

不涉及 CLI。 讀取 transcript.json + metadata.json 並直接設計卡片。storyboard.json 是代理內部的規劃產出 — 沒有 CLI 命令會消費它;它的存在是為了讓您可以在撰寫每張卡片的 HTML 之前,清晰思考時間和內容。保持形狀與下面的範例一致,以便相同的大綱可以驅動您在第 9 步中撰寫的組合:

{
  "schemaVersion": 3,
  "composition": {
    "fps": 30,
    "width": 1080,
    "height": 1920,
    "durationSeconds": 121.2,
    "layout": "portrait",
    "themeId": "noir",
    "seed": 42
  },
  "videoTrack": {
    "sourcePath": "input-video.mp4",
    "startSec": 0,
    "endSec": 121.2,
    "bounds": { "x": 0, "y": 0, "width": 1080, "height": 1920 }
  },
  "subtitles": { "enabled": false },
  "cards": [
    {
      "id": "card-01",
      "intent": "用演講者焦慮的午夜問題吸引注意",
      "startSec": 0.5,
      "endSec": 13.0,
      "accentIndex": 0,
      "zone": "fullscreen",
      "contentHints": {
        "kicker": "一個誠實的問題",
        "title": "晚上11點的靈魂拷問",
        "detail": "客戶的60秒語音訊息:'如果人民幣升值,這是否意味著我的美元保單是巨大損失?'"
      }
    }
  ]
}

必填卡片欄位:

欄位類型用途
id字串卡片 HTML 和 GSAP 選擇器中使用的穩定 ID
intent字串自然語言描述;提供給卡片合成
startSec / endSec數字以秒為單位的時間(endSec > startSec)
accentIndex0 | 1 | 2 | 3 | 4此卡片從 5 個主題強調色中選取哪一個
zone列舉(見下文)卡片在畫布上的位置
contentHints物件自由形式的袋子;代理在此放置 kicker/title/detail/data/quote
archetype(可選)字串您可以附加的自由形式標籤,用於記住卡片模式;不存在則表示自由形式,這是預設值
transition(可選)列舉:cut | fade | slide | wipe宣告式的卡片到卡片轉場

五個 zone 值:

zone解析後的邊界使用時機
fullscreen覆蓋整個畫布英雄時刻、大數字、口號
whiteboard-area內縮 40px 邊距(或直向高度的 45%)密集的數據/註解內容
lower-third底部 30% 帶狀區域在可見影片上進行註解
side-panel右側 42%(橫向)或底部 40%(直向)資料在一側,影片在另一側
video-overlay完整畫布,期望大部分透明的卡片在全出血影片上的註解疊加

當您在第 9 步中組裝組合時,請根據上表將每個卡片的 zone 解析為卡片主機包裝器上的像素邊界。影片邊界在組合層級(videoTrack.bounds)設定一次;要使影片在卡片之間“移動”,請在組合的 <script> 中針對 #video-wrap 撰寫 GSAP 補間動畫(參見第 9 步)。

沒有規定的卡片角色,沒有規定的敘事弧線。 卡片從影片實際說的內容中出現 — 可能全是引言或全是數據,可能以數字開頭或以故事開頭。讓逐字稿驅動節奏。

要有多少個重點? — 自動從時長和密度推斷。 沒有固定的上限。根據影片時長選擇基礎節奏,然後根據資訊密度進行調整。只有下限是固定的:至少 5 張卡片,因此即使短影片也有節奏。

步驟 1 — 按時長決定基礎節奏(中等密度的自然秒數/卡片):

影片時長基礎節奏(每張卡片的秒數)理由
< 60 秒(短 Reels)6–8 秒觀看者在短格式中期望快速剪輯
60 秒 – 3 分鐘8–12 秒正常的社交媒體節奏
3 – 10 分鐘12–20 秒給予呼吸空間;每張卡片承載更多
10 – 30 分鐘20–35 秒長格式演講/訪談節奏
> 30 分鐘30–60 秒情節式,接近章節感

步驟 2 — 密度乘數(乘以基礎節奏):

逐字稿中的信號乘數效果
高密度 — 很多數字、不同的主張、斷斷續續的節奏、類似清單的列舉、每 1–2 句話就是一個新想法× 0.7剪輯更快,更多卡片
中等密度 — 數據和敘述混合的流暢流程× 1.0基礎節奏
低密度 — 一個延伸的故事、重複的重新構框、緩慢反思的節奏、單一論點展開× 1.5剪輯更慢,更少卡片

步驟 3 — 計算:

secPerCard = 基礎節奏 × 密度乘數
cardCount  = max(5, round(影片時長秒 / secPerCard))

範例(注意 — 沒有上限限制;長影片自然會產生更多卡片):

  • 30 秒 Reels,單一妙語(低密度) → 7 × 1.5 = 10.5 秒/卡片 → round(30/10.5)=3 → 下限為 5 張卡片
  • 60 秒反思獨白(低密度) → 10 × 1.5 = 15 秒/卡片 → 4 → 下限為 5 張卡片
  • 121 秒談話性頭像搭配豐富數據(高密度) → 10 × 0.7 = 7 秒/卡片 → 17 張卡片
  • 5 分鐘訪談,混合密度 → 16 × 1.0 = 16 秒/卡片 → 19 張卡片
  • 10 分鐘深度探討,高密度 → 16 × 0.7 = 11 秒/卡片 → 55 張卡片
  • 30 分鐘講座,中等密度 → 28 × 1.0 = 28 秒/卡片 → 64 張卡片
  • 1 小時播客,低密度 → 45 × 1.5 = 67.5 秒/卡片 → 53 張卡片

當一張卡片持續超過 ~15 秒時,請計劃一個更豐富的卡片(數據塊、多步驟揭示、透過間隔動畫展開的幾個子要點)— 靜態的一句台詞在超過 8 秒後會變得無聊。對於長片段,如果許多卡片超過 30 秒,請考慮將時間線分塊為子組合(每個章節一個 .html,使用 data-composition-src 掛載),以便每個檔案的 GSAP 時間線保持可管理 — 請參閱 HyperFrames lint 警告 timeline_track_too_dense。

content 可以是純字串("標題:年化 5.69%\n備註:…")或任何能捕捉數據的 JSON 形狀。代理決定每個卡片的形狀。

可選的片尾。 此技能沒有固定的品牌片尾。如果使用者想要結束卡片,請自行設計一個中性的(字標 + 一行標語,~1.5-2 秒,淡入 -> 短暫停留 -> 淡出),附加到 cards[],並延長 `composition.durationSec

Individual skills in this repo

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

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

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.

heygen-com/hyperframes

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.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

相關技能