HyperFrames Talking Head Recut为访谈与播客素材批量生成与转录同步的图形覆盖卡片【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读Talking Head Recut 是 HyperFrames 中面向“已有讲话类视频素材”的图形包装工作流——原始素材完整播放、不被裁剪Agent 依据本地 Whisper 转录逐句设计定时出现的图形卡片动效标题、lower-thirds、数据标注、引用、侧边栏、画中画并把每张卡片写成独立 HTML 片段后组装成单个合成页面最终由hyperframes渲染为 MP4。读完本文你将掌握从ffprobe提取元数据、本地转录、故事板节奏算法、渲染策略决策、卡片 HTML 契约到 GSAP 主时间线组装与渲染的完整链路。一、路由契约这个工作流解决什么问题Talking Head Recut 的入口契约记录在 skills/hyperframes/references/routes/talking-head-recut.md输入Input一段已有的 talking-head、采访或播客素材用于“包装”。底层视频片段保持原样播放。输出Output同一段素材叠加与转录同步的图形覆盖卡片——动效标题、lower-thirds、数据标注、pull-quotes、侧面板或画中画。任意时长。触发器Triggers用户说“package this video”“add graphic overlays to my talk”“add lower-thirds or data callouts to this interview”等话术时路由到本工作流。在 HyperFrames 的路由表中本工作流排在“纯字幕”之后、“音乐驱动视频”之前embedded-captions负责把口语做成可读字幕而talking-head-recut负责在播放中的视频上叠加设计的图形。如果用户想要的是纯字幕、独立图形或从零创作视频应走其他路由skills/hyperframes/SKILL.md §2 路由表。访谈Interview形态决定了意图层的提问方式详见 skills/hyperframes/references/intent-interview.md 的八步流程Must-haves必须现在问只有一个——哪一段素材输入文件。Deferred需提前告知渲染策略问题——宽高比、布局、风格组、卡片数量——推迟到工作流第 7 步届时建议将来自探测后的素材与转录文本。访谈时只需告知用户这些提问稍后会出现。Run-shape运行形态均不适用该路由跳过故事板/自动化两个运行形态问题。BRIEF.md若存在则承载已确认的输入与用户备注应先读取。意图层只确认输入并宣布延迟提问其余交给工作流执行。二、工作流总览与目录约定核心实现位于 skills/talking-head-recut/SKILL.md共 11 步检查环境 → 创建工作目录 → 提取音频与元数据 → 转录 → 修正转录 → 起草故事板 → 决定渲染策略 → 编写每张卡片 HTML → 组装合成 HTML → 渲染 MP4 → 汇报结果。所有中间产物遵循与其他视频工作流一致的videos/project-name/约定可检查的中间文件包括文件内容metadata.json时长 / 宽 / 高 / fpsaudio.mp3提取出的音频transcript.json扁平词级数组[{ text, start, end }, …]Whisper 输出无segments也无words包裹层storyboard.json轻量卡片大纲Agent 的规划产物public/cards/card-XX.html每张卡片一个 HTML 片段public/index.html最终组装的合成页面output.mp4渲染产物三、环境检查与工作目录先运行环境自检确认 ffmpeg、无头浏览器与渲染依赖齐备并确认技能内置字体与 GSAP 存在npx hyperframes doctor # ffmpeg, headless browser, render deps ls skills/talking-head-recut/assets/fonts skills/talking-head-recut/assets/vendor/gsap.min.js必需依赖系统ffmpeg/ffprobe技能内置的assets/fonts/*.woff2与assets/vendor/gsap.min.js第 9 步会 stage 到工作目录。转录无需任何 API key——hyperframes transcribe在本地运行 Whisper。macOS 上渲染强烈建议开启硬件 GPUexport PRODUCER_BROWSER_GPU_MODEhardware创建工作目录cwd 保持在仓库根所有输出写入单一子目录VIDEO_PATH/absolute/path/input.mp4 WORK_DIRvideos/$(basename $VIDEO_PATH | sed s/\.[^.]*$//) mkdir -p $WORK_DIR四、提取元数据与音频然后本地转录# metadata — duration / width / height / fps ffprobe -v error -select_streams v:0 \ -show_entries streamwidth,height,r_frame_rate \ -show_entries formatduration -of json $VIDEO_PATH $WORK_DIR/metadata.json # audio ffmpeg -y -i $VIDEO_PATH -vn -acodec libmp3lame -q:a 2 $WORK_DIR/audio.mp3注意 fps 需要把r_frame_rate分数求值例如30000/1001 → 29.97。随后本地转录npx hyperframes transcribe $WORK_DIR/audio.mp3 -d $WORK_DIR --json --model small.en从 packages/cli/src/commands/transcribe.ts 的命令定义可以看到transcribe子命令支持--engineauto/parakeet/whisper、--modeltiny.en到large-v3、--language过滤、--json输出、--to srt|vtt旁白导出与--preserve-cues等参数它还能直接导入已有 SRT 或 OpenAI Whisper JSON 响应。转录产物是词级transcript.json——没有segments数组需要分组到句子时按标点/停顿自行切分。钳制到媒体时长Whisper 可能把最后一个词的end略微超出素材实际长度。必须把所有卡片的endSec以及composition.durationSeconds钳制到metadata.json的时长否则渲染会出现视频结束后的黑尾。五、修正转录文本transcript.json是扁平词对象数组键名为text。逐词修正明显的 ASR 错误同音词、产品名、技术术语、标点。编辑某个词的text时保留其start/end时间戳。六、起草轻量故事板纯聊天无 CLI没有 CLI 消费storyboard.json——它是 Agent 内部的规划产物用于在写每张卡片的 HTML 之前把时间与内容想清楚。保持 v3 结构使同一份大纲能驱动第 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: Hook with the speakers anxious midnight question, startSec: 0.5, endSec: 13.0, accentIndex: 0, zone: fullscreen, contentHints: { kicker: AN HONEST QUESTION, title: The soul-searching question at 11 PM, detail: Clients 60-second voice message: If the RMB appreciates, does that mean my USD policy is a terrible loss? } } ] }卡片必填字段字段类型用途idstring卡片 HTML 与 GSAP 选择器中的稳定 idintentstring自然语言描述供卡片合成参考startSec/endSecnumber秒级时间endSec startSecaccentIndex0\|1\|2\|3\|4该卡片使用 5 个主题强调色中的哪一个zoneenum见下卡片在画布上的位置contentHintsobject自由格式kicker/title/detail/data/quote 放这里archetype可选string记录卡片模式的自由标签缺省 自由形式transition可选cut\|fade\|slide\|wipe声明式卡间转场五个zone值zone解析后的边界适用场景fullscreen覆盖整个画布高光时刻、大数字、口号whiteboard-area内缩 40px或竖屏高度的 45%密集数据 / 注释内容lower-third底部 30% 条带在可见视频上做标注side-panel横屏右侧 42% / 竖屏底部 40%数据一侧、视频另一侧video-overlay全画布期望卡片基本透明全幅视频上的注释覆盖注意schema没有card.layout字段视频边界只在合成层设置一次videoTrack.bounds要让视频看起来在卡片间“移动”是在合成script里用 GSAP 对#video-wrap做 tween见第九节。卡片节奏先按时长定基础节奏再按信息密度修正没有固定卡片数量上限但有下限至少 5 张保证短视频也有节奏。第 1 步——按视频时长取基础节奏中等密度的自然秒/卡视频时长基础节奏每卡秒数理由 60s短 Reel6–8s短视频观众期待快速切镜60s – 3 min8–12s常规社交节奏3 – 10 min12–20s留呼吸感每卡承载更多10 – 30 min20–35s长讲座 / 访谈节奏 30 min30–60s章节感、近似剧集第 2 步——密度乘数高密度大量数字、独立论点、列举式、每 1–2 句一个新想法× 0.7切得更快、卡片更多中密度数据与叙事混合× 1.0低密度单一长故事、反复重述、缓慢反思× 1.5切得更慢、卡片更少。第 3 步——计算secPerCard basePace × densityMultiplier cardCount max(5, round(videoDurationSec / secPerCard))示例121s 高密度讲话视频 → 10 × 0.7 7s/卡 →17 张1 小时低密度播客 → 45 × 1.5 67.5s/卡 →53 张。无上限钳制——长视频自然产生更多卡片。当单卡超过约 15s应规划更丰富的卡片数据块、多步揭示、错落动画的子要点超过 30s 的长篇可考虑把时间线切成子合成每章节一个 .html用data-composition-src挂载以规避timeline_track_too_dense的 lint 警告。技能不附带固定品牌 outro如需结尾卡自行设计一个中性结尾字标 一句话约 1.5–2s淡入→短暂停留→淡出追加进cards[]并同步延长composition.durationSeconds。七、决定渲染策略先与用户确认视觉方向在设计卡片或决定边界之前先请用户选择输出比例、布局、风格与卡片密度预设。提问前预计算两件事recommendedRatio依据metadata.json的宽高比sourceAspect width / height≥ 1.5约 3:2 以上宽幅→ 推荐16:9≤ 0.7约 9:13 以上竖幅→ 推荐9:16介于之间近方形→ 推荐4:5。推荐项标签标注“recommended · matches source video X:Y”。autoCountmax(5, round(videoSec / (basePace × densityMultiplier)))。提问通道与环境兼容按可用性依次选择原生结构化提问工具一次 4 问→ 其他原生澄清工具 → 无原生工具Codex CLI 等纯文本运行时时直接在对话中发一条消息、4 个编号问题。每轮最多 2–5 问即使用户信息缺失不阻塞渲染只要参数实质影响最终输出比例/布局/风格/卡片数就问一次。若用户已批准默认值、明确不用问、或运行带自主信号“surprise me”“decide for me”则跳过提问直接采用recommendedRatiolayoutstack最稳妥的跨比例默认 依据转录语气在 editorial/data 最中性组里选风格 autoCount并用一句话告知用户你的选择。四个问题的选项原生AskUserQuestion或纯文本模板输出宽高比A. 16:9 横屏1920×1080TV/YouTube/桌面B. 9:16 竖屏1080×1920TikTok/ReelsC. 4:51080×1350Instagram 信息流 / 朋友圈近方形源最佳。整体布局A. split 左右分屏各半画布B. stack 上下堆叠视频在上约 52%、卡片在下C. pip 画中画卡片铺满画布、视频缩为圆角角窗D. overlay 全屏玻璃覆盖视频全幅、卡片浮层。卡片风格组与帧自动挑选矩阵的行严格对应A. warm-paperacademic / editorial / whiteboard / xhsB. clinicalaudit / swiss / terminal / minimalC. experimentalgeom / spotlight。卡片数量A. Auto推荐约 N 张B. Fewer约round(N × 0.6)张C. More约round(N × 1.5)张D. 直接给具体数字。回答格式如1A 2C 3B 4A或自然语言均可回复default/auto表示全部采用推荐值。答案的落地规则输出画布按比例解析为精确的composition.width × height16:9 →1920×1080layout: landscape9:16 →1080×1920portrait4:5 →1080×1350schema 把 4:5 视为 portrait因高 宽。references/layouts/*.html只记录了横竖两种比例4:5 的边界需从竖屏等比缩放水平值不变垂直值乘以1350/1920 ≈ 0.703。风格组 → 具体风格在用户所选组内依据转录语气挑最贴合者不确定时可用第二次提问在组内 2–4 个具体风格中二选一。卡片数最终解析Auto →autoCountFewer →max(5, round(autoCount × 0.6))More →round(autoCount × 1.5)无上限Other 为整数 →max(5, parseInt(n))Other 无法解析 → 回退autoCount。自动挑选视频帧帧不提问由布局 × 风格决定布局warm-paper 风格clinical 风格experimental 风格splitpolaroidhairlinecleanstackpolaroidhairlinecleanpipcleanpip 胶囊自带边框cleancleanoverlayclean全幅禁装饰帧cleanclean随后用一句话告知用户你选定的比例画布尺寸、布局、具体风格、帧与最终卡片数并把五个值记入工作记忆。渲染策略输入源视频在 GSAP 目标内的适配video元素使用object-fit: cover并被裁剪到#video-wrap的 tween 边界。若不想裁剪如竖屏源放到横屏画布让 tween 指向与源同宽高比的矩形让周围画布透出或用卡片/背景填充。card.zone按卡设置从合成布局推导split → side-panelstack → lower-thirdpip → fullscreenoverlay → video-overlay也可为一卡一例使用其他 zonefullscreen 用于 hero/引用whiteboard-area 用于密集数据。accentIndex按卡设置每卡取 5 个主题强调色之一跨卡变化制造节奏同一叙事节拍内复用同一下标。动效词汇从data-anim种类中选 2–3 个可重复模式并坚持使用保证合成观感一致。主题调色板作为--accent-N/--bg/--textCSS 变量用在合成style中themeId强调色5 色画板背景文字classic#1971c2 #e03131 #2f9e44 #e8590c #9c36b5#FFF9E3#1e1e1enoir#4cc9f0 #f72585 #4ade80 #fb923c #a78bfa#1a1a1a#f1f1f1mint#0077b6 #d62828 #2d6a4f #e76f51 #7209b7#e8faf0#1b4332craft#bf5700 #d62728 #6c757d #e9b54a #3d5a80#f6efe1#2d2d2dslate#0ea5e9 #ef4444 #22c55e #f97316 #a855f7#1e293b#f1f5f9mono#000 #555 #888 #aaa #ccc#fff#000内置字体assets/fonts/下的 woff2第 9 步 stage 到工作目录Caveat手写体、LXGW WenKai TC中文手写、Inter现代无衬线、Virgil几何手写。视觉设计库Style × Layout × VideoFrameskills/talking-head-recut/references/DESIGN_INDEX.md 把视觉拆成三个正交维度可自由混搭维度键决定什么styleacademiceditorialminimalspotlightgeomwhiteboardauditterminalswissxhs卡片视觉语言——字体、配色、装饰、卡内布局layoutsplitstackpipoverlay源视频与卡片如何共享画布framecleanhairlinepolaroid视频元素周围的装饰性边框10 个样式各有鲜明性格academic暖纸·网格·衬线·蓝高亮、editorial奶油底·珊瑚块·大斜体引用、minimal纯黑白·大字号·留白、spotlight暗紫渐变·发光·戏剧感、geom黄绿亮粉黑碰撞、whiteboard纸张·Caveat 手写·涂鸦边框、audit牛皮纸·两端对齐衬线·APPROVED 印章、terminal深色·等宽·ASCII 边框·提示符光标、swiss白底·Helvetica·双细线·红强调、xhs奶油亮粉·chip·#话题·❤️ 行。选择依据是内容语气而非内容类型。决定使用某个维度时读取对应文件layouts/横竖两种比例的精确videoBoundscardBounds与可复制的 storyboard JSON、styles/自带 CSS token 与占位要点的自包含卡片片段、frames/#video-wrap兄弟元素的装饰 HTML 与放置说明。style × layout × frame按卡自由切换只要转场顺滑即可——常见节奏是editorial × overlay × clean开场数据卡切audit × split × hairlinewhiteboard × pip × polaroid收尾。四种合成布局的坐标配方布局是两部分配方在storyboard.json写card.zone 在合成script中为#video-wrap编写 GSAP tween合成布局推荐card.zone#video-wrapGSAP 目标横屏 1920×1080#video-wrapGSAP 目标竖屏 1080×1920适用场景splitside-panel{ left: 960, top: 0, width: 960, height: 1080 }{ left: 0, top: 960, width: 1080, height: 960 }下半讲话人 数据左右对半stacklower-third{ left: 14, top: 14, width: 1892, height: 548 }顶部 52%{ left: 0, top: 0, width: 1080, height: 844 }顶部 44%讲话人在上 摘要卡在下pipfullscreen{ left: 1480, top: 760, width: 400, height: 300 }.framed类{ left: 690, top: 28, width: 360, height: 203 }.framed内容密集型卡片 角落画中画overlayvideo-overlay{ left: 0, top: 0, width: 1920, height: 1080 }全幅{ left: 0, top: 0, width: 1080, height: 1920 }电影感 / 玻璃卡盖全幅视频4:51080×1350时把竖屏的 y/h 值乘以0.703。layouts/split.html 的头部注释展示了这套配方的标准写法横屏视频右半、竖屏视频下半、4:5 按比例推导并建议用深色页面背景让 14–18px 的分隔间隙呈现为干净的隔条。与视频共享画布的卡片必须透明底overlay、pip 配方以及任何card.zone lower-third | video-overlay的时刻卡片的.root绝不能绘制不透明背景否则会遮挡视频。两种模式A透明根 页面 body 提供奶油色背景B仅对全屏卡显式设置背景overlay 卡保持透明。side-panelzonesplit 配方的卡片宿主只占半幅画布不透明背景是安全的。八、编写每张卡片的 HTML为每张卡创建$WORK_DIR/public/cards/{card-id}.html每个文件是满足以下契约的单一根 HTML 片段div classcard>SKILL_DIRskills/talking-head-recut mkdir -p $WORK_DIR/public/fonts $WORK_DIR/public/vendor $WORK_DIR/public/cards cp -n $SKILL_DIR/assets/fonts/* $WORK_DIR/public/fonts/ cp -n $SKILL_DIR/assets/vendor/gsap.min.js $WORK_DIR/public/vendor/ # RE-ENCODE with dense keyframes (-g / -keyint_min composition fps, e.g. 30) ffmpeg -y -i $VIDEO_PATH -c:v libx264 -crf 18 -g 30 -keyint_min 30 \ -pix_fmt yuv420p -movflags faststart -c:a aac $WORK_DIR/public/input-video.mp4合成模板skills/talking-head-recut/SKILL.md 第 9 步的完整版本的骨架head里先为 4 款内置字体写font-facefont-display: block再在:root定义--bg/--text/--accent-0..4/--font-family#stage通过data-composition-id/data-start/data-duration/data-fps/data-width/data-height声明合成参数#video-wrap内的video保持muted同时挂一个#source-audio音频轨复用同一源文件data-track-index10、data-volume1这样渲染出的 MP4 自带原始人声而无需手动 remux且音量/闪避可在时间线上独立控制。每个card-host必须同时带card-host与clip两个类并用data-start/data-duration/data-track-index声明其时间窗与层级style内联写resolveZoneBounds(card.zone)得到的像素边界。主时间线脚本的要点注册一个paused: true的 GSAP timeline每卡一组进入tl.set可见性 fromTo不透明度 卡内动效编译如kinetic-chars编译为对.char的tl.from(..., { stagger: 0.04 }) 退出卡间若布局变化在下一卡进入前对#video-wrap补一段tl.to(..., { left/top/width/height, duration: 0.6, ease: power2.inOut })并可用tl.set(#video-wrap, { className: video-wrapper framed })切换装饰类最后注册window.__timelines[talking-head-recut] tl。两个易踩的坑lint 会警告body / 全局font-family必须列出具体字体名如Inter, Caveat, ...不能用var(--font-family)——HyperFrames 的字体解析器在静态分析时不展开 CSS 变量lintfont_family_without_font_face卡片内仍可使用变量。时间轴必须同步构建禁止async/setTimeout/ Promise / 媒体play()渲染路径禁用Math.random()与Date.now()禁用repeat: -1用有限重复。GSAP 语句速查表时间 card.startSec >cd $WORK_DIR PRODUCER_BROWSER_GPU_MODEhardware npx hyperframes render public \ --skilltalking-head-recut \ -o output.mp4 \ --fps 30hyperframes render dir读取dir/index.html产出 MP4。PRODUCER_BROWSER_GPU_MODEhardware或--browser-gpu在 macOS 上强烈推荐——纯软件 Chrome 渲染在多数笔记本上会超时。全量渲染前可用单帧快照做 sanity checknpx hyperframes snapshot public --at 5 # → public/snapshots/frame-00-at-5s.png汇报时向用户交代工作目录路径、storyboard.json你设计的卡片大纲、public/cards/*.html每卡一个 HTML、public/index.html组装后的合成、output.mp4成片、ASR 提供方、卡片数量及选择理由一句话、缺失的素材或质量注意点。若用户要求实时预览仅在请求时运行中不要打开在渲染完成后启动长驻服务并给出 URL(cd $WORK_DIR/public npx hyperframes preview --background) # 或 npx hyperframes play 获取可分享链接合成页面本身忠实呈现“原素材 覆盖层”因为视频在index.html内原样播放。未获用户许可不要删除工作目录。小结Talking Head Recut 的价值在于把“给讲话类视频做图形包装”变成一条可审计、可复现、全部本地运行的流水线输入一段已有素材输出一张与逐词转录严格同步的图形卡片时间线最终落成一个 HTML 合成与一段 MP4。它的关键工程决策包括transcript.json的词级时间戳直接驱动卡片 timingstoryboard.json作为纯规划产物分离“设计与实现”卡片 HTML 以data-anim-*声明动画、由单一 GSAP 主时间线统一编译视频边界只在合成层设置一次卡间“移动”完全由#video-wrap的 tween 完成以及无script、无外部 URL、作用域样式等保证可渲染性与确定性的硬性契约。无论输出 16:9 横屏、9:16 竖屏还是 4:5 社交比例这条链路都能让访谈、播客与演讲素材在几分钟内变成节奏清晰、信息密度可调的包装成片。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
