尧图网页设计 
HyperFrames 运动语言指南用 move 词汇表 运动准则 seek-safe 内核编写产品发布视频【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇技术指南聚焦 HyperFrames 产品发布视频工作流product-launch-videoskill中Step 4视觉设计的核心文档 motion-language.md如何在一帧的time-coded shot sequence时间码镜头序列里用一套命名化的 move 词汇表为每个场景的运镜与动效命名并让执行阶段的 frame worker 通过规则 id 解析到可复现的 GSAP 配方。读完本文你将掌握完整的 move 词汇表与每条 move 对应的规则 id、四条运动准则motion doctrine的取舍逻辑、以及驱动所有动效的 seek-safe可安全寻帧硬性约束——最终能让一个发布视频读起来像一部连续的影片而不是一次性动画播放完就冻结的幻灯片。一、motion-language.md 在发布视频工作流中的位置在product-launch-video工作流中动效设计不是自由发挥而是被严格编排进管线里Step 4Frame Visual Design中编排者orchestrator读取 references/visual-design.md、../hyperframes-animation/blueprints-index.md、本运动语言文档与 ../hyperframes-animation/rules-index.md为每个视觉帧写出time-coded shot sequence——即逐 Scene 注明布局与动效且每个 Scene 的 reveal 都要对齐旁白节奏不得前置堆砌后冻结见 SKILL.md 的 Step 4 Gate。Step 5Build Frames中编排者通过 scripts/frame-packets.mjs 为每帧生成一个 bounded packet把该帧的 storyboard 块、蓝图正文、以及所有被引用的规则配方内联进去再连同 sub-agents/frame-worker.md 拼接成_role.md派发给一个个 frame worker。这正是本运动语言文档的两条核心约定的来源你用role / move 名称命名动效绝不写裸的 GSAP 曲线、毫秒数或 stagger 公式——worker 负责把曲线映射出来。每条 move 都携带本地规则 id如→ discrete-text-sequenceworker 在../hyperframes-animation/rules/id.md读取规则正文照实复现而不是根据名称猜测。从规则索引 rules-index.md 可以确认这套约定的底层契约每条规则都运行在一条 paused 的 GSAP timeline注册于window.__timelines上且 seek-safe、确定性、仅动画 transform 与 paint-only 属性。也就是说motion-language.md 是命名层rules/ 目录是实现层两者通过规则 id 一一绑定。此外帧与帧之间的转场不归你管story 只命名transition_in由 harness 注入这条被注入的转场就是该帧的出口exit。worker 在一帧内部构建的切镜within-scene swap、scene-to-scene seam则另见 cut-catalog.md——注意它不属于transition_in的 registry 词汇crossfade/blur-crossfade/push-slide/zoom-through/squeeze两者作用域不同。二、Part 1move 词汇表——按角色命名而非按曲线命名写 shot sequence 时从下面这套调色板中挑选与节拍匹配的 move在序列中命名它并在→后引用规则 id。蓝图blueprints/在自己的rule mapping里命名同样的 move——所有人共享同一套词汇表。建议在一个镜头shot的多个场景之间组合 2–4 个 moveentrance → sequential reveal → settle而不是一次全上。2.1 Kinetic type动态文字Move 名称行为描述规则 idhard-cut / flash word-swap单词或整行在瞬间硬切中替换前一个无淡入淡出/滚动换词本身就是节拍→discrete-text-sequencein-place token cycle一行固定不动只有其中的变量槽位依次变化token → token → token→discrete-text-sequenceper-word staggered reveal短语逐词或逐块组装每个词落在自己的节拍上→dynamic-content-sequencingkinetic beat-slam短句在共享的打击乐节拍数组上逐个砸入每个都有不同的入场方式最终收敛到一个锁定 finalepunchy / rhythmic 标语的首选配方→kinetic-beat-slam实现佐证dynamic-content-sequencing规则rules/dynamic-content-sequencing.md在构建期把内容数组 reduce 成扁平的{start, end}时间表时长由内容长度驱动BASE_DURATION body.length × SEC_PER_CHAR hold并在onUpdate里只在条目切换时才写 DOMlastTitle守卫——这解释了为什么逐词揭示能干净地渲染不会每帧重写textContent造成闪烁。2.2 Typewriter打字机Move 名称行为描述规则 idtype-on with caret文字逐字符打出身后带一个闪烁光标→discrete-text-sequencecontext-sensitive-cursor负责光标闪烁/颜色backspace-and-retype一行打出、删除末尾若干词、再重新打出新内容模拟打字纠错、改述→discrete-text-sequencecontext-sensitive-cursorcontext-sensitive-cursor规则rules/context-sensitive-cursor.md用(tl.time() % cycle) cycle/2生成方波闪烁并在段落边界切换background-color——方波而非 CSS 动画正是为了与暂停的 seek 时钟严格同步。2.3 Count-up / data计数与数据Move 名称行为描述规则 idvalue-scaled counter数字累加的同时字号随数值增长让攀升本身有递进感→counting-dynamic-scalebars / progress / star wipe数字配一个同步填充的图形条形高度 stagger、进度条/圆环填充、半颗星评分擦除→stat-bars-and-fillscounting-dynamic-scalerules/counting-dynamic-scale.md通过数字代理对象与 scale tween 共享同一条 timeline 位置实现数值驱动缩放并强调 seek-safe 的onUpdate与Math.round、tabular-nums。stat-bars-and-fillsrules/stat-bars-and-fills.md则只使用 transform 代理CSSscaleY/scaleX、clip-path擦除——因为width/heighttween 在 HyperFrames 规则契约里是被禁止的。2.4 Reveal / decode揭示与解码Move 名称行为描述规则 id3D char flip-decode字符 3D 翻转从乱码字形解析为真实文字解密感→hacker-flip-3dSVG self-draw轮廓/图标/圆环逐笔自绘→svg-path-drawhacker-flip-3drules/hacker-flip-3d.md是字符级 3D 旋转 确定性字形替换解密其确定性体现在闪烁哈希由 GSAPback.out缓动 每字形onUpdate驱动而非Math.random。svg-path-drawrules/svg-path-draw.md用stroke-dasharray/stroke-dashoffset实现逐笔绘制并在 setup 时以getTotalLength()度量路径、把初始 dashoffset 设为全长。2.5 Camera运镜Move 名称行为描述规则 idpush / focus / drift帧根元素上的序列化运镜pull-back → focus → push 持续微漂移电影感基线→multi-phase-camerazoom-to-target放大到非居中元素scale 反向平移以保持取景→coordinate-target-zoompan / focus-lock虚拟相机变换单个.world包装层实现平移/缩放/锁焦到某个区域→viewport-changecamera-cursor-tracking视口锁定到移动焦点如打字光标先静态取景再焦点锁定跟踪→camera-cursor-trackingmulti-phase-camerarules/multi-phase-camera.md的实现值得展开相机是包住整个场景的一个div其transform: scale() translate(x, y)由两个通道在同一个onUpdatewriter里合成——(1) 相位缩放代理对象按触发时间步进pull-back → focus → push(2) 连续正弦漂移偏移量叠加其上X/Y 使用不同频率DRIFT_FREQ_RATIO ≈ 1.3等频会产生机械感的正对角线~1.3 产生有机的 Lissajous 曲线。关键约束包括.scene必须overflow: hidden任何相位 scale 1 都会露出内容边缘、背景放在.scene而非.camera、transform-origin必须是50% 50%。2.6 Layout motion布局动效Move 名称行为描述规则 idcluster→outward expansion元素从屏幕中心聚拢成簇再同步向外展开到最终位置→center-outward-expansionorbit元素从 3D 空间翻入并落入连续的椭圆轨道入场就在轨道位置原地翻转→orbit-3d-entrysplit-tilt cards两张并排卡片以相反方向的rotationY倾斜从各自一侧入场对比 / before-after→split-tilt-cardslogo/avatar ring connectors头像或 logo 分布在椭圆环上配 SVG 连接线指向中心点交错入场→avatar-cloud-networkcenter-outward-expansionrules/center-outward-expansion.md的机制是每个元素的目标位置由 CSS 一次性给定GSAP 只 tweenx/y偏移到 0并用共享驱动保持 lockstep——典型的transform-only 单一时间轴实现。orbit-3d-entryrules/orbit-3d-entry.md有一条关键约束入场必须在轨道起始位置原地翻转gsap.set在阶段 1 之前而不是在场景中心翻完再进入轨道。2.7 Surface / UI界面动效Move 名称行为描述规则 id3D page-scroll reveal整张网页作为倾斜的 3D 卡片内部内容滚动以揭示特定区块→3d-page-scrollcursor click ripple光标移动到目标、点击时与目标一起下压、并发出扩散涟漪→cursor-click-ripplebutton press触感按压压缩后弹簧恢复可选释放爆发/辉光→press-release-spring或physics-press-reaction点击时压缩光标目标两者keyword glow关键词在 attack-decay-rest 包络上点亮辉光缩放变色同步到词轨→asr-keyword-glowcursor-click-ripplerules/cursor-click-ripple.md强调元素从 t0 就存在于 DOM 中opacity: 0不做条件渲染——这与 seek 语义一致任意时刻 seek 到 t0 元素都应处于正确初始状态。asr-keyword-glowrules/asr-keyword-glow.md是ASR 单词时间戳同步规则每个词由两个 GSAP tween 驱动一个 CSS 自定义属性--glow走过 attack-decay-rest 包络这正是reveal 对齐旁白的运动侧实现。2.8 Morph / handoff形变与交接Move 名称行为描述规则 idscale-swap两个元素位于同一屏幕中心完成交接出场的簇缩小淡出入场的随之到达→scale-swap-transitioncard morph-anchor容器在两次镜头间形变外观尺寸 圆角 表面质感再淡出揭示下方真实目标HyperFrames 用统一scale不用width/height→card-morph-anchorcard-morph-anchorrules/card-morph-anchor.md正是规则契约的直接体现HyperFrames 用统一scale替代被禁止的width/heighttween并仅动画 paint-only 的borderRadius/background/boxShadow。2.9 Seam cuts——worker 在一帧内部构建的切镜这些是 worker 在一帧自己的 Scenes 之间编排的速度匹配切镜。在 shot sequence 中命名接缝即可配方在 cut 目录中不是单个 rules/ idMove 名称行为描述配方位置zoom-through / inverse zoom-throughZ 轴上的场景内替换正向读作穿越前进反向读作抵达payoff→cut-catalog.mdcut-the-curve场景到场景的切镜两侧以匹配速度朝同一方向运动→cut-catalog.mdwaterfall cut单词粒度上的 cut-the-curve在文字到文字的接缝上形成一波涟漪→cut-catalog.md完整的四技法实现三阶段参数Exit / Hard cut / Entry 的 scale、blur、opacity 数值与缓动、Blur Logic 表文字级主体峰值模糊10px全帧大表面18–20px且切帧处两侧必须同值、模糊只加在 wrapper 上、以及何时用哪种的决策表见 cut-catalog.md。核心原则一句话在峰值速度处切、两侧方向与速度匹配cut at peak velocity, match direction and speed on both sides。2.10 Emphasis / marker强调标记Move 名称行为描述规则 idhighlight / circle / burst / scribble在词或元素上的手绘式强调黄色高亮横扫、手绘圆圈、放射爆发、涂鸦、粗描边→css-marker-patternscss-marker-patternsrules/css-marker-patterns.md是纯 CSS GSAP 的标记绘制实现highlight黄色横扫、circle手绘椭圆、burst放射线、scribble涂鸦、sketchout粗糙矩形轮廓。2.11 停留期间的活气谨慎使用——见 Part 2Move 名称行为描述规则 idsubtle jitter让已定格的帧保持活着的合规方式在保持元素上加小幅、低振幅的位置/缩放抖动这是看起来活而不看起来弱的运动图形技巧→sine-wave-loop低振幅档位live SVG internals内部 SVG 部件运动让图标有生命感旋转指针、摆动叶片、脉冲圆点、流动虚线——因为这是主体在做某件事而非卡片在呼吸→svg-icon-enrichmentfinite bounded ambient仅在确有需要时对一个保持的英雄元素做一次有界的呼吸/漂移优先级被刻意降低——优先考虑 sequential reveal 或 jitter→sine-wave-loop2.12 新增的五条 move——均有本地规则背书为满足金语料库golden corpus的需求本 skill 的../hyperframes-animation/rules/中新增了五条 move补全了上述词汇表Move 名称行为描述规则 iddepth-of-field / selective-blur模糊失焦子集以聚光焦点元素→depth-of-field-blurmotion-blur streak快速飞入/相机推穿时的定向速度模糊→motion-blur-streak3D depth scatter-assemble字形/元素散开成翻滚的 3D 云团再重新组装→depth-scatter-assemblespring-pop entrance标准入场弹出默认平滑长尾收敛只有明确要求俏皮时才允许过冲→spring-pop-entranceambient glow / bloom静态英雄元素身后未触发的柔和辉光绽放→ambient-glow-bloom三、Part 2运动准则load-bearing承重墙这四条规则区分了严肃发布视频与Agent 做出来的 PowerPoint。请按原文执行3.1 平滑胜过弹跳——power3是默认元素应使用让它们平滑收敛的长尾减速曲线。大多数情况下power3就够。不要把 bouncy、overshoot、back.out/bounce.out/elastic.out作为默认。弹跳是用户自制 Remotion / HyperFrames 视频里头号劝退因素而且 Agent 几乎从不能把它做对——它以为弹跳增加了强调实际上是用干净度换来的。严肃发布视频工作室的感受相同。平滑永远胜出。过冲被降级为罕见的、明确俏皮的例外消费品/娱乐 logo slam、故意的钟声敲击——绝不是家装风格。命名意图为长尾收敛由 worker 映射power3快速到达时用expo.out。源码佐证spring-pop-entrance.md 现在以平滑收敛开场——默认power3.out或更快前段的expo.out无过冲back.out仅在显式俏皮变体中允许且OVERSHOOT ≤ ~2。其精确物理收敛变体则是阻尼弹簧在 gsap-easing-and-stagger.md 的Spring Eases一节springEase({ response, dampingFraction })是一个纯进度函数无状态、可 seek、确定性的闭式解dampingFraction 1ζ1即临界阻尼——平滑收敛、零过冲正是power3.out所逼近的精确曲线。真实的实时弹簧求解器是有状态积分器每帧累积速度无法确定性地 seek因此在合成中被禁用——这是真实物理同一准则而不是弹跳许可证的技术根基。3.2 后半段 ~50% 内做序列化揭示对齐旁白这是反 PowerPoint 机制——比把发展放在中间更锋利不要在场景前 ~25% 就把所有内容堆上屏。把内容一口气冲进来正是制造幻灯片感的元凶。当旁白提到某个元素时一行文字、一张卡片、甚至一个 h1才揭示它把揭示编排在场景后 ~50%内。Agent 的工作量完全相同但剪辑变得连贯并获得节奏。少即是多。屏幕上更少的元素、各自踩在 VO 节拍上胜过动画过一次就冻结的满画布。实操上帧的 shot sequence 几乎不前置加载——入场只携带 t0 时旁白正在说的内容其余元素在时间线上等待自己的语音提示。一条 reveal 映射到 Part 1 中 development 类 moveper-word staggered reveal、cluster→outward expansion、count-up、同步到词轨的asr-keyword-glow。3.3 不要偷懒呼吸不要糟糕的平移/推近——没有动效好过糟糕的动效Agent 假装活气的两种条件反射都显得廉价不要偷懒呼吸。把卡片/文字做成圆形循环的放大缩小来显得活是廉价信号。别用它。后半段不要糟糕的慢平移/慢推近。在场景后 ~50% 对元素做慢平移或慢推近会扰乱观众视线、造成眼部不适——它让帧变得更糟而不是更好。两者的修复方案相同按脚本节奏交错揭示元素规则 2。总原则是我宁愿没有动效也不要糟糕的动效。保持静止的帧好过靠呼吸或漂移相机来维持活气的帧。停留期间唯一被许可的活气是 subtle jitter——小幅低振幅抖动让帧不显得死气沉沉也不显得虚弱当前视频工作中已在用。其余全部保持静止。3.4 内部接缝是速度匹配切镜当帧内部有接缝——场景内替换、Scene 到 Scene 的切镜、文字到文字的换行——把它做成速度匹配切镜而不是生硬的幻灯片切在峰值速度处切两侧方向和速度匹配。目录四种技法、模糊逻辑、何时用哪种在 cut-catalog.md这些 move 列在 Part 1 的Seam cuts下。从 cut-catalog 的实现细节看速度匹配的具体配方是出口power4.in与入口power4.out使用相同距离和时长——数学上就是一次power4.inOut合成的两半进入元素恰好在不存在的路径 50% 点处以完全相同速度接续例如 230px / 0.3s ≈ 切点两侧各 ~3,070 px/s而淡出在行程 ~25–30% 处即完成淡出 ≈0.18–0.3s行程 0.3–0.34s元素还在明显加速时就消失什么都不用到达画面边缘。3.5 一句话总结平滑长尾power3胜过弹跳在后 ~50% 内按旁白顺序揭示而不是前 25% 倾倒不要偷懒呼吸、不要糟糕的慢平移/慢推近——偏好静止subtle jitter 是唯一活气在峰值速度处切、方向与速度匹配→ cut-catalog.md。四、Part 3seek-safe 内核硬规则不可协商帧是一条暂停的 GSAP timeline、逐帧 seek渲染的所以实时引擎里某些连续意图在这里无法渲染——不要命名它们。这些规则与准则无关必须遵守禁止无限/永恒运动——粒子无限循环logo 永远旋转marquee 循环播放。任何活气subtle jitter、live SVG internal、有界的 bounded ambient都必须是保持期内的有限 tween绝不能是repeat/yoyo。注意 sine-wave-loop.md 本身虽是呼吸/环境动效但其实现是 GSAPsine.inOutyoyo带有限 repeat或onUpdate读取tl.time()——有限、确定性而非无限循环。禁止随机数与墙钟——不要Math.random粒子场不要Date.now漂移。每次渲染必须完全一致只命名确定性动效stagger 和任何变化都由元素索引派生。入场必须用fromTo——显式声明 from 状态使 seek 到t0时元素落在正确位置绝不要依赖 CSS 隐藏起点它在 tween 接管之前就渲染可见seek 下会闪烁。这正是 rules-index.md 契约中绝对值、绝不相对tween、immediateRender: false在重新占有目标时使用的实现理由。禁止用 CSStransition/keyframes做动效——CSS 动画跑在浏览器时钟上独立于 HF 的 seek 时钟会失步并闪烁。所有动效必须在暂停的 GSAP timeline 内驱动。只有入场 序列化揭示——没有中途退场。帧通过 harness 转场卸载被注入的transition_in就是出口。出口动效只属于最后一帧。cut-catalog.md 中 worker 构建的 seam cuts 是帧内的不是该帧的出口。4.1 禁止清单——失败模式失败模式症状修复幻灯片首要失败前 ~25% 把所有内容堆上屏内容进入后冻结没有任何东西在 VO 提示上被揭示规则 2对齐旁白的序列化揭示廉价活气圆形呼吸充当生命后半段慢平移/慢推近扰乱视线多个元素独立漂浮充当动效规则 3只做静止 subtle jitter弹跳back.out/bounce.out/elastic.out作为默认入场手敲过冲规则 1power3长尾仅明确俏皮时才过冲永远repeat/yoyoMath.random/Date.now所有元素同时进入要 sequence 或 stagger——五、在 shot 中命名动效——完整示例原文提供了一个三段式命名范例展示 move 名称 规则 id 如何落进 time-coded shot sequenceScene 10.0–1.0s纯色场主标题通过per-word staggered revealdynamic-content-sequencing以平滑长尾收敛power3入场根元素上缓慢pushmulti-phase-camera保持稳定——后半段不再重新推近。Scene 21.0–3.0s当旁白逐个说出每个能力时五个功能图标通过cluster→outward expansioncenter-outward-expansion依次揭示随后它们下方一个value-scaled countercounting-dynamic-scale向上跳动——后半段揭示对齐脚本而不是在 t0 倾倒。Scene 33.0–4.2s在结果上保持当旁白说出 payoff 词时keyword glowasr-keyword-glow落在该词上收敛并保持静止——最多subtle jittersine-wave-loop低振幅保持活气无呼吸、无漂移。每个 Scene 命名 move 规则 id接缝切镜则用cut-catalog.md让 worker 选择曲线、毫秒和 stagger——默认power3。这个示例还呼应了 SKILL.md Step 4 的 Gate 要求每个视觉帧的 time-coded shot sequence 的 reveal 必须对齐旁白、无前置堆砌且要写一个贯穿全片的## Video direction块。六、落地路径速查把上面所有引用收拢成一份仓库内导航方便在 skills/product-launch-video 与 skills/hyperframes-animation 之间来回对照用途仓库相对路径本文档运动语言本体词汇 准则 seek-safeskills/product-launch-video/references/motion-language.md帧内接缝切镜的完整配方目录四种技法 模糊逻辑 反模式skills/product-launch-video/references/cut-catalog.md有效规则名索引Step 4 中校验不要发明动效名skills/hyperframes-animation/rules-index.md每条 move 的原子配方正文worker 在 Step 5 读取并复现skills/hyperframes-animation/rules/场景形状模板blueprints其rule mapping使用同一套 move 名skills/hyperframes-animation/blueprints/ 与 skills/hyperframes-animation/blueprints-index.md缓动/交错/内置弹簧springEaseζ1 平滑收敛的实现skills/hyperframes-animation/adapters/gsap-easing-and-stagger.md帧 worker 的职责增量按 packet 内联的规则配方实现 moveskills/product-launch-video/sub-agents/frame-worker.md七、写在最后把运动语言当作团队契约HyperFrames 的运动语言设计有一个明确的分工哲学编排者命名意图worker 实现配方seek 时钟保证一致性。motion-language.md 是命名层——把金语料库真正使用的动效收敛成一个有限的、带规则 id 的词汇表rules-index.md 是校验层——防止任何人发明词汇表之外的动效名rules/ 目录是实现层——每条规则都满足 paused 单时间轴、fromTo显式起始、确定性、transform-only、有限重复这五条契约。对你而言无论你是编排者写 shot sequence还是被派发的 frame worker读 packet 实现帧只要遵守这套三层契约——用 move 名而非曲线名、平滑长尾而非弹跳、按 VO 节拍做后半段揭示、把没有动效当作合法选项、一切动效都能被 seek——产出的发布视频就会呈现一部连续影片的质感而不是一叠播放一次就冻结的幻灯片。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 运动语言指南：用 move 词汇表 + 运动准则 + seek-safe 内核编写产品发布视频
HyperFrames 运动语言指南用 move 词汇表 运动准则 seek-safe 内核编写产品发布视频【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本篇技术指南聚焦 HyperFrames 产品发布视频工作流product-launch-videoskill中Step 4视觉设计的核心文档 motion-language.md如何在一帧的time-coded shot sequence时间码镜头序列里用一套命名化的 move 词汇表为每个场景的运镜与动效命名并让执行阶段的 frame worker 通过规则 id 解析到可复现的 GSAP 配方。读完本文你将掌握完整的 move 词汇表与每条 move 对应的规则 id、四条运动准则motion doctrine的取舍逻辑、以及驱动所有动效的 seek-safe可安全寻帧硬性约束——最终能让一个发布视频读起来像一部连续的影片而不是一次性动画播放完就冻结的幻灯片。一、motion-language.md 在发布视频工作流中的位置在product-launch-video工作流中动效设计不是自由发挥而是被严格编排进管线里Step 4Frame Visual Design中编排者orchestrator读取 references/visual-design.md、../hyperframes-animation/blueprints-index.md、本运动语言文档与 ../hyperframes-animation/rules-index.md为每个视觉帧写出time-coded shot sequence——即逐 Scene 注明布局与动效且每个 Scene 的 reveal 都要对齐旁白节奏不得前置堆砌后冻结见 SKILL.md 的 Step 4 Gate。Step 5Build Frames中编排者通过 scripts/frame-packets.mjs 为每帧生成一个 bounded packet把该帧的 storyboard 块、蓝图正文、以及所有被引用的规则配方内联进去再连同 sub-agents/frame-worker.md 拼接成_role.md派发给一个个 frame worker。这正是本运动语言文档的两条核心约定的来源你用role / move 名称命名动效绝不写裸的 GSAP 曲线、毫秒数或 stagger 公式——worker 负责把曲线映射出来。每条 move 都携带本地规则 id如→ discrete-text-sequenceworker 在../hyperframes-animation/rules/id.md读取规则正文照实复现而不是根据名称猜测。从规则索引 rules-index.md 可以确认这套约定的底层契约每条规则都运行在一条 paused 的 GSAP timeline注册于window.__timelines上且 seek-safe、确定性、仅动画 transform 与 paint-only 属性。也就是说motion-language.md 是命名层rules/ 目录是实现层两者通过规则 id 一一绑定。此外帧与帧之间的转场不归你管story 只命名transition_in由 harness 注入这条被注入的转场就是该帧的出口exit。worker 在一帧内部构建的切镜within-scene swap、scene-to-scene seam则另见 cut-catalog.md——注意它不属于transition_in的 registry 词汇crossfade/blur-crossfade/push-slide/zoom-through/squeeze两者作用域不同。二、Part 1move 词汇表——按角色命名而非按曲线命名写 shot sequence 时从下面这套调色板中挑选与节拍匹配的 move在序列中命名它并在→后引用规则 id。蓝图blueprints/在自己的rule mapping里命名同样的 move——所有人共享同一套词汇表。建议在一个镜头shot的多个场景之间组合 2–4 个 moveentrance → sequential reveal → settle而不是一次全上。2.1 Kinetic type动态文字Move 名称行为描述规则 idhard-cut / flash word-swap单词或整行在瞬间硬切中替换前一个无淡入淡出/滚动换词本身就是节拍→discrete-text-sequencein-place token cycle一行固定不动只有其中的变量槽位依次变化token → token → token→discrete-text-sequenceper-word staggered reveal短语逐词或逐块组装每个词落在自己的节拍上→dynamic-content-sequencingkinetic beat-slam短句在共享的打击乐节拍数组上逐个砸入每个都有不同的入场方式最终收敛到一个锁定 finalepunchy / rhythmic 标语的首选配方→kinetic-beat-slam实现佐证dynamic-content-sequencing规则rules/dynamic-content-sequencing.md在构建期把内容数组 reduce 成扁平的{start, end}时间表时长由内容长度驱动BASE_DURATION body.length × SEC_PER_CHAR hold并在onUpdate里只在条目切换时才写 DOMlastTitle守卫——这解释了为什么逐词揭示能干净地渲染不会每帧重写textContent造成闪烁。2.2 Typewriter打字机Move 名称行为描述规则 idtype-on with caret文字逐字符打出身后带一个闪烁光标→discrete-text-sequencecontext-sensitive-cursor负责光标闪烁/颜色backspace-and-retype一行打出、删除末尾若干词、再重新打出新内容模拟打字纠错、改述→discrete-text-sequencecontext-sensitive-cursorcontext-sensitive-cursor规则rules/context-sensitive-cursor.md用(tl.time() % cycle) cycle/2生成方波闪烁并在段落边界切换background-color——方波而非 CSS 动画正是为了与暂停的 seek 时钟严格同步。2.3 Count-up / data计数与数据Move 名称行为描述规则 idvalue-scaled counter数字累加的同时字号随数值增长让攀升本身有递进感→counting-dynamic-scalebars / progress / star wipe数字配一个同步填充的图形条形高度 stagger、进度条/圆环填充、半颗星评分擦除→stat-bars-and-fillscounting-dynamic-scalerules/counting-dynamic-scale.md通过数字代理对象与 scale tween 共享同一条 timeline 位置实现数值驱动缩放并强调 seek-safe 的onUpdate与Math.round、tabular-nums。stat-bars-and-fillsrules/stat-bars-and-fills.md则只使用 transform 代理CSSscaleY/scaleX、clip-path擦除——因为width/heighttween 在 HyperFrames 规则契约里是被禁止的。2.4 Reveal / decode揭示与解码Move 名称行为描述规则 id3D char flip-decode字符 3D 翻转从乱码字形解析为真实文字解密感→hacker-flip-3dSVG self-draw轮廓/图标/圆环逐笔自绘→svg-path-drawhacker-flip-3drules/hacker-flip-3d.md是字符级 3D 旋转 确定性字形替换解密其确定性体现在闪烁哈希由 GSAPback.out缓动 每字形onUpdate驱动而非Math.random。svg-path-drawrules/svg-path-draw.md用stroke-dasharray/stroke-dashoffset实现逐笔绘制并在 setup 时以getTotalLength()度量路径、把初始 dashoffset 设为全长。2.5 Camera运镜Move 名称行为描述规则 idpush / focus / drift帧根元素上的序列化运镜pull-back → focus → push 持续微漂移电影感基线→multi-phase-camerazoom-to-target放大到非居中元素scale 反向平移以保持取景→coordinate-target-zoompan / focus-lock虚拟相机变换单个.world包装层实现平移/缩放/锁焦到某个区域→viewport-changecamera-cursor-tracking视口锁定到移动焦点如打字光标先静态取景再焦点锁定跟踪→camera-cursor-trackingmulti-phase-camerarules/multi-phase-camera.md的实现值得展开相机是包住整个场景的一个div其transform: scale() translate(x, y)由两个通道在同一个onUpdatewriter里合成——(1) 相位缩放代理对象按触发时间步进pull-back → focus → push(2) 连续正弦漂移偏移量叠加其上X/Y 使用不同频率DRIFT_FREQ_RATIO ≈ 1.3等频会产生机械感的正对角线~1.3 产生有机的 Lissajous 曲线。关键约束包括.scene必须overflow: hidden任何相位 scale 1 都会露出内容边缘、背景放在.scene而非.camera、transform-origin必须是50% 50%。2.6 Layout motion布局动效Move 名称行为描述规则 idcluster→outward expansion元素从屏幕中心聚拢成簇再同步向外展开到最终位置→center-outward-expansionorbit元素从 3D 空间翻入并落入连续的椭圆轨道入场就在轨道位置原地翻转→orbit-3d-entrysplit-tilt cards两张并排卡片以相反方向的rotationY倾斜从各自一侧入场对比 / before-after→split-tilt-cardslogo/avatar ring connectors头像或 logo 分布在椭圆环上配 SVG 连接线指向中心点交错入场→avatar-cloud-networkcenter-outward-expansionrules/center-outward-expansion.md的机制是每个元素的目标位置由 CSS 一次性给定GSAP 只 tweenx/y偏移到 0并用共享驱动保持 lockstep——典型的transform-only 单一时间轴实现。orbit-3d-entryrules/orbit-3d-entry.md有一条关键约束入场必须在轨道起始位置原地翻转gsap.set在阶段 1 之前而不是在场景中心翻完再进入轨道。2.7 Surface / UI界面动效Move 名称行为描述规则 id3D page-scroll reveal整张网页作为倾斜的 3D 卡片内部内容滚动以揭示特定区块→3d-page-scrollcursor click ripple光标移动到目标、点击时与目标一起下压、并发出扩散涟漪→cursor-click-ripplebutton press触感按压压缩后弹簧恢复可选释放爆发/辉光→press-release-spring或physics-press-reaction点击时压缩光标目标两者keyword glow关键词在 attack-decay-rest 包络上点亮辉光缩放变色同步到词轨→asr-keyword-glowcursor-click-ripplerules/cursor-click-ripple.md强调元素从 t0 就存在于 DOM 中opacity: 0不做条件渲染——这与 seek 语义一致任意时刻 seek 到 t0 元素都应处于正确初始状态。asr-keyword-glowrules/asr-keyword-glow.md是ASR 单词时间戳同步规则每个词由两个 GSAP tween 驱动一个 CSS 自定义属性--glow走过 attack-decay-rest 包络这正是reveal 对齐旁白的运动侧实现。2.8 Morph / handoff形变与交接Move 名称行为描述规则 idscale-swap两个元素位于同一屏幕中心完成交接出场的簇缩小淡出入场的随之到达→scale-swap-transitioncard morph-anchor容器在两次镜头间形变外观尺寸 圆角 表面质感再淡出揭示下方真实目标HyperFrames 用统一scale不用width/height→card-morph-anchorcard-morph-anchorrules/card-morph-anchor.md正是规则契约的直接体现HyperFrames 用统一scale替代被禁止的width/heighttween并仅动画 paint-only 的borderRadius/background/boxShadow。2.9 Seam cuts——worker 在一帧内部构建的切镜这些是 worker 在一帧自己的 Scenes 之间编排的速度匹配切镜。在 shot sequence 中命名接缝即可配方在 cut 目录中不是单个 rules/ idMove 名称行为描述配方位置zoom-through / inverse zoom-throughZ 轴上的场景内替换正向读作穿越前进反向读作抵达payoff→cut-catalog.mdcut-the-curve场景到场景的切镜两侧以匹配速度朝同一方向运动→cut-catalog.mdwaterfall cut单词粒度上的 cut-the-curve在文字到文字的接缝上形成一波涟漪→cut-catalog.md完整的四技法实现三阶段参数Exit / Hard cut / Entry 的 scale、blur、opacity 数值与缓动、Blur Logic 表文字级主体峰值模糊10px全帧大表面18–20px且切帧处两侧必须同值、模糊只加在 wrapper 上、以及何时用哪种的决策表见 cut-catalog.md。核心原则一句话在峰值速度处切、两侧方向与速度匹配cut at peak velocity, match direction and speed on both sides。2.10 Emphasis / marker强调标记Move 名称行为描述规则 idhighlight / circle / burst / scribble在词或元素上的手绘式强调黄色高亮横扫、手绘圆圈、放射爆发、涂鸦、粗描边→css-marker-patternscss-marker-patternsrules/css-marker-patterns.md是纯 CSS GSAP 的标记绘制实现highlight黄色横扫、circle手绘椭圆、burst放射线、scribble涂鸦、sketchout粗糙矩形轮廓。2.11 停留期间的活气谨慎使用——见 Part 2Move 名称行为描述规则 idsubtle jitter让已定格的帧保持活着的合规方式在保持元素上加小幅、低振幅的位置/缩放抖动这是看起来活而不看起来弱的运动图形技巧→sine-wave-loop低振幅档位live SVG internals内部 SVG 部件运动让图标有生命感旋转指针、摆动叶片、脉冲圆点、流动虚线——因为这是主体在做某件事而非卡片在呼吸→svg-icon-enrichmentfinite bounded ambient仅在确有需要时对一个保持的英雄元素做一次有界的呼吸/漂移优先级被刻意降低——优先考虑 sequential reveal 或 jitter→sine-wave-loop2.12 新增的五条 move——均有本地规则背书为满足金语料库golden corpus的需求本 skill 的../hyperframes-animation/rules/中新增了五条 move补全了上述词汇表Move 名称行为描述规则 iddepth-of-field / selective-blur模糊失焦子集以聚光焦点元素→depth-of-field-blurmotion-blur streak快速飞入/相机推穿时的定向速度模糊→motion-blur-streak3D depth scatter-assemble字形/元素散开成翻滚的 3D 云团再重新组装→depth-scatter-assemblespring-pop entrance标准入场弹出默认平滑长尾收敛只有明确要求俏皮时才允许过冲→spring-pop-entranceambient glow / bloom静态英雄元素身后未触发的柔和辉光绽放→ambient-glow-bloom三、Part 2运动准则load-bearing承重墙这四条规则区分了严肃发布视频与Agent 做出来的 PowerPoint。请按原文执行3.1 平滑胜过弹跳——power3是默认元素应使用让它们平滑收敛的长尾减速曲线。大多数情况下power3就够。不要把 bouncy、overshoot、back.out/bounce.out/elastic.out作为默认。弹跳是用户自制 Remotion / HyperFrames 视频里头号劝退因素而且 Agent 几乎从不能把它做对——它以为弹跳增加了强调实际上是用干净度换来的。严肃发布视频工作室的感受相同。平滑永远胜出。过冲被降级为罕见的、明确俏皮的例外消费品/娱乐 logo slam、故意的钟声敲击——绝不是家装风格。命名意图为长尾收敛由 worker 映射power3快速到达时用expo.out。源码佐证spring-pop-entrance.md 现在以平滑收敛开场——默认power3.out或更快前段的expo.out无过冲back.out仅在显式俏皮变体中允许且OVERSHOOT ≤ ~2。其精确物理收敛变体则是阻尼弹簧在 gsap-easing-and-stagger.md 的Spring Eases一节springEase({ response, dampingFraction })是一个纯进度函数无状态、可 seek、确定性的闭式解dampingFraction 1ζ1即临界阻尼——平滑收敛、零过冲正是power3.out所逼近的精确曲线。真实的实时弹簧求解器是有状态积分器每帧累积速度无法确定性地 seek因此在合成中被禁用——这是真实物理同一准则而不是弹跳许可证的技术根基。3.2 后半段 ~50% 内做序列化揭示对齐旁白这是反 PowerPoint 机制——比把发展放在中间更锋利不要在场景前 ~25% 就把所有内容堆上屏。把内容一口气冲进来正是制造幻灯片感的元凶。当旁白提到某个元素时一行文字、一张卡片、甚至一个 h1才揭示它把揭示编排在场景后 ~50%内。Agent 的工作量完全相同但剪辑变得连贯并获得节奏。少即是多。屏幕上更少的元素、各自踩在 VO 节拍上胜过动画过一次就冻结的满画布。实操上帧的 shot sequence 几乎不前置加载——入场只携带 t0 时旁白正在说的内容其余元素在时间线上等待自己的语音提示。一条 reveal 映射到 Part 1 中 development 类 moveper-word staggered reveal、cluster→outward expansion、count-up、同步到词轨的asr-keyword-glow。3.3 不要偷懒呼吸不要糟糕的平移/推近——没有动效好过糟糕的动效Agent 假装活气的两种条件反射都显得廉价不要偷懒呼吸。把卡片/文字做成圆形循环的放大缩小来显得活是廉价信号。别用它。后半段不要糟糕的慢平移/慢推近。在场景后 ~50% 对元素做慢平移或慢推近会扰乱观众视线、造成眼部不适——它让帧变得更糟而不是更好。两者的修复方案相同按脚本节奏交错揭示元素规则 2。总原则是我宁愿没有动效也不要糟糕的动效。保持静止的帧好过靠呼吸或漂移相机来维持活气的帧。停留期间唯一被许可的活气是 subtle jitter——小幅低振幅抖动让帧不显得死气沉沉也不显得虚弱当前视频工作中已在用。其余全部保持静止。3.4 内部接缝是速度匹配切镜当帧内部有接缝——场景内替换、Scene 到 Scene 的切镜、文字到文字的换行——把它做成速度匹配切镜而不是生硬的幻灯片切在峰值速度处切两侧方向和速度匹配。目录四种技法、模糊逻辑、何时用哪种在 cut-catalog.md这些 move 列在 Part 1 的Seam cuts下。从 cut-catalog 的实现细节看速度匹配的具体配方是出口power4.in与入口power4.out使用相同距离和时长——数学上就是一次power4.inOut合成的两半进入元素恰好在不存在的路径 50% 点处以完全相同速度接续例如 230px / 0.3s ≈ 切点两侧各 ~3,070 px/s而淡出在行程 ~25–30% 处即完成淡出 ≈0.18–0.3s行程 0.3–0.34s元素还在明显加速时就消失什么都不用到达画面边缘。3.5 一句话总结平滑长尾power3胜过弹跳在后 ~50% 内按旁白顺序揭示而不是前 25% 倾倒不要偷懒呼吸、不要糟糕的慢平移/慢推近——偏好静止subtle jitter 是唯一活气在峰值速度处切、方向与速度匹配→ cut-catalog.md。四、Part 3seek-safe 内核硬规则不可协商帧是一条暂停的 GSAP timeline、逐帧 seek渲染的所以实时引擎里某些连续意图在这里无法渲染——不要命名它们。这些规则与准则无关必须遵守禁止无限/永恒运动——粒子无限循环logo 永远旋转marquee 循环播放。任何活气subtle jitter、live SVG internal、有界的 bounded ambient都必须是保持期内的有限 tween绝不能是repeat/yoyo。注意 sine-wave-loop.md 本身虽是呼吸/环境动效但其实现是 GSAPsine.inOutyoyo带有限 repeat或onUpdate读取tl.time()——有限、确定性而非无限循环。禁止随机数与墙钟——不要Math.random粒子场不要Date.now漂移。每次渲染必须完全一致只命名确定性动效stagger 和任何变化都由元素索引派生。入场必须用fromTo——显式声明 from 状态使 seek 到t0时元素落在正确位置绝不要依赖 CSS 隐藏起点它在 tween 接管之前就渲染可见seek 下会闪烁。这正是 rules-index.md 契约中绝对值、绝不相对tween、immediateRender: false在重新占有目标时使用的实现理由。禁止用 CSStransition/keyframes做动效——CSS 动画跑在浏览器时钟上独立于 HF 的 seek 时钟会失步并闪烁。所有动效必须在暂停的 GSAP timeline 内驱动。只有入场 序列化揭示——没有中途退场。帧通过 harness 转场卸载被注入的transition_in就是出口。出口动效只属于最后一帧。cut-catalog.md 中 worker 构建的 seam cuts 是帧内的不是该帧的出口。4.1 禁止清单——失败模式失败模式症状修复幻灯片首要失败前 ~25% 把所有内容堆上屏内容进入后冻结没有任何东西在 VO 提示上被揭示规则 2对齐旁白的序列化揭示廉价活气圆形呼吸充当生命后半段慢平移/慢推近扰乱视线多个元素独立漂浮充当动效规则 3只做静止 subtle jitter弹跳back.out/bounce.out/elastic.out作为默认入场手敲过冲规则 1power3长尾仅明确俏皮时才过冲永远repeat/yoyoMath.random/Date.now所有元素同时进入要 sequence 或 stagger——五、在 shot 中命名动效——完整示例原文提供了一个三段式命名范例展示 move 名称 规则 id 如何落进 time-coded shot sequenceScene 10.0–1.0s纯色场主标题通过per-word staggered revealdynamic-content-sequencing以平滑长尾收敛power3入场根元素上缓慢pushmulti-phase-camera保持稳定——后半段不再重新推近。Scene 21.0–3.0s当旁白逐个说出每个能力时五个功能图标通过cluster→outward expansioncenter-outward-expansion依次揭示随后它们下方一个value-scaled countercounting-dynamic-scale向上跳动——后半段揭示对齐脚本而不是在 t0 倾倒。Scene 33.0–4.2s在结果上保持当旁白说出 payoff 词时keyword glowasr-keyword-glow落在该词上收敛并保持静止——最多subtle jittersine-wave-loop低振幅保持活气无呼吸、无漂移。每个 Scene 命名 move 规则 id接缝切镜则用cut-catalog.md让 worker 选择曲线、毫秒和 stagger——默认power3。这个示例还呼应了 SKILL.md Step 4 的 Gate 要求每个视觉帧的 time-coded shot sequence 的 reveal 必须对齐旁白、无前置堆砌且要写一个贯穿全片的## Video direction块。六、落地路径速查把上面所有引用收拢成一份仓库内导航方便在 skills/product-launch-video 与 skills/hyperframes-animation 之间来回对照用途仓库相对路径本文档运动语言本体词汇 准则 seek-safeskills/product-launch-video/references/motion-language.md帧内接缝切镜的完整配方目录四种技法 模糊逻辑 反模式skills/product-launch-video/references/cut-catalog.md有效规则名索引Step 4 中校验不要发明动效名skills/hyperframes-animation/rules-index.md每条 move 的原子配方正文worker 在 Step 5 读取并复现skills/hyperframes-animation/rules/场景形状模板blueprints其rule mapping使用同一套 move 名skills/hyperframes-animation/blueprints/ 与 skills/hyperframes-animation/blueprints-index.md缓动/交错/内置弹簧springEaseζ1 平滑收敛的实现skills/hyperframes-animation/adapters/gsap-easing-and-stagger.md帧 worker 的职责增量按 packet 内联的规则配方实现 moveskills/product-launch-video/sub-agents/frame-worker.md七、写在最后把运动语言当作团队契约HyperFrames 的运动语言设计有一个明确的分工哲学编排者命名意图worker 实现配方seek 时钟保证一致性。motion-language.md 是命名层——把金语料库真正使用的动效收敛成一个有限的、带规则 id 的词汇表rules-index.md 是校验层——防止任何人发明词汇表之外的动效名rules/ 目录是实现层——每条规则都满足 paused 单时间轴、fromTo显式起始、确定性、transform-only、有限重复这五条契约。对你而言无论你是编排者写 shot sequence还是被派发的 frame worker读 packet 实现帧只要遵守这套三层契约——用 move 名而非曲线名、平滑长尾而非弹跳、按 VO 节拍做后半段揭示、把没有动效当作合法选项、一切动效都能被 seek——产出的发布视频就会呈现一部连续影片的质感而不是一叠播放一次就冻结的幻灯片。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考