HyperFrames 运动语言规范为无脸讲解视频设计可复现的 GSAP 镜头运动体系【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文是 HyperFramesfaceless-explainer技能SKILL.md中Step 4视觉设计的运动层规范解析。它定义了一整套命名式运动词汇表move vocabulary、四条运动教条motion doctrine与三条seek-safe 核心硬规则让 Agent 在编写帧的时间编码镜头序列时只按角色/动作名命名运动并引用规则 ID而把曲线、毫秒与 stagger 公式交给帧工人frame worker在 Step 5 落地。读完本文你将掌握如何在 HyperFrames 的讲解视频中写出像一部连续电影、而非一页页幻灯片的运动设计并能正确规避最典型的 Agent 制作失败模式。在 HyperFrames 的 faceless-explainer 工作流中Step 4 的产出是把故事板每一帧写成带时间码的镜头序列time-coded shot sequence运动语言文档正是这一步骤的字典它为每个场景的运动命名并把名字映射到 hyperframes-animation 规则库中可执行的规则配方。设计者不负责具体的 GSAP 缓动曲线、毫秒数或 stagger 公式——这些由帧工人在 Step 5 根据规则正文rules/id.md复现设计者只需在镜头序列中写出动作名并附上→后的规则 ID。帧与帧之间的转场也不属于运动设计者的职责故事板通过transition_in命名转场由装配器harness注入这个注入的转场本身就是该帧的出口。一、运动词汇表Part 1一套与规则库一一对应的命名调色板编写镜头序列时从下面这张调色板中选取与节拍匹配的动作跨场景组合 2–4 个入场 → 顺序揭示 → 稳定而非一次性全部上屏。蓝图库blueprints中的rule mapping使用同一套命名——设计者与实现者共享同一张调色板。1.1 动能排版Kinetic type动作名行为描述规则 IDhard-cut / flash word-swap单词或一行在瞬间剪切中替换上一内容无淡入/滚动替换本身就是节拍discrete-text-sequencein-place token cycle固定行保持不动仅其变量槽位依次更换 tokendiscrete-text-sequenceper-word staggered reveal短语逐词或逐块组装每个词落在自己的节拍上dynamic-content-sequencingkinetic beat-slam短句共享同一打击乐节拍数组逐一砸入各有独立入场最终锁定在终态这是有力/有节奏标语的标准配方kinetic-beat-slam从源码实现看dynamic-content-sequencing并非一个独立运动规则而是一个内容驱动的时间轴编排工具它把{eyebrow, title, body, speedFactor, hold}条目在构建期归约成扁平的TIMELINE每条的时长由BASE_DURATION body.length × SEC_PER_CHAR hold自动计算建议值BASE_DURATION0.6–1.5s、SEC_PER_CHAR0.03–0.06 秒/字符并用单个线性驱动器的onUpdate反向查找当前条目——只在条目切换时写 DOMlastTitle守卫避免逐帧textContent写入在 HyperFrames 渲染中闪烁。1.2 打字机Typewriter动作名行为描述规则 IDtype-on with caret文本在闪烁光标后逐字符键入discrete-text-sequencecontext-sensitive-cursor负责光标闪烁/变色backspace-and-retype一行键入后删除末尾若干词再重新键入用于错字纠正、重新框定discrete-text-sequencecontext-sensitive-cursor1.3 计数 / 数据Count-up / data动作名行为描述规则 IDvalue-scaled counter数字向上计数且字号随数值增长攀升本身构成升级感counting-dynamic-scalebars / progress / star wipe数字搭配图形填充柱高错落、进度条/圆环填充、星级评分的小数位擦除stat-bars-and-fillscounting-dynamic-scale的实现要点是两条同一时间位置、同一缓动的同步 tween一个代理值经onUpdate以Math.round(...).toLocaleString()写文本另一个用scale: START_SCALE → 1做视觉放大START_SCALE START_SIZE / END_SIZE。规则强制font-variant-numeric: tabular-nums与固定宽度容器否则 9→10→100 的位数变化会让字形宽度跳动COUNT_DUR建议 1.2–2.5s低于约 0.8s 就只是一次闪光。1.4 揭示 / 解码Reveal / decode动作名行为描述规则 ID3D char flip-decode字符 3D 翻转从乱码字形解析为真实文本解密感hacker-flip-3dSVG self-draw轮廓/图标/圆环逐笔自绘svg-path-draw1.5 镜头Camera动作名行为描述规则 IDpush / focus / drift帧根上的顺序镜头运动拉远 → 对焦 → 推近加连续微漂移电影感基线multi-phase-camerazoom-to-target放大到非居中元素缩放 反向平移保持其取景coordinate-target-zoompan / focus-lock虚拟相机变换一个.world包装器以平移/缩放/锁定到某区域viewport-changecamera-cursor-tracking视口锁定到移动焦点如打字光标静态取景后焦点锁定追踪camera-cursor-trackingmulti-phase-camera在实现上是一个包裹整个场景的div其transform: scale() translate(x, y)由单一onUpdate写者合成两条通道相位缩放PHASE_1_SCALE→PHASE_2_SCALE→PHASE_3_SCALE三段式拉远/对焦/推近与正弦微漂移X、Y 频率比约 1.3避免 1:1 产生机械的正对角线。四条标准相位模式为Focus-in后拉→中性→轻微推近、Dramatic reveal推近→中性→回拉、Steady push持续前推、Bookend pull中性→强推→回弹。关键约束包括相机必须包裹场景内所有元素、相位缩放 1 时.scene必须overflow: hidden、场景背景放在.scene而非.camera上。1.6 布局运动Layout motion动作名行为描述规则 IDcluster→outward expansion元素先聚拢在中心再同步向外扩张至最终位置center-outward-expansionorbit元素从 3D 空间翻入并在椭圆轨道上持续环绕入场在轨道位置就地翻转orbit-3d-entrysplit-tilt cards两张卡片并排、绕 Y 轴反向倾斜分别从各自一侧入场对比/前后效果split-tilt-cardslogo/avatar ring connectors头像/Logo 位于椭圆环上以 SVG 连线连接到中心点错落入场avatar-cloud-network1.7 表面 / UISurface / UI动作名行为描述规则 ID3D page-scroll reveal整页网页作为倾斜 3D 卡片内部内容滚动揭示特定区块3d-page-scrollcursor click ripple光标移到目标、随点击下压并发出扩散涟漪cursor-click-ripplebutton press触感按压压缩后弹簧恢复可选释放爆点/辉光press-release-spring点击同时压缩光标目标则用physics-press-reactionkeyword glow关键词在 attack-decay-rest 包络上点亮辉光缩放变色与词轨同步asr-keyword-glow1.8 形变 / 交接Morph / handoff动作名行为描述规则 IDscale-swap两个同屏中心的元素交接出场簇缩小淡出入场簇到达scale-swap-transitioncard morph-anchor容器在两个镜头间形变表观尺寸圆角表面质感再淡出揭示其下的真实目标HyperFrames 用统一的scale而非width/heightcard-morph-anchorcard-morph-anchor之所以必须用scale是因为规则契约rules-index.md明令禁止width/height/top/left补间——它们会触发逐帧布局重排破坏 seek 确定性统一用 scale/translate 代理、遮罩或anchored-layout-expand替代。1.9 无缝剪切Seam cuts帧工人构建于帧内帧工人frame worker在帧自身的 Scene 之间编写的速度匹配剪切。在镜头序列中命名接缝即可配方在目录 cut-catalog.md 中而非单个规则 ID动作名行为描述zoom-through / inverse zoom-through帧内 Z 轴交换正向读作穿越推进反向读作抵达收获感cut-the-curve场景到场景的剪切两侧同方向、同速度运动waterfall cut词粒度的 cut-the-curve文本到文本接缝上的一道波浪需要特别澄清cut-catalog.md中的这三个名字cut-the-curve / inverse-zoom / waterfall不是合法的transition_in取值——帧间转场由故事板通过transition_in命名由装配器从独立的转场注册表词汇crossfade/blur-crossfade/push-slide/zoom-through/squeeze中注入。zoom-through同时存在于两个世界在转场注册表里是整帧包装器转场在目录里是元素级 Z 剪切——同一思想不同作用域。目录中的四种技巧共享同一底层原则在峰值速度处剪切剪切两侧匹配方向与速度。差别只在轴、作用域与粒度。选择规则未完成的短语跨多个视觉场景构建同一更大观点用 cut-the-curve / waterfall状态变更进入视频的新章节用 zoom-through抵达/收获节拍用 inverse zoom-through。Z 轴变体统一适用模糊逻辑文本级主体峰值模糊10px20px 会让字形糊成不可读整帧表面终端窗口、卡片、截图18–20px剪切两侧使用相同峰值模糊且模糊施加在包装器而非单个子元素上。1.10 强调 / 标记Emphasis / marker动作名行为描述规则 IDhighlight / circle / burst / scribble词或元素上的手绘强调黄色高亮扫过、手绘圆圈、放射爆点、涂鸦或粗糙描边轮廓css-marker-patterns1.11 稳定帧的活性Aliveness during a hold务必克制——见 Part 2动作名行为描述规则 IDsubtle jitter让已稳定的帧保持活着的合规手段稳定元素上的小幅、低振幅位置/缩放抖动。这是看起来活但不见弱的运动图形技巧sine-wave-loop低振幅档位live SVG internals内部 SVG 部件运动让图标显得有生命旋转指针、摆动叶片、脉动圆点、流动虚线之所以允许是因为主体在做某事而非卡片在呼吸svg-icon-enrichmentfinite bounded ambient仅在一个稳定的主角上做单次有界呼吸/漂移且只在确实需要时被刻意降权——优先顺序揭示或 jittersine-wave-loopsine-wave-loop的实现给出了两条路径独立属性用sine.inOutyoyo: true有限repeat次数的 yoyo 形式需要叠加到其他活值上时用单个ease: none驱动器把相位代理0 → 2π·CYCLESonUpdate中Math.sin(phase)映射进变换。振幅规范严格SCALE_AMP默认 0.008–0.015、Y_AMP_PX默认 2–3px、周期 1.5–3s多元素并发时每元素振幅 ≤ 默认值/√N 且错开周期。规则首行即标注最后才用这个Reach for this last。1.12 新增动作由本地规则支撑的五个扩展以下是黄金语料库需要、已补入 hyperframes-animation/rules/ 的五个动作补全了上述词汇表动作名行为描述规则 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四条承重规则这四条规则是严肃讲解片与Agent 做的 PowerPoint之间的分水岭文档明确标注load-bearing承重——拿不准时按它说的做。2.1 平滑胜过弹跳——power3是默认元素应使用长尾减速曲线平滑稳定下来多数情况power3就足够了。默认不使用弹跳、过冲、back.out/bounce.out/elastic.out。弹跳是用户自制 Remotion / HyperFrames 视频的第一大劝退因素而 Agent 几乎从不能把它做好——它以为弹跳增加强调实则牺牲了整洁。严肃的动态设计机构感受相同。平滑永远赢。过冲被降级为罕见、明确俏皮的例外消费级/娱乐 Logo 砸入、刻意钟声敲击绝非整体风格。命名意图为长尾稳定帧工人映射power3快速到达可用expo.out。见 spring-pop-entrance.md——它现在以平滑稳定为先导。该稳定的精确形式是临界阻尼弹簧帧工人内置一个 seek-safe 的springEaseζ1位于 gsap-easing-and-stagger.md 的 Spring Eases 一节供稳定本身成为主角时使用。真实物理同一教条——不是弹跳的许可证。从适配器源码看springEase是阻尼弹簧位置曲线的闭式解作为纯进度函数pure function of progress打包成 GSAP ease——无状态、无可反序列化偏移、天然 seek-safe。这也解释了为何实时弹簧库状态积分器被禁止交互式弹簧逐帧累积速度要渲染第 N 帧必须模拟第 0…N−1 帧无法确定性 seek。参数上dampingFraction 1.0默认ζ1为无过冲的临界阻尼0.80–0.85 对应 iOS 系统级约 1–1.5% 过冲有活力但不弹跳0.60–0.70 才进入明确俏皮区5–10% 过冲低于 0.55 是禁止的卡通晃动区。使用要点duration 与 ease 都从 helper 取——稳定时间本身就是物理的一部分改速度请调response而非覆盖 duration。2.2 后半段 ~50% 顺序揭示与配音对齐这是反 PowerPoint 的机制比把发展放在中间更锐利不要在场景前 ~25% 就把所有内容倒上屏。开头把所有内容抢着进完正是幻灯片感的来源。配音提到什么才揭示什么——一行、一张卡、甚至一个 h1都在场景后 ~50%按序揭示。Agent 工作量相同但剪辑变得连贯并拥有节奏。少即是多。屏幕上更少的元素、各自踩在配音节拍上到达好过一整屏动画一次然后冻结。实操上帧的镜头序列几乎不前置任何内容——入场只携带 t0 时配音正在说的内容其余元素在时间线上等待各自的台词提示。一个揭示对应 Part 1 中的一个发展类动作per-word staggered reveal、cluster→outward expansion、一次count-up、一个与词轨同步的asr-keyword-glow。2.3 不要惰性呼吸、不要糟糕的平移/推近——宁无运动不要坏运动Agent 伪装活性的两种反射性手法都显得廉价不要惰性呼吸。把卡片/文本循环放大缩小来装活是最廉价的特征性败笔。不要后半段糟糕的慢平移/推近。在场景后 ~50% 对元素做慢速平移或推近会扰乱观者视线并造成眼部不适——它是在主动把帧变差而不是变好。两者的修复相同让元素揭示与脚本节奏对齐规则 2。总原则我宁愿没有运动也不要坏运动。一个静止的帧好过一个靠呼吸或漂移镜头维持活的帧。稳定期间唯一合规的活性是细微抖动subtle jitter——小幅、低振幅的抖动让帧不死板且不显弱当前视频作品正在使用。其余一切保持静止。2.4 内部接缝是速度匹配的剪切当帧有内部接缝——帧内交换、Scene 到 Scene 的剪切、文本到文本的行变更——把它做成速度匹配剪切而非生硬的幻灯片剪切在峰值速度处剪切两侧匹配方向与速度。目录四种技巧、模糊逻辑、何时用哪种是 cut-catalog.md动作列于 Part 1 的 Seam cuts 一节。以 cut-the-curve 为例的实现细节场景 A 的主角若向左滑出x: 0 → -230场景 B 的主角从右侧进入继续向左滑x: 230 → 0。最干净的匹配是出口power4.in与入口power4.out使用相同距离与时长——数学上是同一个power4.inOut合成曲线的两半入场元素恰好在名义路径 50% 点以相同速度接续如 230px/0.3s ≈ 3070 px/s。淡出技巧出口透明度在行程约 25–30% 时完成淡出约 0.18–0.3s 对运动 0.3–0.34s——元素仍在可见加速中消失无需到达帧边缘。最后淡出的元素必须恰好在硬剪切点死掉——无物移动的空隙读作尴尬的死空。单行总结平滑长尾power3胜过弹跳后半段 ~50% 按配音顺序揭示而非前 25% 全倒不要惰性呼吸、不要糟糕的慢平移/推近——偏好静止细微抖动是唯一活性在峰值速度处以匹配的方向与速度剪切→ cut-catalog.md。三、seek-safe 核心Part 3硬性规则帧是暂停的 GSAP 时间轴逐帧 seek因此实时引擎中一些连续意图无法渲染——不要命名它们。这些规则无论教条如何都不可协商禁止无限/永恒运动——粒子无限循环Logo 永远旋转跑马灯循环。任何活性细微抖动、活动 SVG 内部件、必要的有界环境运动都是稳定期上的有限补间绝不用repeat/yoyo做无限循环。禁止随机与墙钟时间——不要Math.random粒子场、不要Date.now漂移。每次渲染必须完全一致只命名确定性运动stagger 与任何变化均从元素索引派生。入场使用fromTo——显式声明 from 状态使 seek 到 t0 时元素落在正确位置绝不依赖 CSS 隐藏的起始状态它在补间认领前就可见渲染seek 下会闪烁。运动禁止 CSStransition/keyframes——CSS 动画跑在浏览器时钟上独立于 HF 的 seek 时钟会失步并闪烁。所有运动都驱动在暂停的 GSAP 时间轴内。只做入场与顺序揭示——没有视频中段的退场。帧通过装配器转场卸载注入的transition_in本身就是该帧的出口。出口运动只属于最后一帧。帧工人构建的接缝剪切见 cut-catalog.md属于帧内不是帧的出口。规则契约rules-index.md为每条规则补充了统一前提单一暂停 GSAP 时间轴注册在window.__timelines绝不自播、绝无第二条时间轴fromTo显式 from 状态 绝对值禁用相对补间、immediateRender: false仅当重新认领目标确定性无Math.random/Date.now仅索引派生伪随机与烘焙计划有限重复只动 transform 与纯绘制属性群组 stagger 封顶使一次到达读作一个节拍items × stagger ≤ ~0.5s多元素并发时will-change: transform提示合成器。禁止项——失败模式清单失败模式症状修复幻灯片首要失败模式前 ~25% 把一切倒上屏内容进入后冻结没有元素在配音提示上揭示规则 2顺序揭示与配音对齐廉价活性循环呼吸冒充生命后半段慢平移/推近扰乱视线许多元素各自漂浮冒充运动规则 3静止 仅细微抖动弹跳back.out/bounce.out/elastic.out作默认入场手调过冲规则 1power3长尾过冲仅在明确俏皮时始终无repeat/yoyo无Math.random/Date.now禁止所有元素同时入场顺序或 stagger—镜头序列中的运动命名——完整示例Scene 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结果保持配音说出收获词时keyword glowasr-keyword-glow落在那词上稳定并保持静止——至多subtle jittersine-wave-loop低振幅维持活性无呼吸、无漂移。每个场景命名动作 规则 ID接缝剪切则为cut-catalog.md让帧工人选择曲线、毫秒与 stagger——默认power3。四、落地建议从命名到实现的职责边界结合 SKILL.md 的 Step 5 流程可以看到这套体系的工程化闭环Step 4 产出时间编码镜头序列后frame-packets.mjs 为每帧构建有界数据包——包含该帧的故事板块、蓝图正文与每条被引用规则配方的内联副本帧工人只读自己的数据包与frame.md绝不打开STORYBOARD.md或技能文档。这意味着运动语言文档中命名的每个动作最终都以完整的规则正文而非动作名到达帧工人手中——复现动作而非根据名字猜测。设计者可以放心地只写→后的规则 ID不必担心歧义。实践中的三条建议组合而非堆砌每个镜头跨场景组合 2–4 个动作入场 → 顺序揭示 → 稳定把词汇表当成一套可组合的积木而不是每个场景塞满所有效果。教条优先于炫技拿不准时回到 Part 2 的四条承重规则——平滑、顺序揭示、静止偏好、速度匹配剪切。它们是像电影而非像幻灯片的根本保证。遵守 seek-safe 红线任何无限循环随机数CSS 动画的念头都要先经过 Part 3 的过滤——HyperFrames 的渲染是暂停时间轴逐帧 seek违反红线的效果会在 seek 时闪烁、失步或渲染结果不一致无法通过 check 与快照审查snapshot 联系图的质量关。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考