HyperFrames music-to-video 帧工人角色指南单帧合成文件的构建契约与实战规范【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文围绕 HyperFrames 仓库中 music-to-video 工作流的核心子代理角色 ——Frame worker帧工人—— 展开讲解如何把分镜STORYBOARD中某一帧的WHAT组、模板/图元、文案、品牌、节拍锚点落实为一个可被组装器识别、可被渲染器逐帧 seek 的合成文件compositions/frames/frame_id.html。读完本文你将掌握帧工人的全部输入上下文与不可决策事项边界、帧内时间换算local_t track_t − span_sec[0]、template传输容器与全局 GSAP 时间线的注册契约、0ms 组间硬切与命名空间的实现方式以及资产剪辑asset clip与确定性determinism的硬性规则 —— 这些能力可直接用于参与或复刻一条音乐驱动节拍同步视频的自动化生产管线。角色定位帧工人是HOW的执行者在 music-to-video 工作流中编排器orchestrator负责 Step 0–6 的完整管线分析音频、切分帧骨架、填写计划、组装、渲染而Step 4 的每一帧都被派发给一个独立的帧工人子代理多个帧工人并行构建各自的帧文件。角色分工非常明确编排器 / 计划层决定 WHAT某一帧包含哪些组groups、每个组用哪个模板或图元、文案内容、品牌palette type、真实的节拍锚点秒数帧工人决定 HOW拉取材料、把锚点绑定到本帧的音频秒数、微定时micro-timing、布局、命名空间。帧工人的一句行动准则被文档明确为follow the manual, fetch the materials, assemble遵循手册、获取材料、组装。你不需要创作内容只需要忠实地把计划转译成可运行的合成文件。这一角色契约的通用部分不含 music 特定逻辑被沉淀在 frame-worker-core.md 中而本文所讨论的文档 frame-worker.md 正是 music-to-video 工作流专属的delta二者共同构成完整的帧工人职责。整个工作流的编排入口是 SKILL.md其中 Step 4 明确要求读取 frame-worker 文档与 subagent-dispatch.md每个帧派发一个帧工人尽可能并行否则按波次进行每个工人只拿到恰好一帧及其分派上下文。输入上下文dispatch context帧工人能拿到什么帧工人的分派上下文包含六个组成部分全部相对PROJECT_DIR项目根目录形如videos/project/解析输入内容用途PROJECT_DIR项目根目录所有路径的解析基准frame_id帧文件的主干名如02-f2逐字使用合成 id、window.__timelines的键、文件名compositions/frames/frame_id.html三者必须一致组装器靠它匹配## Frame N块STORYBOARD.md中该帧的完整分镜块含span_sec、pacing、mood、feel以及### Groups列表audiomap.json唯一权威的节拍时序使用其中给出的秒数不自行重测frame.md品牌文件palette type所有视觉 token颜色、字体都从这里取Materials模板references/templates/id/index.html、图元references/motion-primitives/id/index.html、已暂存的assets/…模板组的参数语义来自其data-composition-variablesfree 组参考图元asset 组使用已暂存素材此外还会附带画布尺寸width×height与帧的pacing。如果分派上下文中携带了上一轮lint/check的反馈则必须先逐条处理这些 finding 再动工。Groups 的三种类型每一帧的### Groups列表中的每个组只能是以下三者之一template 组template:idparamsrole_bindings真实的 audiomap 锚点秒数copy。模板是反向工程出的、零资产的组级配方具体选择菜单见 template-catalog.md。free_design 组free_design:{dominant_system, primitives, density_topology}anchors[]copy。当没有模板匹配时从 motion-primitive-catalog.md 的原子图元库自由组合 —— 这是一等公民选择不是失败兜底。asset 组asset:{treatment, clips, anchors?, overlay_copy?}。用户提供图片/视频时的素材处理详见 montage.md。值得注意的是frame_id与分镜文件的对应关系是帧文件主干名 合成 id 时间线键 分镜 src 的文件名。以 frame-skeleton.md 中的骨架示例为例## Frame 2 — f2对应src: compositions/frames/02-f2.html其span_sec: [7.198, 17.598]duration: 10.4s。固定契约哪些东西生来已定只能如实实现帧工人文档明确列出了一组不可协商的固定项理解它们是避免越权over-step的关键无计划 停止如果### Groups是TBD或为空Step 3 被跳过必须回报而非继续 ——绝不发明组、模板或文案。计划由编排器在 Step 3 填写品牌从../hyperframes-creative/frame-presets/挑选、逐帧填充组与文案、validate-plan.mjs校验通过后由用户批准。计划是既定的按## Frame块中写好的组、模板/图元、文案、品牌与锚点原样构建。若计划确实有错模板或文案不对停止并回报 —— 编排器会在 Step 3 重新规划。转场归组装器所有帧与帧之间由assemble-index.mjs硬切帧平铺整个音轨、无缝隙因此没有转场注入器。帧工人只负责帧内部的组→组切换。音频在根index.html上帧是静音的帧内不得挂任何audio。GSAP 由宿主加载使用全局gsap帧文件内不携带gsap 的script标签。时长 帧跨度时间线必须运行在0 … span_len区间内。这些固定项与 SKILL.md Step 4 的分派上下文完全一致The worker never runs thehyperframesCLI — those commands operate on the assembled project, which doesnt exist yet帧工人绝不运行 hyperframes CLI因为组装后的项目尚不存在运行会作用于错误的对象。帧工人只是按契约写文件然后终止写入文件就是其终态动作。构建流程四步把计划变成合成文件1. 读取所有引用材料读取自己的## Frame块、frame.md以及其中引用的每个模板 / 图元文件的完整正文复现其配方recipe。模板的语义来自其data-composition-variables。以 card-flyby 模板 为例它声明的变量包括themeaurora | ember | mono | slate四种主题色、bgColor舞台背景覆盖色空则用主题背景、cards牌组 JSON{tag, title, meta, color?}、landings落点节拍秒数 JSON每个牌一个缺省自动推导、yaw整个牌组的侧倾角度默认 -12。其 program.json 给出了缺省值示例6 张卡片 6 个落点[0.4, 1.7, 2.7, 3.45, 4.0, 4.4]呈现加速的着陆节奏 —— 这与模板目录中cards 逐拍翻落、间距逐卡收缩、牌组加速进入最终定格卡的描述完全对应。2. 在帧内时间中工作关键换算把每个锚点减去帧起点得到帧内时间local_t track_t − span_sec[0]即audiomap.json中的轨道秒数track seconds换算为帧内秒数。例如一帧span_sec: [7.198, 17.598]轨道上的锚点9.0s在帧内是9.0 − 7.198 ≈ 1.8s。这是保证多帧并行构建、最终由组装器按累计data-start拼回全局时间线的基石。3. 编写合成文件目标文件compositions/frames/frame_id.html的结构契约如下核心形态与 sub-compositions.md 完全一致一个template包裹#stage根元素带data-composition-idframe_id所有style/script都放在template内部恰好一条paused的gsap.timeline({paused:true})注册到window.__timelines[frame_id]时间线同步构建以tl.seek(0)收尾每个组有独立的容器用tl.set(#g1,{autoAlpha:1}, start)/tl.set(#g1,{autoAlpha:0}, end)在其帧内跨度上显示/隐藏 —— 这个0ms 交换就是组→组硬切每个组的 id 与 shader 的 uniform 都要加命名空间前缀g1_/g2_fork 模板时把其 DOM / CSS / tween 内联进来使用宿主的全局gsap若帧的pacing是phrase_flow平静音乐下节拍网格不可信则按乐句 / 能量推进而非按拍硬切。为什么必须这样写因为 sub-compositions.md 揭示了运行时的真实行为宿主通过data-composition-src加载子合成文件后用DOMParser解析只克隆template的内容进宿主槽位template之外的一切包括整个head都被丢弃。所以template不只是包裹层而是传输容器transport container—— 凡需要在渲染中存在的节点必须在template内没有例外。文档还列了三个能过静态检查、却在渲染时炸掉的经典陷阱style写在head标准 HTML 习惯会让你的样式落在template外被丢弃症状是渲染通过但所有文字变成左上角无样式的默认小字宿主data-composition-id≠ 内部模板data-composition-id宿主槽位的data-composition-id是框架查找已注册时间线的查找键两侧不一致会在渲染时输出Sub-composition timelines not registered after 45000ms: host-id每场景空等 45 秒后抓取静态初始帧视频全长但无动画用 class 而不是#root样式化根元素渲染时编译器会把每个文件的 CSS 作用域化到自己的data-composition-id规则S变成[data-composition-idid] S这样的后代选择器根元素自身的 class 无法被匹配。#root被作用域器特殊处理后代选择器.title正常匹配 —— 而且lint会以subcomposition_root_styled_by_class直接报错拒绝 class 形式。4. 自检并收尾对照自检清单逐项核对并在原位修复然后把文件写盘作为终态动作。lint/check与快照由编排器在组装Step 6后统一运行发现 finding 会重新派发回来 —— 所以写盘前自检通过是帧工人唯一的防线frame-worker-core.md 中的自检清单与此互为印证它同样要求整个文件就是恰好一个裸template…/template片段无 DOCTYPE / 完整文档每个style和script都在template内。自检清单逐条拆解每条背后的硬规则结构性检查template包裹的#stagedata-composition-id 时间线键 文件名主干 frame_id所有style/script在template内使用宿主的全局gsap恰好一条 paused 时间线、已注册、以tl.seek(0)结尾data-duration 帧跨度时长静音。其中时间线键必须与根data-composition-id匹配在 determinism-rules.md 中有更细的规定如果键不匹配当它是唯一注册的时间线时运行时仍会绑定但注册两条及以上时键不匹配会导致渲染冻结在 t0。同文档还强调不要把tl.play()用于渲染关键运动不要创建空 tween 只为设置时长用 clip 上的data-duration即可。组可见性检查每个组在其帧内跨度上显示、跨外隐藏t0时能正确渲染组→组切换为 0msid / uniforms 已命名空间化每个组的文字 / 调色板与其块的params/copy匹配视觉 token 全部来自frame.mdphrase_flow帧按乐句 / 能量推进。0ms 硬切不是风格偏好而是功能需求HyperFrames 是逐帧 seek的渲染器 —— determinism-rules.md 开宗明义The renderer takes a time value and produces a pixel buffer. There is no notion of playback — every frame is a fresh seek渲染器接受一个时间值并产出像素缓冲没有播放概念每一帧都是全新 seek。因此任何依赖经过了前一个帧的累积状态都会在乱序或并行采样时失同步。任何需要setTimeout/requestAnimationFrame/addEventListener驱动的视觉都必须改写成时间线上的 tween。确定性seek-safe检查按 determinism-rules.md 保持 seek 安全从索引推导变化派生变化文字 / 数字的替换用tl.set。具体而言渲染帧必须能从请求的时间可复现不得使用以下任何一项作为视觉状态来源Date.now()、performance.now()或任何渲染时时钟未播种的Math.random()需要随机化排布时使用种子化 PRNG渲染时的网络请求获取必需资产应内联或预打包hover / scroll / pointer / focus 状态渲染器没有输入事件无限循环如repeat: -1应计算有限次数repeat: Math.max(0, Math.floor(duration / cycleDuration) - 1)—— 注意用floor而非ceilceil会超出data-duration触发gsap_repeat_ceil_overshootlint。同时不要在 clip 元素上 tweendisplay或裸visibilityHyperFrames 的时序机制拥有 clip 的可见性lint 会拒绝。应使用 GSAP 的autoAlpha它在隐藏端点翻转 visibility或在明确的节拍边界用零时长tl.set(..., {visibility:hidden|visible})做确定性硬杀。动画 clip 的普通视觉属性opacity、transform、filter 等完全合法 —— lint 执行的是黑名单而非白名单。另外子合成内部的入场动画优先用gsap.fromTo()而非gsap.from()宿主每次 clip 可见都会重新 seek 子合成from()在注册时记录起始状态seek 回退时可能失同步fromTo()显式声明两端能干净地重放。资产剪辑检查asset groups素材剪辑muted 的video是#stage的直接子元素带data-start/data-duration/data-track-index以及交叉淡化后的硬杀tl.set。这条规则源自 montage.md 的资产处理规范。三种素材处理treatment严格受帧的pacing约束处理适用行为beat_cut仅beat_cut帧每个锚点切一个新 clip照片用img、动态片段用mutedvideo按核心 clip 契约挂data-start/data-duration/data-track-indexclip 之间把出场内容交叉淡化到opacity:0正好在下个锚点结束然后立即用tl.set(..., {opacity:0}, anchor)硬杀—— 这一对是必需的对应gsap_exit_missing_hard_killlint 规则否则非线性 seek 会泄漏陈旧帧ken_burnsphrase_flow帧一个 clip 跨整个跨度缓慢推近如 scale 1.0→1.08 小幅漂移按帧而非按拍推进帧边缘交叉淡入淡出bg_under_text任意全出血 clip 压暗约 30–50%作为模板 / free 组前景文字的衬底其他资产硬规则clip 必须 mutedv1 中 BGM 是唯一音频帧工人不挂任何音频交叉淡化只动opacity/autoAlpha绝不碰.clip上的visibility/display触发gsap_animates_clip_element锚点是audiomap.json的轨道秒数由工人减去帧起点换算只用本地暂存资产assets/经stage-assets.mjs绝不用远程 URL。终态检查最终帧是刻意的intentional主标题文字可读且不贴画布边缘。这条final frame is intentional与 frame-worker-core.md 的非末帧禁止 exit 动画规则互为补充 —— 在叙事工作流中非末帧会在帧中被卸载exit tween 会被截断成毛刺而在 music-to-video 中帧之间由组装器硬切末帧则是整支视频的落点必须刻意收束。从源码看整条管线的协作关系帧工人文件是 music-to-video 工作流 Step 4 的核心产物它与周边文件的关系可从 SKILL.md 的目录布局中看清music-to-video/ SKILL.md ← 编排器主流程Step 0–6 Gates references/ frame-skeleton.md ← Step 2切帧、定 pacing/mood/feel planning.md · storyboard-format.md · template-catalog.md · motion-primitive-catalog.md · montage.md templates/id/ ← L1 模板实现index.html assets/ program.json motion-primitives/id/ ← L0 图元实现index.html共享 ../assets/gsap.min.js scripts/ analyze-beatgrid.py ← 唯一的节拍分析器 → audiomap.json validate-plan.mjs ← Step 3 计划校验 assemble-index.mjs ← Step 5 确定性组装帧 → index.html stage-assets.mjs ← 暂存用户媒体 lib/storyboard.mjs ← vendored 解析器 sub-agents/ frame-worker.md ← 本文讨论的角色每帧一个三个关键协作点分析信任边界analyze-beatgrid.py是唯一的节拍分析器其能量/密度/rolls/onsets/silences 字段在任何音乐上都可靠但bpm/beats_sec仅在音乐真正有节奏时可靠平静音乐上网格是跟踪器强加的节拍器。这一判断在 Step 2 由编排器落定为每帧的pacing帧工人必须服从 —— 这是pacing 决定切法的源头。组装器按文件名匹配assemble-index.mjs是确定性的无子代理、无判断它按分镜中每帧的src引用帧文件、以累计data-start定位、把 BGM 挂到 track 11、帧→帧硬切。因此帧工人写错文件名或data-composition-id组装时就会以missing or blank frame file的形式暴露SKILL.md Step 5 明确遇到✗重新派发该帧工人并重新组装。校验与渲染单元validate-plan.mjsStep 3在计划阶段校验时长不匹配、帧未平铺音轨、缺少src等硬错误check . --snapshotsStep 6在组装后的项目上运行结构性 lint 与无头浏览器运行时、布局、运动、对比度门禁 —— 这就是为什么帧工人不能自己跑 CLI目标项目还不存在也为什么它必须在写盘前完成全部自检。实践要点速查三键一致frame_id文件名主干data-composition-idwindow.__timelines键一字不差。一次换算所有锚点先做local_t track_t − span_sec[0]再进时间线。一条时间线paused、同步构建、tl.seek(0)收尾、注册到全局注册表。0ms 组切组的显隐用tl.set(#gN,{autoAlpha:…}, …)做零时长交换这就是帧内硬切。命名空间每组 id 与 shader uniform 前缀g1_/g2_防止并行构建的兄弟帧相互碰撞。seek 安全无时钟、无未播种随机、无无限循环、无输入事件依赖、clip 上不 tween visibility。资产纪律muted 视频、#stage直接子元素、三件套data-start/data-duration/data-track-index、交叉淡化必配硬杀。越权红线不发明组/模板/文案无计划即停止、不写转场组装器硬切、不挂音频根拥有、不跑 CLI组装后由编排器验证。最终帧收束末帧刻意设计主标题可读、远离画布边缘。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames music-to-video 帧工人角色指南：单帧合成文件的构建契约与实战规范
HyperFrames music-to-video 帧工人角色指南单帧合成文件的构建契约与实战规范【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文围绕 HyperFrames 仓库中 music-to-video 工作流的核心子代理角色 ——Frame worker帧工人—— 展开讲解如何把分镜STORYBOARD中某一帧的WHAT组、模板/图元、文案、品牌、节拍锚点落实为一个可被组装器识别、可被渲染器逐帧 seek 的合成文件compositions/frames/frame_id.html。读完本文你将掌握帧工人的全部输入上下文与不可决策事项边界、帧内时间换算local_t track_t − span_sec[0]、template传输容器与全局 GSAP 时间线的注册契约、0ms 组间硬切与命名空间的实现方式以及资产剪辑asset clip与确定性determinism的硬性规则 —— 这些能力可直接用于参与或复刻一条音乐驱动节拍同步视频的自动化生产管线。角色定位帧工人是HOW的执行者在 music-to-video 工作流中编排器orchestrator负责 Step 0–6 的完整管线分析音频、切分帧骨架、填写计划、组装、渲染而Step 4 的每一帧都被派发给一个独立的帧工人子代理多个帧工人并行构建各自的帧文件。角色分工非常明确编排器 / 计划层决定 WHAT某一帧包含哪些组groups、每个组用哪个模板或图元、文案内容、品牌palette type、真实的节拍锚点秒数帧工人决定 HOW拉取材料、把锚点绑定到本帧的音频秒数、微定时micro-timing、布局、命名空间。帧工人的一句行动准则被文档明确为follow the manual, fetch the materials, assemble遵循手册、获取材料、组装。你不需要创作内容只需要忠实地把计划转译成可运行的合成文件。这一角色契约的通用部分不含 music 特定逻辑被沉淀在 frame-worker-core.md 中而本文所讨论的文档 frame-worker.md 正是 music-to-video 工作流专属的delta二者共同构成完整的帧工人职责。整个工作流的编排入口是 SKILL.md其中 Step 4 明确要求读取 frame-worker 文档与 subagent-dispatch.md每个帧派发一个帧工人尽可能并行否则按波次进行每个工人只拿到恰好一帧及其分派上下文。输入上下文dispatch context帧工人能拿到什么帧工人的分派上下文包含六个组成部分全部相对PROJECT_DIR项目根目录形如videos/project/解析输入内容用途PROJECT_DIR项目根目录所有路径的解析基准frame_id帧文件的主干名如02-f2逐字使用合成 id、window.__timelines的键、文件名compositions/frames/frame_id.html三者必须一致组装器靠它匹配## Frame N块STORYBOARD.md中该帧的完整分镜块含span_sec、pacing、mood、feel以及### Groups列表audiomap.json唯一权威的节拍时序使用其中给出的秒数不自行重测frame.md品牌文件palette type所有视觉 token颜色、字体都从这里取Materials模板references/templates/id/index.html、图元references/motion-primitives/id/index.html、已暂存的assets/…模板组的参数语义来自其data-composition-variablesfree 组参考图元asset 组使用已暂存素材此外还会附带画布尺寸width×height与帧的pacing。如果分派上下文中携带了上一轮lint/check的反馈则必须先逐条处理这些 finding 再动工。Groups 的三种类型每一帧的### Groups列表中的每个组只能是以下三者之一template 组template:idparamsrole_bindings真实的 audiomap 锚点秒数copy。模板是反向工程出的、零资产的组级配方具体选择菜单见 template-catalog.md。free_design 组free_design:{dominant_system, primitives, density_topology}anchors[]copy。当没有模板匹配时从 motion-primitive-catalog.md 的原子图元库自由组合 —— 这是一等公民选择不是失败兜底。asset 组asset:{treatment, clips, anchors?, overlay_copy?}。用户提供图片/视频时的素材处理详见 montage.md。值得注意的是frame_id与分镜文件的对应关系是帧文件主干名 合成 id 时间线键 分镜 src 的文件名。以 frame-skeleton.md 中的骨架示例为例## Frame 2 — f2对应src: compositions/frames/02-f2.html其span_sec: [7.198, 17.598]duration: 10.4s。固定契约哪些东西生来已定只能如实实现帧工人文档明确列出了一组不可协商的固定项理解它们是避免越权over-step的关键无计划 停止如果### Groups是TBD或为空Step 3 被跳过必须回报而非继续 ——绝不发明组、模板或文案。计划由编排器在 Step 3 填写品牌从../hyperframes-creative/frame-presets/挑选、逐帧填充组与文案、validate-plan.mjs校验通过后由用户批准。计划是既定的按## Frame块中写好的组、模板/图元、文案、品牌与锚点原样构建。若计划确实有错模板或文案不对停止并回报 —— 编排器会在 Step 3 重新规划。转场归组装器所有帧与帧之间由assemble-index.mjs硬切帧平铺整个音轨、无缝隙因此没有转场注入器。帧工人只负责帧内部的组→组切换。音频在根index.html上帧是静音的帧内不得挂任何audio。GSAP 由宿主加载使用全局gsap帧文件内不携带gsap 的script标签。时长 帧跨度时间线必须运行在0 … span_len区间内。这些固定项与 SKILL.md Step 4 的分派上下文完全一致The worker never runs thehyperframesCLI — those commands operate on the assembled project, which doesnt exist yet帧工人绝不运行 hyperframes CLI因为组装后的项目尚不存在运行会作用于错误的对象。帧工人只是按契约写文件然后终止写入文件就是其终态动作。构建流程四步把计划变成合成文件1. 读取所有引用材料读取自己的## Frame块、frame.md以及其中引用的每个模板 / 图元文件的完整正文复现其配方recipe。模板的语义来自其data-composition-variables。以 card-flyby 模板 为例它声明的变量包括themeaurora | ember | mono | slate四种主题色、bgColor舞台背景覆盖色空则用主题背景、cards牌组 JSON{tag, title, meta, color?}、landings落点节拍秒数 JSON每个牌一个缺省自动推导、yaw整个牌组的侧倾角度默认 -12。其 program.json 给出了缺省值示例6 张卡片 6 个落点[0.4, 1.7, 2.7, 3.45, 4.0, 4.4]呈现加速的着陆节奏 —— 这与模板目录中cards 逐拍翻落、间距逐卡收缩、牌组加速进入最终定格卡的描述完全对应。2. 在帧内时间中工作关键换算把每个锚点减去帧起点得到帧内时间local_t track_t − span_sec[0]即audiomap.json中的轨道秒数track seconds换算为帧内秒数。例如一帧span_sec: [7.198, 17.598]轨道上的锚点9.0s在帧内是9.0 − 7.198 ≈ 1.8s。这是保证多帧并行构建、最终由组装器按累计data-start拼回全局时间线的基石。3. 编写合成文件目标文件compositions/frames/frame_id.html的结构契约如下核心形态与 sub-compositions.md 完全一致一个template包裹#stage根元素带data-composition-idframe_id所有style/script都放在template内部恰好一条paused的gsap.timeline({paused:true})注册到window.__timelines[frame_id]时间线同步构建以tl.seek(0)收尾每个组有独立的容器用tl.set(#g1,{autoAlpha:1}, start)/tl.set(#g1,{autoAlpha:0}, end)在其帧内跨度上显示/隐藏 —— 这个0ms 交换就是组→组硬切每个组的 id 与 shader 的 uniform 都要加命名空间前缀g1_/g2_fork 模板时把其 DOM / CSS / tween 内联进来使用宿主的全局gsap若帧的pacing是phrase_flow平静音乐下节拍网格不可信则按乐句 / 能量推进而非按拍硬切。为什么必须这样写因为 sub-compositions.md 揭示了运行时的真实行为宿主通过data-composition-src加载子合成文件后用DOMParser解析只克隆template的内容进宿主槽位template之外的一切包括整个head都被丢弃。所以template不只是包裹层而是传输容器transport container—— 凡需要在渲染中存在的节点必须在template内没有例外。文档还列了三个能过静态检查、却在渲染时炸掉的经典陷阱style写在head标准 HTML 习惯会让你的样式落在template外被丢弃症状是渲染通过但所有文字变成左上角无样式的默认小字宿主data-composition-id≠ 内部模板data-composition-id宿主槽位的data-composition-id是框架查找已注册时间线的查找键两侧不一致会在渲染时输出Sub-composition timelines not registered after 45000ms: host-id每场景空等 45 秒后抓取静态初始帧视频全长但无动画用 class 而不是#root样式化根元素渲染时编译器会把每个文件的 CSS 作用域化到自己的data-composition-id规则S变成[data-composition-idid] S这样的后代选择器根元素自身的 class 无法被匹配。#root被作用域器特殊处理后代选择器.title正常匹配 —— 而且lint会以subcomposition_root_styled_by_class直接报错拒绝 class 形式。4. 自检并收尾对照自检清单逐项核对并在原位修复然后把文件写盘作为终态动作。lint/check与快照由编排器在组装Step 6后统一运行发现 finding 会重新派发回来 —— 所以写盘前自检通过是帧工人唯一的防线frame-worker-core.md 中的自检清单与此互为印证它同样要求整个文件就是恰好一个裸template…/template片段无 DOCTYPE / 完整文档每个style和script都在template内。自检清单逐条拆解每条背后的硬规则结构性检查template包裹的#stagedata-composition-id 时间线键 文件名主干 frame_id所有style/script在template内使用宿主的全局gsap恰好一条 paused 时间线、已注册、以tl.seek(0)结尾data-duration 帧跨度时长静音。其中时间线键必须与根data-composition-id匹配在 determinism-rules.md 中有更细的规定如果键不匹配当它是唯一注册的时间线时运行时仍会绑定但注册两条及以上时键不匹配会导致渲染冻结在 t0。同文档还强调不要把tl.play()用于渲染关键运动不要创建空 tween 只为设置时长用 clip 上的data-duration即可。组可见性检查每个组在其帧内跨度上显示、跨外隐藏t0时能正确渲染组→组切换为 0msid / uniforms 已命名空间化每个组的文字 / 调色板与其块的params/copy匹配视觉 token 全部来自frame.mdphrase_flow帧按乐句 / 能量推进。0ms 硬切不是风格偏好而是功能需求HyperFrames 是逐帧 seek的渲染器 —— determinism-rules.md 开宗明义The renderer takes a time value and produces a pixel buffer. There is no notion of playback — every frame is a fresh seek渲染器接受一个时间值并产出像素缓冲没有播放概念每一帧都是全新 seek。因此任何依赖经过了前一个帧的累积状态都会在乱序或并行采样时失同步。任何需要setTimeout/requestAnimationFrame/addEventListener驱动的视觉都必须改写成时间线上的 tween。确定性seek-safe检查按 determinism-rules.md 保持 seek 安全从索引推导变化派生变化文字 / 数字的替换用tl.set。具体而言渲染帧必须能从请求的时间可复现不得使用以下任何一项作为视觉状态来源Date.now()、performance.now()或任何渲染时时钟未播种的Math.random()需要随机化排布时使用种子化 PRNG渲染时的网络请求获取必需资产应内联或预打包hover / scroll / pointer / focus 状态渲染器没有输入事件无限循环如repeat: -1应计算有限次数repeat: Math.max(0, Math.floor(duration / cycleDuration) - 1)—— 注意用floor而非ceilceil会超出data-duration触发gsap_repeat_ceil_overshootlint。同时不要在 clip 元素上 tweendisplay或裸visibilityHyperFrames 的时序机制拥有 clip 的可见性lint 会拒绝。应使用 GSAP 的autoAlpha它在隐藏端点翻转 visibility或在明确的节拍边界用零时长tl.set(..., {visibility:hidden|visible})做确定性硬杀。动画 clip 的普通视觉属性opacity、transform、filter 等完全合法 —— lint 执行的是黑名单而非白名单。另外子合成内部的入场动画优先用gsap.fromTo()而非gsap.from()宿主每次 clip 可见都会重新 seek 子合成from()在注册时记录起始状态seek 回退时可能失同步fromTo()显式声明两端能干净地重放。资产剪辑检查asset groups素材剪辑muted 的video是#stage的直接子元素带data-start/data-duration/data-track-index以及交叉淡化后的硬杀tl.set。这条规则源自 montage.md 的资产处理规范。三种素材处理treatment严格受帧的pacing约束处理适用行为beat_cut仅beat_cut帧每个锚点切一个新 clip照片用img、动态片段用mutedvideo按核心 clip 契约挂data-start/data-duration/data-track-indexclip 之间把出场内容交叉淡化到opacity:0正好在下个锚点结束然后立即用tl.set(..., {opacity:0}, anchor)硬杀—— 这一对是必需的对应gsap_exit_missing_hard_killlint 规则否则非线性 seek 会泄漏陈旧帧ken_burnsphrase_flow帧一个 clip 跨整个跨度缓慢推近如 scale 1.0→1.08 小幅漂移按帧而非按拍推进帧边缘交叉淡入淡出bg_under_text任意全出血 clip 压暗约 30–50%作为模板 / free 组前景文字的衬底其他资产硬规则clip 必须 mutedv1 中 BGM 是唯一音频帧工人不挂任何音频交叉淡化只动opacity/autoAlpha绝不碰.clip上的visibility/display触发gsap_animates_clip_element锚点是audiomap.json的轨道秒数由工人减去帧起点换算只用本地暂存资产assets/经stage-assets.mjs绝不用远程 URL。终态检查最终帧是刻意的intentional主标题文字可读且不贴画布边缘。这条final frame is intentional与 frame-worker-core.md 的非末帧禁止 exit 动画规则互为补充 —— 在叙事工作流中非末帧会在帧中被卸载exit tween 会被截断成毛刺而在 music-to-video 中帧之间由组装器硬切末帧则是整支视频的落点必须刻意收束。从源码看整条管线的协作关系帧工人文件是 music-to-video 工作流 Step 4 的核心产物它与周边文件的关系可从 SKILL.md 的目录布局中看清music-to-video/ SKILL.md ← 编排器主流程Step 0–6 Gates references/ frame-skeleton.md ← Step 2切帧、定 pacing/mood/feel planning.md · storyboard-format.md · template-catalog.md · motion-primitive-catalog.md · montage.md templates/id/ ← L1 模板实现index.html assets/ program.json motion-primitives/id/ ← L0 图元实现index.html共享 ../assets/gsap.min.js scripts/ analyze-beatgrid.py ← 唯一的节拍分析器 → audiomap.json validate-plan.mjs ← Step 3 计划校验 assemble-index.mjs ← Step 5 确定性组装帧 → index.html stage-assets.mjs ← 暂存用户媒体 lib/storyboard.mjs ← vendored 解析器 sub-agents/ frame-worker.md ← 本文讨论的角色每帧一个三个关键协作点分析信任边界analyze-beatgrid.py是唯一的节拍分析器其能量/密度/rolls/onsets/silences 字段在任何音乐上都可靠但bpm/beats_sec仅在音乐真正有节奏时可靠平静音乐上网格是跟踪器强加的节拍器。这一判断在 Step 2 由编排器落定为每帧的pacing帧工人必须服从 —— 这是pacing 决定切法的源头。组装器按文件名匹配assemble-index.mjs是确定性的无子代理、无判断它按分镜中每帧的src引用帧文件、以累计data-start定位、把 BGM 挂到 track 11、帧→帧硬切。因此帧工人写错文件名或data-composition-id组装时就会以missing or blank frame file的形式暴露SKILL.md Step 5 明确遇到✗重新派发该帧工人并重新组装。校验与渲染单元validate-plan.mjsStep 3在计划阶段校验时长不匹配、帧未平铺音轨、缺少src等硬错误check . --snapshotsStep 6在组装后的项目上运行结构性 lint 与无头浏览器运行时、布局、运动、对比度门禁 —— 这就是为什么帧工人不能自己跑 CLI目标项目还不存在也为什么它必须在写盘前完成全部自检。实践要点速查三键一致frame_id文件名主干data-composition-idwindow.__timelines键一字不差。一次换算所有锚点先做local_t track_t − span_sec[0]再进时间线。一条时间线paused、同步构建、tl.seek(0)收尾、注册到全局注册表。0ms 组切组的显隐用tl.set(#gN,{autoAlpha:…}, …)做零时长交换这就是帧内硬切。命名空间每组 id 与 shader uniform 前缀g1_/g2_防止并行构建的兄弟帧相互碰撞。seek 安全无时钟、无未播种随机、无无限循环、无输入事件依赖、clip 上不 tween visibility。资产纪律muted 视频、#stage直接子元素、三件套data-start/data-duration/data-track-index、交叉淡化必配硬杀。越权红线不发明组/模板/文案无计划即停止、不写转场组装器硬切、不挂音频根拥有、不跑 CLI组装后由编排器验证。最终帧收束末帧刻意设计主标题可读、远离画布边缘。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考