Communitygithub.com

heygen-com/hyperframes

GATEWAY — 在编排任何 HyperFrames 动画或视频之前请先加载此技能。这个高级运动法则能让多场景视频感觉像一次连续的摄像机运动,而非一堆独立动画的幻灯片。涵盖向量法则、电影流向、载体元素、因果运动、接缝门、禁止空转摆动、高潮前静止以及持续运动路径。

hyperframes 是什么?

Motion Doctrine (Gateway) 是 HyperFrames 动画系统的核心运动法则,它在所有动画创作前定义场景间的运动连续性。该技能的核心是向量法则:场景 A 的退出方式决定了场景 B 的进入方式——同轴、同方向、匹配速度,且必须在双方运动中切出。它引入了“流向”概念,将单个主导方向(默认向左)作为叙事中性进度,其他方向保留用于特定含义(向上表示揭示,Z 向前表示深入等)。为了强制执行这些规则,系统使用向量总账(`ledger.json`)和自动化接缝门验证器(`scripts/seam-stamp.mjs` 和 `scripts/seam-gate.mjs`),确保每个接缝符合向量一致性、零重叠和载体连续性。此外,该技能还规定了场景内持续表演的要求:禁止无意义的空转摆动(呼吸、浮动、漂移),所有时间要么分配持续运动路径(分阶段揭示、有意图的摄像机运动、序列化 UI 生命、动画序列、光标引导动作),要么添加更多叙事内容。它适用于 HyperFrames 框架(动画叙事的 React 组件),并作为所有下游运动技术技能(`cut-the-curve`、`oversized-cursor`、`seam-craft`)的网关,其规则覆盖通用/上游运动指南。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/.agents/skills/motion-doctrine

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

运动法则(网关)

在编排任何动画之前请先阅读此内容。它决定了每个接缝处会发生什么以及每个场景如何表演;技术技能负责实现它。这些法则覆盖通用/上游运动指南。此法则防止的失败:孤立创作的场景——眼睛的动势在每个镜头切换处消亡,且场景在进入和退出之间原地晃动。

路线图

决策(本技能)实现技能
接缝过渡选择 + 参数 + 代码cut-the-curve §1–5(目录)
文本/元素进入级联cut-the-curve §6(瀑布式进入)
场景内组重新定位(无切换)cut-the-curve §7(微调曲线)
光标引导动作 / 场景触发 / 变形启动oversized-cursor
接缝渲染机制 / 白色闪烁防护seam-craft
产品发布 / 解说 / 字幕工作在上游技能基础上覆盖 text-beat-economics、brand-faithful、captions-overlay

创作顺序:向量总账 (ledger.json) → 从中标记主接缝 (scripts/seam-stamp.mjs --ledger ledger.json --write index.html) → 每阶段持续运动路径 → 载体和原因 → 构建组件 → 验证 (scripts/seam-gate.mjs)。 仅手动创作 Tier A 变形/匹配切换;标记的接缝在构造上通过关卡。


第 1 部分 — 接缝法则

向量法则

场景 A 的退出方式决定了场景 B 的进入方式:同轴、同方向、匹配速度,在双方运动中切出。

  1. 轴 — x 保持 x,y 保持 y,Z 保持 Z。切勿在切换时交换轴。
  2. 方向 — 切勿镜像。在 Z 轴上,方向 = 缩放变化的符号:放大 = 推进(摄像机向前),缩小 = 拉回(摄像机向后)。一个缩小的退出接一个从小放大的进入是镜像向量——最常见的违规,因为从小放大是默认的元素进入方式。
  3. 速度 — 进入初始速度 ≈ 退出最终速度,通过镜像缓动(退出 power4.in + 进入 power4.out,相同距离和持续时间;进入方在概念路径的 ≥50% 处接手)。机制详见 cut-the-curve。
  4. 相位 — 切换落在双方的运动过程中。在切换前停下休息,或切换后从静止开始,都是死拍。

流向

每个影片选择一个主导方向(房子默认:向左)。每个普通接缝都使用它。其他向量是保留的——使用一个意味着什么:

向量含义
流向(向左)"下一个节拍" — 中性前进进度
向上提升 — 结论或揭示高于先前内容
Z 向前(缩放穿越)深入同一个想法
Z 向后(反向缩放)到达 — 更大事物降临
缩放爆发(向外炸开)离开一个世界 — 表面炸过摄像机
  • 切勿连续运行相反方向的接缝 — 乒乓切换读作错误。
  • 方向变化需要有可见原因(点击 / 弹跳 / 撞击)或章节边界。

向量总账

在创作任何主时间线之前,将其写为项目根目录下的 ledger.json(模式:references/seam-gate.md)。每接缝一行:切换时间、退出和进入向量(轴 + 有符号方向;Z 行携带缩放符号)、选择器、技术。退出和进入必须匹配;如果某行不匹配,修复计划,而非缓动。验证器在任何运行时采样之前静态检查行一致性。

载体

