HyperFrames music-to-video 模板目录template-catalog实战指南选组、绑定参数与 beat 对齐【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本指南围绕 HyperFrames 仓库中skills/music-to-video技能链的模板目录template-catalog展开它是一份反向工程出的、零素材asset-free的组级模板清单是 Step 3 规划阶段唯一的选型入口。读完本文你将掌握如何按帧的 pacing / mood / feel 从 10 个模板中选组、如何理解每个模板的参数表面data-composition-variables并从模板index.html源码确认其语义与默认值、如何遵守组时长纪律Group duration discipline在真实音频锚点处切分组以及当模板不匹配时如何用 motion-primitive-catalog 自由组合作为一等公民的选择。一、模板目录在整个工作流中的位置在skills/music-to-video/SKILL.md描述的流水线中模板目录是Step 3填计划的核心读入物步骤产出谁来做Step 0 设置hyperframes.jsonassets/bgm.mp3编排者orchestratorStep 1 分析audiomap.json能量相位、onsets、rolls、silences、hard_stops、phrases、bpm/gridanalyze-beatgrid.pyStep 2 骨架STORYBOARD.md帧骨架span、pacing、mood、feelGroups 留TBD编排者Step 3 计划完整STORYBOARD.mdframe.md读 template-catalog 选模板/选原语/选资产处理编排者 用户审批Step 4 构建每帧一个compositions/frames/NN-*.html每帧派发一个 frame-workerStep 5 组装 / Step 6 渲染index.html→renders/video.mp4编排者 用户审批关键设计这份模板目录是规划器planner读取的唯一选型入口——不要打开模板的index.html来“挑选”。index.html是参考实现reference implementation用于在构建时由 frame-worker 读取data-composition-variables得到参数语义与默认值规划阶段你只命名值you only name the values。模板目录的实体位于skills/music-to-video/references/templates/下每个模板一个目录card-flyby、held-message-living-field、held-text-strobe-burst、intro-kinetic-cascade、logo-split-lockup-pulse、poster-tile-mosaic、roll-flipbook-word-cycle、split-anchor-word-slot、typewriter-phrase-keyword-shuffle部分带program.json如card-flyby/program.json、poster-tile-mosaic/program.json。模板与帧、组的关系一个模板只实现一帧中的一个组group。一帧frame可以堆叠多个组品牌主线brand spine把它们统一起来。品牌来自frame.md而不是模板。模板自带演示用调色板theme/palette/ 颜色参数填充这些参数时要用项目frame.md里所选预设的颜色与字体让每个组读起来像同一件作品——模板提供 motion layout预设提供 look。每个模板都有一个pacing 标签目录里除held-message-living-field是phrase_flow之外其余全部是beat_cut。绝不把 beat_cut 模板放在 phrase_flow 帧上。如何选模板对每个组读取该帧在骨架中的pacing mood 一行音乐情境feel然后扫描模板条目的Reach for it whenBest span取最接近的匹配。如果什么都不匹配就自由组合free-compose从 motion-primitive-catalog.md 中按“anchor best span what it does”挑选原语——这是第一等的选择不是失败。二、组时长纪律Group duration discipline模板选择按组进行而不是按帧。核心规则Best span 是“活跃处理”跨度即模板系统在做有意义的运动的部分。结尾放一个短暂可读的保持hold没问题但一个长空尾巴意味着该换组了。超过 ~6s 的帧通常需要 2 个组。beat_cut 例外是“有真实子相位的丰富节目”poster-tile-mosaic有时card-flybyphrase_flow 例外用held-message-living-field。Roll 模板是一次性 roll 工具。如果一帧有两个 roll 或 roll 之间有个 drop把它拆成两个组。一帧比模板 Best span 长时应在真实音频锚点SURGE、DROP、roll 边缘、hard_stop、phrase 边缘处拆成多个组而不是把一个模板拉伸到整帧。不要通过放慢所有 tween 来延长。保留模板的运动感觉然后用 hold / 调色板变化 / 新组来填充多余时间。这与 frame-skeleton.md 的节奏分层一脉相承beat_cut帧可把硬切/逐 onset 揭示锚定到节拍phrase_flow帧rolls≈0、多为 sparse、低 onset_rate按phrases[]与能量包络走慢交叉淡入与长保持绝不锚定硬切到网格。三、参数机制data-composition-variables与 frame-worker目录条目里的Params是让你在 storyboard 里填充内容槽位的清单。精确语义与默认值住在每个模板的index.html的data-composition-variables里——frame-worker 在构建时读取它们你只需命名值。以card-flyby为例其 index.html 第 4-10 行声明了data-composition-variables[ {id:theme, type:string, label:Palette theme — aurora | ember | mono | slate, default:aurora}, {id:bgColor, type:color, label:Stage background override (empty theme bg), default:}, {id:cards, type:string, label:Deck JSON — array of {tag,title,meta,color?}, default:}, {id:landings, type:string, label:Landing beats JSON — abs seconds, one per card,default:}, {id:yaw, type:number, label:Scene yaw (deg, side tilt of the whole deck), default:-12} ]从源码实现看card-flyby/index.html第 226-264 行theme映射到四组内聚色阶aurora冷色宝石弧teal→ocean→indigo→violet→plum、ember暖日落弧wine→brick→rust→amber→ochre→bronze、mono单色蓝阶梯dark→mid、slate柔和冷灰低调/编辑风。cards与landings是两个数据面卡片数本身是数据3/6/9 张都“开箱即用”landings缺省时由genLandings()按几何收缩的间隙生成加速降落计划第 339-361 行并保留末卡 ~1.6s 保持yaw控制整副卡组的侧倾源码中场景rotateY(YAW)第 374 行。各模板参数清单含默认值汇总如下模板Params含默认值来自各模板index.htmlcard-flybythemeaurorabgColorcards空内置 6 张演示卡landings空按卡数生成加速计划yaw-12held-message-living-fieldbgColor#050507colorLow#0a1430colorMid#6a6f9ecolorHigh#e8f0ffaccentColor#aee4ffmarkTextHFtitleTextHYPERFRAMEStagTextHTML · SHADERS · MP4flowSpeed1min 0.1 / max 3 / step 0.1held-text-strobe-burstmarkTextNAMSHIfontStyledisplay|serifmarkScale10.3–2idleColor#000000idleInk#ffffffframes空内置纹理帧strobePlan空内置计划decorno|yesintro-kinetic-cascadethemelight|dark|boldiconbell可选 bell|cursor|sparkle|bolt|play|heart|check|star、emoji、svg或 nonephrases空内置开场climax空默认JSON{text,in,iconAt,hold,size}logo-split-lockup-pulsebgColor#249b5fmarkColor#e7e3ddtextColor#e7e3ddleftMark空sparkrightMark空cloudword1lilleword22020word3word4poster-tile-mosaicbgColor#e9e9e9tiles12bands3蛇形填充行带gap10pxshowTexttruelabels逗号分隔列表默认 12 条演示标签program空内置 group_5 分数roll-flipbook-word-cyclebgColor#000000textColor#ffffffaccentColor#ff6a32flipWords逗号分隔词表默认 9 个词resolveText空纯闪烁不锁定periodChar.split-anchor-word-slotbgColor#0a84ffanchors逗号列表默认studio,contre,courant每项一行theme0基础主题索引showTexttruefalse只显色块program空内置 group_6 分数typewriter-phrase-keyword-shufflebgColor#000000textColor#ffffffaccentColor#ff6a32lead1growthlead2throughlead3keywordcreativityperiodChar.注意program参数的形态poster-tile-mosaic、split-anchor-word-slot等模板把“节目”编码为 JSON 字符串参数空值时回落到内置分数built-in score。这说明模板把编排逻辑数据化frame-worker 可以在不改动模板结构的前提下重排节目。另外模板实现还展示了 HyperFrames 的确定性构建约定每个模板都在window.__timelines[id]上注册一个 paused 的 GSAP 时间线如card-flyby/index.html第 447、522 行用data-roottrue、data-width/data-height/data-start/data-duration声明组合元数据——这保证了按帧渲染frame-by-frame render时结果完全由时间线位置决定与 frame-skeleton.md 中“每个帧一个 paused 时间线”的 build 约定一致。四、模板全景10 个组模板逐个解析以下按目录原文顺序展开每条保留What / Reach for it when / Best span / Params四要素并补充源码佐证。4.1 card-flyby — 加速 3D 卡组级联What一列纵深卡组以透视向前滚动每个落点landing beat把下一张卡翻入前槽位并伴随实色擦除solid colored wipe旧前卡向相机方向前倾坠落停驻时长逐卡收缩使整副卡组读作加速冲向一张保持的末卡。Reach for it when一串加速的离散 onset间隙收窄 / 冲向下拍你想逐拍闪现一组条目——标题、项目、海报、瓦片——每个命中一张在高潮落在保持卡上。Best span4–6.5s适合 4–7 次降落加一个短尾保持想跑7s就在下一个下拍处拆分。Paramstheme、bgColor、cards、landings、yaw。源码佐证card-flyby/index.html用 5 个槽位far/s3/s2/s1/s0加 exit 姿态第 428-435 行rotX是核心——后排卡向后倾rotX前卡直立0退出时继续前翻-rotX并下坠靠近相机深度来自透视Z rotateX而非相机移动。每个落点只动画活跃窗口[i-1 .. i4]第 495-516 行窗口外的卡处于静止——这就是它能跑 6s 而开销不爆的原因。4.2 held-message-living-field · phrase_flow — 呼吸场上的保持标语What一个可读标记logo / 词 / 标题死静地保持背景是柔和、色彩渐变的模糊场只有场在呼吸。Reach for it when平静 / 稀疏的一段、onset 荒漠——能量在场但 onsets 很少或没有保持的 pad 或 riser你有一个词/标记要举起让它呼吸。Best span6–16s这是长组例外。低于 4s 显得发育不足超过 ~20s 需要状态变化或另起一组。ParamsmarkText、titleText、tagText、palette、flowSpeed、duration。源码佐证该模板的 index.html 用 THREE.js 正交相机全屏片元着色器实现 curl-noise 流场三档渐变调色板由uColLow/uColMid/uColHigh构建palette(t)函数第 308-312 行flowSpeed通过uTime * uSpeed直接缩放场演化速度第 336 行文字层.sf-mark逐字母注入以mix-blend-mode: screen叠加第 69 行全部可见状态由 GSAP 时间线驱动的 uniforms 决定注释明确“输出完全由时间线位置决定跨渲染确定性”第 380-383 行。4.3 held-text-strobe-burst — 纹理翻面频闪What一个死静的词字母每约 3 帧翻过纹理填充的帧texture-clipped fill 逐帧染色 背景色短爆发钉在 roll 上。Reach for it when密集、狠击的 roll / fill和你想让单个词频闪穿过纹理几个小节。随模板附带assets/下的纹理掩模 PNG——见skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/内含 60 张 1024px 级材质掩模沥青、树皮、砖、混凝土、织物、草地、金属、大理石、雪、瓦、木材等。Best span1.2–3.5s频闪疲劳来得快~4s 封顶并切到更干净的系统。ParamsmarkText、fontStyle、markScale、idleColor、idleInk、frames、strobePlan、decor、duration。源码佐证核心技巧是字母形状即窗口——单词用background-image: var(--solid-fill), var(--texture-url)background-blend-mode: multiplybackground-clip: text把实色染色与纹理裁进字形第 99-113 行持久基座层.base在爆发间隙显示实色词纹理层.look只切换 opacity——注释明确这是“seek-safe 翻页书在逐帧渲染下确定”第 55-63 行。4.4 intro-kinetic-cascade — 开场动势级联What一行被排布为一系列大字号编辑短语每个是一张堆叠海报含一个放大的英雄词在各自锚点上逐词揭示短语之间硬切高潮落在滑入的短语上并配一个可替换的带响图标铃 / 光标 / 火花 / emoji / SVG。Reach for it when开场 / 开篇陈述一行要逐词落成大字高潮在一个关键词 图标上。中或以上能量稳定网格。Best span3.5–7s适合 2–4 个短语节拍陈述需要更多时间就把下一个从句做成新组。Paramstheme、icon、phrases、climax。源码佐证intro-kinetic-cascade/index.html 的短语 一个居左、垂直居中的编辑海报堆叠词级揭示后硬切退出.phrase结构 .w词 span高潮短语.climax滑入、保持到结束并可携带内联动画图标{icon}令牌。icon参数接受白名单bell/cursor/sparkle/bolt/play/heart/check/star、emoji、内联svg或none第 6 行。4.5 logo-split-lockup-pulse — 徽标分裂锁定脉冲What一个两部分标记在中心接合左右分裂打开缝隙逐 onset 长出中心词组合关键词落在下拍 surge 上命中时 snap 合拢然后随节拍脉冲。Reach for it when短logo / 品牌 sting不是打字句子快而密的 onsets 一个持续的 roll 底床来脉冲配左右括号式标记。Best span2–4s4.5s会读作被拉太长的 sting。随后接独立的保持锁定 / 下一个想法组。ParamsbgColor、markColor、textColor、leftMark、rightMark、word1、word2、word3、word4。源码佐证该模板内嵌一个自包含的速度驱动方向运动模糊模块attachMotionBlurlogo-split-lockup-pulse/index.html 第 25-60 行起每次 seek 采样目标的 GSAP x/y施加单侧残影尾迹 与速度成比例的上方模糊静止时清除——注释点明这正是让快速标记移动分裂 / snap读作丝滑而非僵硬的关键SVG filters 自包含无外部依赖。leftMark/rightMark默认值为内置 spark / cloud SVG。4.6 poster-tile-mosaic — 海报瓦片马赛克What一个密排的马赛克由不同尺寸的彩色瓦片无重叠平铺填满画面由可互换的节拍同步操作驱动错峰进出、全局锁定重着色、蛇形填充 覆盖。Reach for it when很多离散、可单独落点的 onsets每次瓦片移动一个命中且有你想分别表达的独特子相位accumulate → recolor-on-roll → fill-then-drop。密集段最好保持为一个丰富瓦片节目而非拆分。Best span4–7s仅在节目有清晰子相位时最多8s。如果音乐改换状态regime即使瓦片系统还能继续也要拆分。ParamsbgColor、tiles、bands、gap、showText、labels、program。源码佐证poster-tile-mosaic/index.html 的墙#wall是基础模板三种节拍同步操作都作用在这一个网格上第 40-43 行注释瓦片数量tiles12 默认、行带bands3、缝隙gap10px都是数据标签以大写、断词的.gf-label渲染第 53-60 行。4.7 roll-flipbook-word-cycle — roll 翻页词循环What一个 hi-hat roll 驱动居中词每 16 分音符翻过词表可选地闪烁解析并锁定到最终短语。Reach for it when快速持续填充 roll每分钟数百 hits约 16 分音符且没有单一可读信息——用快速循环的词翻页书填满 roll。Best span1.2–3.8s一次 roll 一次解析。两个 roll或 roll 之间有 drop意味着两个组。ParamsbgColor、textColor、accentColor、flipWords、resolveText、periodChar。源码佐证roll-flipbook-word-cycle/index.html 的flipWords为逗号分隔词表默认 9 个演示词resolveText为空时是纯闪烁不锁定empty pure flicker, no lock第 9 行periodChar提供尾部强调字符默认.。4.8 split-anchor-word-slot — 分裂锚点词槽What左侧保持一个固定锚点列固定词行右侧是撕裂纸张质感的词槽盒由节拍同步操作驱动锚点锁定、词槽词组循环进出 逐行着色、全场景背景翻转、逐拍抖动、盒缩放退出擦除。行数与翻动次数都是数据。Reach for it when短段有保持的想法品牌 / 名字锚在左侧并且有 onsets 流在右侧弹独立词外加一段密集跑动来骑抖动、一个强下拍来擦除退出。Best span3–6s超过 ~6.5s 固定锚点会变陈除非右侧槽进入新组/新节目。ParamsbgColor、anchors、theme、showText、program。源码佐证split-anchor-word-slot/index.html 的anchors为逗号列表默认studio,contre,courant每项一行showTextfalse时只显色块第 8 行program空时回落到内置 group_6 分数。4.9 typewriter-phrase-keyword-shuffle — 打字短语关键词换体What词逐 onset 打出一句短语然后一个关键词在节拍上循环字型其余全部死静保持。Reach for it when稳定网格带连续 onset 流无荒漠打出一句短语再洗一个关键词。这是held-message-living-field的反面后者要 onset 荒漠。Best span2.5–5s如果短语在 ~5s 内打不完也洗不完就减词或把句子跨组分。ParamsbgColor、textColor、accentColor、lead1、lead2、lead3、keyword、periodChar。源码佐证typewriter-phrase-keyword-shuffle/index.html 用lead1/lead2/lead3可选拼出短语主体、keyword指定换体关键词默认 creativity、periodChar提供尾部强调默认.。五、pacing 标签速查与选型决策表选型前先核对帧的 pacing。目录规则除held-message-living-fieldphrase_flow外全部为 beat_cut。禁止把 beat_cut 模板放到 phrase_flow 帧。决策速查音乐情境feel 的典型形态匹配模板典型 Best span加速 onset 流冲向下拍闪现一组条目card-flyby4–6.5s平静稀疏、onset 荒漠保持一个词/标记held-message-living-fieldphrase_flow6–16s密集狠击 roll/fill单词纹理频闪held-text-strobe-burst1.2–3.5s开场陈述逐词落字 关键词 图标intro-kinetic-cascade3.5–7s短 logo/品牌 sting左右括号标记 脉冲logo-split-lockup-pulse2–4s大量可单独落点 onsets 独特子相位poster-tile-mosaic4–7s最多 8s快速持续填充 roll无单一信息roll-flipbook-word-cycle1.2–3.8s左锚点保持想法 右槽 onsets 弹词split-anchor-word-slot3–6s连续 onset 流打字短语 关键词换体typewriter-phrase-keyword-shuffle2.5–5s判断“我的帧属于哪一类”时pacing 判定来自 frame-skeleton.md 的信任边界表energy_phases[]、events[]onset_rate、rolls[]、silences[]、hard_stops[]、key_moments[]、phrases[]、audio.duration_sec在任何音乐上都稳健而tempo.bpm、grid.beats_sec/downbeats_sec的精度仅当音乐真正有节奏时才可靠。rolls 存在 / 密集相位 / 高 onset_rate 且网格稳定 → 网格可靠 → 可走 beat_cutrolls≈0、多为 sparse、低 onset_rate → 网格是虚构的节拍器 → 按 phrases energy 定节奏 → phrase_flow。六、自由组合作为第一等选择模板不匹配时从 motion-primitive-catalog.md 自由组合。要点原子层一个 anchor → 一个微动。扫描anchor best span what it does挑选能承载该组的最小原语集合。时序纪律对每个原语都适用硬击是 0ms切、调色板翻转、内容换、冻结都用tl.set(...)无时长——缓动会杀死击打感必须“落在”节拍上的移动提前~40–190ms开始反应式进入在命中后 0–45ms缓动进入 300–500ms宏观构建 800–2000ms单小节上限每击一个累积元素、相机移动每短语最多一次、密集翻页/频闪系统 ≤2–3s张力构建必须锁定在下拍或 hard_stop。组合规则每组一个主导系统最多在结构原语上叠一层纹理原语结构放在强拍切、相机、system-replace→ 下拍/短语/段首纹理放在弱拍/切分音roll 是累积容器——期间构建结束的下拍硬切到干净布局drop≠downbeatdownbeat 是 regime 内的切drop 是 regime 变化让静默移除密度negative-space-hold背景床是层不是动作一次一个、垫在前景原语之下text-spectral-rays是英雄 wordmark 处理别在它上面叠同一词的可见副本。这些原语与模板在skills/music-to-video/references/motion-primitives/下各有一份参考实现index.html如3d-card-flip、bg-flow-field、typewriter-reveal、text-spectral-rays等 40 个目录。七、实操从骨架到计划的一气呵成综合 SKILL.md 与 planning.mdStep 3 的完整读入物落地流程为选品牌从../hyperframes-creative/frame-presets/按 mood 匹配一个预设把frame.md填好frontmatterstyle字体 ≤4–6 个色板色从预设取——只取其字体与颜色模板拥有构图。填每帧决定每帧的组为每组建一个处理——目录匹配的模板绑定参数 真实 audiomap 锚点、原语目录的自由组合、或服从 pacing的资产处理。写文案。你拥有 WHAT模板/原语 内容 锚点frame-worker 拥有 HOW——绝不往 storyboard 里写毫秒级 tween。校验node SKILL_DIR/scripts/validate-plan.mjs --storyboard $PROJECT_DIR/STORYBOARD.md \ --audiomap $PROJECT_DIR/audiomap.json --templates SKILL_DIR/references/templatesvalidate-plan.mjs会把 storyboard 中的模板名与references/templates/下的实体逐一核对并用audiomap.json验证锚点合法性——这保证“只命名值”的计划阶段不会漂移出模板目录的能力边界。八、自检清单写计划时对照每个组的模板选择都来自本目录且pacing 标签与该帧匹配beat_cut 帧绝不挂 phrase_flow 模板反之亦然。Best span 被尊重帧长于跨度时在真实锚点SURGE/DROP/ roll 边缘 /hard_stop/ phrase 边缘拆组而非放慢 tween 硬拉。每组只列 Params 名称与值精确语义与默认值以对应模板index.html的data-composition-variables为准。品牌来自frame.md预设颜色 字体模板只提供 motion layout。模板不匹配时明确改用自由组合原语目录并遵守 0ms 硬击 / 提前 40–190ms 落拍 / 300–500ms 缓动进入等时序纪律。至此你已经能用模板目录完成 Step 3 的全部选型工作读懂 10 个组模板的适用场景、跨度与参数表面用源码级细节确认参数语义并严格遵守组时长纪律把超过 ~6s 的帧拆成多个组——产出可被validate-plan.mjs校验、可交给 frame-worker 构建的完整计划。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考