HyperFrames Motion DoctrineSeam Gate解读如何让多场景动画看起来像一条连续的长镜头【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇指南解析 hyperframes 仓库内置的动效总纲技能——.claude/skills/motion-doctrine/SKILL.md。它是所有 HyperFrames 动画/视频编排前的第一道总入口GATEWAY用「矢量定律Vector Law」「主线方向The Current」「矢量台账Vector Ledger」「载体Carrier」「因果动效Causal Motion」「缝合闸门Seam Gate」等一整套可执行规则解决多场景视频看起来像一叠互不相关的独立幻灯片这一核心失败模式。读完你将掌握如何规划跨场景的切入/切出方向与速度、如何编写并运行缝合闸门脚本对每个切点做数值化审计、以及如何在场景间维持永不静止的持续动效。这套教义管什么两个层级与一张路由表motion-doctrine 只回答每个接缝处该发生什么、每个场景如何表演的高层决策具体怎么做由底层技术技能实现。两者通过一张路由表Route map衔接这正是阅读全仓库时最先需要建立的坐标系决策本技能负责实现技能仓库内位置接缝转场的选择 参数 代码cut-the-curve§1–5含完整技法目录文字 / 元素的入场级联cut-the-curve§6waterfall entry 瀑布入场场景内群组重排不切镜cut-the-curve§7nudge curve 微调曲线光标驱动的动作 / 场景开局 / 变形点火oversized-cursor接缝的渲染机制 / 白闪防护seam-craft产品发布 / 解说 / 字幕工作叠加层技能text-beat-economics、brand-faithful、captions-overlay其中 captions-overlay 就在本仓库.claude/skills/captions-overlay/按照教义authoring 的先后顺序是固定的先写矢量台账ledger.json→ 用scripts/seam-stamp.mjs从台账盖印主接缝--write index.html→ 按阶段分配持续动效路线 → 载体与因果 → 构建合成 → 用scripts/seam-gate.mjs验证。其中 Tier-A 级的手写 morph/match-cut 需要手工打磨由台账盖印出的接缝按构造天然通过闸门检查。这套技能在仓库中的实际用途之一是驱动每周 changelog 视频的编排参见.claude/skills/README.md它把 motion-doctrine、cut-the-curve、captions-overlay、seam-craft、oversized-cursor 五者组织为完整的技能路由图产出受seam-gate verify0 fail / 0 warn约束的成片。Part 1 — 接缝定律The Seam Law矢量定律怎么出去就怎么进来场景 A 如何退场决定了场景 B 如何进场同一根轴、同一方向、匹配的速度、两侧都在运动中完成切换。拆成四条不可违背的规则轴Axis——x 保持 x、y 保持 y、Z 保持 Z跨越接缝时绝不交换轴。方向Direction——绝不镜像。在 Z 轴上方向 缩放变化的正负号变大 推进push镜头向前变小 拉远pull镜头后退。一个退去式退场却被一个从小变大式入场接住就是镜像矢量——因为 grow-from-small 是元素默认的入场方式这恰是最常见的违规。速度Speed——入场初速度 ≈ 退场末速度。靠镜像缓动实现退场power4.in 入场power4.out距离与时长相同入场侧要在名义路径的中点之后≥50%才真正出现。力学细节见cut-the-curve。相位Phase——切换发生在两侧都运动到一半时。切前先停下、或切后从静止出发都是死拍dead beat。主线方向The Current每个片子只有一个主方向每部片子必须选出一个主导方向house 默认是 LEFT。所有普通接缝都沿这个方向走其余矢量是保留项——花掉一个就表示发生了某件事矢量含义主线方向LEFT下一个节拍——中性的向前推进向上提升elevation——一个结论或揭示升到之前内容之上Z 向前zoom-through朝同一想法的更深处推进Z 向后inverse zoom到达ARRIVAL——某个更大的东西落地尺寸爆发explode out离开一个世界——表面炸过镜头配套纪律绝不在连续接缝中跑相反方向——来回摆ping-pong在观众眼里等于错误。方向改变必须有可见的因点击 / 弹跳 / 撞击或章节边界。矢量台账Vector Ledger动手写主时间轴之前先落账在任何主时间轴编排开始前先把它写成项目根目录的ledger.jsonschema 见.claude/skills/motion-doctrine/references/seam-gate.md。每个接缝一行记录切换时刻、退场与入场矢量轴 带符号的方向Z 行走的行要带缩放的符号、选择器、技法。退场与入场必须一致若某一行不一致修的是计划而不是缓动。验证器会在任何运行时采样之前先静态检查台账各行的自洽性。一个可运行的ledger.json参考含 match-cut 行与 Z 行{ fps: 30, seams: [ { id: hook→claim, cut: 4.2, technique: cut-the-curve LEFT, exit: { selector: #el-hook, axis: x, dir: -1 }, entry: { selector: #el-claim, axis: x, dir: -1 } }, { id: claim→payoff, cut: 10.2, technique: inverse zoom-through, exit: { selector: #el-claim, axis: z, dir: -1 }, entry: { selector: #el-payoff, axis: z, dir: -1, scanRoot: #el-payoff } }, { id: ui→player (match cut), cut: 60.6, type: match-cut, carrier: { out: #resting-card, in: #product-video } } ] }字段语义来自references/seam-gate.md的 ledger schema 段落cut——主时钟上的秒数即入场侧被点燃的那一帧type——cut默认做完整矢量校验或match-cut/morph只校验载体连续性与零重叠运动可以在边界处才启动axis——x/y/zz 缩放dir——运动符号x −1 向左、y −1 向上、z 1 推进变大、z −1 拉远缩小selector——真正承载接缝运动的元素若主时间轴动的是 wrapper 就用 wrapper若接缝运动是在子合成内部写的则用合成内的英雄元素id 或[data-hf-id…]。probe命令会告诉你该选哪个entry.scanRootZ 行——扫描符号相冲的内部入场的子树默认等于入场选择器carrier——cut行可省略match-cut / morph 行必填。out/in两个矩形在 cut±1 帧内必须匹配中心偏移 ≤12px / 尺寸差 ≤5%含祖先缩放。载体Carriers眼睛跟的是物体不是抽象概念最强的接缝会把一个具体载体以匹配的位置 AND 速度递过切点行进到一半的光标、缩进/停靠进下一布局的容器、飞入自己槽位的标记、瀑布切中整组字词。若没有天然载体则由场景英雄元素承担走一段路程 提前淡出、入场在飞行中段开始。永远不要用 crossfade——它根本没有载体。载体连续性的判断依据可从.claude/skills/seam-craft/SKILL.md延伸理解在两个 scene wrapper 交叠的时间窗里渲染器如何做 ping-pong 轨道分配、如何保持前一场景末帧——这些是载体矩形能在两帧间对齐的渲染前提。因果动效Causal Motion每个动作都由上一个动作可见地触发把动作串成因果链click → squash → release spring → flight → impact → recoil → reveal。三条铁律效果在导致它的那一帧启动——同一时间轴位置绝不稍后片刻反应与表观质量成比例大元素回弹慢小元素弹得利落一个力是改变方向的许可证无缘无故的翻转就是 ping-pong。光标是这套因果最典型的执行器oversized-cursor 技能规定点击点燃下一拍必须同帧发生点击 ▸ 菜单级联 / 打字启动 / 窗口形态下压 / logo 点火 / 播放状态翻转详见.claude/skills/oversized-cursor/SKILL.md。Seam Gate构建闸门跑验证器退出码 0 才算做完这是全篇最有工程价值的部分把接缝美学变成可数值验证的构建门槛。node .claude/skills/motion-doctrine/scripts/seam-stamp.mjs --ledger ledger.json --write index.html # 生成 node .claude/skills/motion-doctrine/scripts/seam-gate.mjs verify --ledger ledger.json --project . # 验证脚本用法 ledger schema 完整见.claude/skills/motion-doctrine/references/seam-gate.md对每个接缝做数值化强制检查报告行对应规则ledger计划中退场/入场矢量匹配轴 方向exit-moving/entry-moving规则 1/3——不允许已静止的退场、不允许从静止开始的入场exit-direction/entry-direction规则 3——实测符号与台账方向一致speed-matchWARN定律 §3——入场速度 ≈ 退场速度zero-overlap规则 6——每帧只可见一侧绝不能两侧同时可见z-sign-scan规则 7——入场场景自己的入场不与 Z 符号相冲carrier-*规则 3/4——载体矩形连续性含祖先缩放zero-overlap与z-sign-scan直接照应前文的方向规则切换不是溶解dissolveZ 轴两侧的 d(scale)/dt 必须同号且入场场景自身在接缝窗口cut ~0.5s的内部入场也会被扫描、防止符号打架。实测细节可以回看.claude/skills/motion-doctrine/scripts/seam-gate.mjs速度基于getBoundingClientRect采样x/y 用中心点z 用宽度比因此祖先 wrapper 的变换会被自动计入zero-overlap通过cumOp沿 DOM 祖先链累乘 opacity判定可见性阈值取 VIS 0.04。三条脚本管不到的规则——仍由你负责任何编辑都会重新打开接缝。只要改了某个场景开头/结尾约 1 秒的内容包括为新 VO 重新对时该边界的审计就失效——必须重跑验证器。音频是时钟。场景重排要贴合 VO 里真实的词时间戳绝不为凑时间槽赶一段旁白。VO 重生成后其涉及的接缝同样要重新开放审计。Clip 门控陷阱zero-overlapFAIL 最常见的元凶某个 clip 的data-start若早于其入场 tween就会以初始透明度被提前显形——必须同时设初始autoAlpha: 0且data-start 切点时刻绝不更早。seam-stamp 盖印机制为什么盖印的接缝按构造通过从.claude/skills/motion-doctrine/scripts/seam-stamp.mjs的源码可以看出生成端如何把台账翻译成主时间轴 GSAP 代码只做生成可打印默认输出到 stdout或--write index.html回写--write替换// seams:auto与// /seams:auto之间的区块没有标记时则插入到window.__timelines[main] tl;注册行之后。逐行解析时若发现exit.axis ! entry.axis || exit.dir ! entry.dir直接抛错修计划不修盖印——这与教义一致。Z 接缝的入场选择器会自动登记基础态pulldir −1到达时是scale: 1.25的过大型pushdir 1到达时是scale: 0.78的小型再长大——正是 Z 符号规则的编码化。Z 默认模糊 18px文字级可置blur: 10。x/y 接缝默认按exit.dur 0.34s power3.inentry.dur 0.42s power4.out、偏移travelxPercent/yPercent默认 10盖印入场侧以autoAlpha 0.35中途点火mid-path ignition。match-cut / morph 行只写入两侧的可见性tl.set载体交接保持手写Tier-A。与此配套的示例宿主文件是.claude/skills/changelog-video/examples/master-skeleton.html其注释明确标注每个 slide 的data-start ledger 切点时刻、每行末尾预留// seam-stamp.mjs inserts the seams:auto block after the registration above——这就是台账 → 盖印 → 主时间轴在真实 HTML 合成里的落点。seam-gate 的命令形态完整用法在references/seam-gate.md中有记录# 校验台账中的每个接缝exit 0 闸门通过 node .claude/skills/motion-doctrine/scripts/seam-gate.mjs verify --ledger ledger.json --project project-dir # 复用正在运行的预览服务器合成改动后必须重启它——否则校验的是陈旧 bundle node .claude/skills/motion-doctrine/scripts/seam-gate.mjs verify --ledger ledger.json --url http://localhost:5244 # 在切点附近发现运动元素用于编写/修正台账行 node .claude/skills/motion-doctrine/scripts/seam-gate.mjs probe --t 44.8 --project project-dir要点来自源码头部注释与 references 文档--project会以HYPERFRAME_RUNTIME_URL未设置的环境拉起一个全新的预览服务器并在结束后杀掉——首选方式--url则复用正在运行的服务器适合带端口校验的本地开发但记得重启。--json输出机器可读结果--fps 30为默认采样帧率。零 npm 依赖node ≥ 22 本地 Chrome通过原始 CDP 驱动 chrome-headless-shell自动在~/.cache/puppeteer或系统 Chrome 中查找可用CHROME_PATH覆盖。probe 输出的行会直接告诉你应填入台账的 selector 与符号x-: 左、y-: 上、scale: 推进、scale-: 拉远。Part 2 — 表演层场景要一直在演Performance禁止无意义的晃动No idle wobble持续性的 idle 正弦循环breathe、float、drift、glow pulse被明令禁止——它们会让观众觉得视频在等待。一个入场完成后还剩几秒的场景是规划 bug应该加内容story而不是加晃动。入场与出场之间的每个阶段必须被下面某条路线接管计划里要写明用了哪条路线它是什么分阶段揭示Staged reveals先按住内容不展示按旁白节拍逐段兑现——画面持续获得新信息≥2 组内容的默认路线有意图的镜头Camera with intent一条映射好的 scalepan 路径建立全景 → 旅行 → 抵达主体序列化 UI 生命Sequenced UI life产品随时间行动进度推进、高亮跳步、计数走动动画序列Animated sequences元素演出一段节拍一张卡归入堆叠、一项被拖拽、一个结果拼装完成光标驱动动作Cursor-led action超大光标把眼睛领到触发器它的 CLICK 点燃下一拍见 oversized-cursor自测法在任意秒暂停——必须有一个有意义的东西正在运动途中一个揭示正在落地、镜头在旅行、UI 正按旁白做事。这条暂停测试在.claude/skills/README.md描述的周更 changelog 流程里被seam-gate verify外的严格流程约束强化着。高潮前的静止Stillness before climax在大动作与它的结果之间安排一段0.3–0.75s 的停顿——戏剧性的逗号。直接动作跳结果的场景会丢掉这个张力。时间意图Timing intents单一入场 ≤ ~800ms更长的铺陈应该用多元素错峰stagger而不是一个慢吞吞的元素。退场 ≈ 入场的 75%。例外cut-the-curve 会反转这个比例入场 ~127% 的退场。总错峰 ≤ 500ms8 个元素时收紧单项延迟或只错开前几个。禁用缓动bounce.out/elastic.out。入场过冲back.out(1.4–1.7)没问题。相似元素共享同一组 ease duration 意图——绝不每个元素配一套独有参数。转场词汇量Transition vocabulary一部片子只用 2–3 种场景间转场并反复使用默认边界是沿主线方向的 cut-the-curve。手写的共享元素 morphintent: morph不计入这个预算。对应的完整技法选型矩阵Zoom-Through vs Inverse Zoom vs Cut the Curve vs Waterfall Cut 的适用场景、Z 符号、travel/scale、峰值模糊、缓动与手感可以在.claude/skills/cut-the-curve/SKILL.md的 Choosing a Variant 一节中查到配合其 §6 瀑布入场与 §7 nudge 曲线慢-快-慢三阶段群组滑移构成整本技法目录所有 GSAP 代码模板见.claude/skills/cut-the-curve/examples/gsap-implementation.md。反模式速查表这是教义的红牌清单可直接作为评审 checklist 使用不要这样做应该这样做孤立地为每个场景编写入场先写矢量台账场景之间用 crossfade沿主线方向做 cut-the-curve退场完全结束然后场景才切换两侧都在运动中完成切换切后从静止开始入场在名义路径 ≥50% 处进入反向变焦退场 → 从小变大入场或推进 → 超大回缩匹配缩放速度的符号Seam Gate 第 7 条入场场景在 Z 交接下自带 pop-in 开场让它的开场帧保持已构图或匹配符号用 idle wobble / breathe / float 填充时间分配一条持续动效路线或加内容无因的方向翻转花一个力或保持主线方向把保留矢量当多样性用默认走主线为含义而花掉保留矢量反应比它的因晚几帧同帧点火动作直接跳到结果安排 0.3–0.75s 的高潮前静止关于反模式在实现侧的落地可以补充两条来自姊妹技能的印证cut-the-curve 的模糊分级文字级 10px、整屏表面 18–20px且只在 swap 帧两侧取相同峰值并作用于 wrapper与推拉镜像禁令见.claude/skills/cut-the-curve/SKILL.md而场景间 opacity 总和 1 的窗口会透过底层白色页面形成白闪这一渲染事实以及#root { background: var(--canvas-deep, var(--canvas, #000)) }这一不透明舞台地面防护见.claude/skills/seam-craft/SKILL.md。结语教义的本质是一台可执行的审美编译器motion-doctrine 最有价值的地方在于它把通常只能靠感觉评判的镜头语言连续性翻译成了 ① 写进ledger.json的结构化计划、② 由seam-stamp.mjs从计划生成的代码、③ 由seam-gate.mjs用真实渲染采样强制验收的三段式流水线。矢量定律管方向、主线方向管语义预算、载体管眼睛跟谁走、因果管为什么动而 Seam Gate 的每一行报告exit-moving、zero-overlap、z-sign-scan、carrier-*……都是对这一剪到底成不成立的确定回答。结合仓库内已有的 changelog 主骨架示例与底层的 cut-the-curve / oversized-cursor / seam-craft 技能你可以把这套工作流直接复制到自己的 HyperFrames 多场景合成上。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