眼睛跟随对象,而非抽象。最强的接缝在匹配的位置和速度下将一个具体载体传递过切换:一个中途的鼠标光标、一个收缩/停靠到下一个布局的容器、一个飞入其确切位置的标记、一个瀑布式切换的词组。如果没有自然载体,场景主角来承载(部分移动 + 早期淡入,中途进入)。切勿使用交叉淡入淡出——它根本没有载体。

因果运动

链接运动,使每个动作明显由上一个启动:点击 → 压扁 → 释放弹力 → 飞行 → 撞击 → 回弹 → 揭示。

  • 效果在引起它的帧开始 — 相同的时间轴位置,切勿“稍后”。
  • 反应与隐含质量成比例:大元素反弹较慢,小元素快速弹回。
  • 一个力是改变方向的许可;无原因的翻转就是乒乓。

接缝门(构建关卡 — 运行验证器,退出码 0 否则接缝未完成)

node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html  # 生成
node <SKILL_DIR>/scripts/seam-gate.mjs verify --ledger ledger.json --project .  # 验证

该脚本(用法 + 总账模式:references/seam-gate.md)数值上强制每接缝:总账行一致性、退出在切换时仍在移动、进入中途飞行(绝非静止开始)、测量方向 = 总账方向、进入/退出速度匹配(警告)、零重叠(每帧一侧可见 — 切换不是溶解)、Z 符号规则(d(scale)/dt 两侧符号相同;进入场景自身的进入被扫描以寻找符号冲突),以及载体矩形连续性与祖先缩放包含。当创作总账时,使用 seam-gate.mjs probe --t <cut> 查找每接缝的真实载体选择器。

脚本无法检查的规则 — 仍然属于你:

  1. 编辑重新打开接缝。 对场景首/末 ~1s 的任何更改(包括为新的配音重新定时)都会使该边界的审计失效 — 重新运行验证器。
  2. 音频是时钟。 根据配音的真实词时间戳重新定时场景;切勿为了适应时间段而加快朗读。配音重新生成会重新打开其接缝。
  3. 剪裁-门控陷阱(导致零重叠失败的常见原因):一个 data-start 早于其进入补间的剪裁在初始不透明度下未被隐藏 — 设置初始 autoAlpha: 0 AND data-start = 切换时间,绝不能更早。

第 2 部分 — 表演(场景持续表演)

禁止空转摆动

空闲的正弦循环(呼吸、漂浮、漂移、脉冲辉光)被禁止作为持续运动——它们读作“视频在等待”。一个完成进入后还剩几秒的场景是规划错误:添加故事,而非摆动。进入和退出之间的每个阶段由以下路径之一拥有(在计划中命名路径):

路径内容
分阶段揭示保留内容;在叙述节拍上回报它们——画面持续获取信息(默认用于 ≥2 个内容组)
有意图的摄像机一个有映射的缩放+平移路径:建立广角 → 移动 → 到达主体
序列化 UI 生命产品随时间表现:进度前进、高亮步骤、计数滴答
动画序列元素表演一个节拍:卡片归档到堆栈、项目被拖拽、结果组装
光标引导动作一个超大光标引导眼睛到触发器;其点击点燃下一个节拍 (oversized-cursor)

测试:暂停任一秒——必须有有意义的事物正在中途(一个揭示正在降落、摄像机正在移动、UI 正在做叙述所说的事情)。

高潮前静止

在主要动作及其结果之间安排一个 0.3–0.75s 暂停——戏剧性的逗号。一个从动作直接跳到结果的场景会失去它。

定时意图

  • 单一进入 ≤ ~800ms;更长的构建 = 多元素交错,而非一个慢元素。
  • 退出 ≈ 进入的 75%。例外:cut-the-curve 反转此规则(进入 ~127% 退出)。
  • 总交错 ≤ 500ms;有 8+ 元素时,收紧每项延迟或交错前几个。
  • 禁止的缓动:bounce.out / elastic.out。进入超调 back.out(1.4–1.7) 没问题。
  • 相似元素共享一个缓动+持续时间意图 — 切勿每个元素有唯一的一对。

过渡词汇

每部影片只使用 2–3 种场景间过渡并重复使用它们;默认边界是沿着流向方向的 cut-the-curve。手动创作的共享元素变形(intent: morph)不计入预算。


反模式

不要这样做应该这样做
孤立地创作每个场景的进入先写向量总账
场景间交叉淡入淡出在流向方向使用 cut-the-curve
退出完成,然后场景变化在双方运动中切出
切换后从静止开始进入在概念路径的 ≥50% 处进入
反向缩放退出 → 从小放大进入(或推进 → 超大回缩)匹配缩放速度符号(接缝门 7)
进入场景自身的弹出介绍在 Z 接缝交接下保持其开场帧已组合,或匹配符号
空转摆动 / 呼吸 / 浮动来填充时间分配持续运动路径;或添加故事
无原因的方向翻转消耗一个力,或保持流向
保留向量用作多样性默认流向;在意义上花费它们
反应在其原因之后几帧同帧点燃
动作直接跳到结果安排高潮前静止(0.3–0.75s)

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

相关技能