插件安装： 在执行设置或更新命令之前，当此技能位于 HyperFrames 插件内部时，请遵循插件执行规则。独立安装则保留下面的更新说明。
HyperFrames 动画
所有运动知识集中在一个技能中：规则（原子配方）、蓝图（多阶段场景模板）、过渡（场景到场景）、技术（更广泛的运动设计模式）和适配器（按运行时划分的 API）。
关于合成契约（数据属性、子合成、确定性），请参见 hyperframes-core。
默认：组合原子规则
从 rules-index.md 中选择 2-4 条规则，用单个暂停的 GSAP 时间线将它们粘合在一起即可。这比从蓝图开始更快，产生的代码也更少。
何时加载蓝图
- 当场景与现有的预设计多阶段模板（品牌展示、社交证明等）匹配，且复用其阶段流水线能节省大量创作时间时。
- 当你需要复杂 4-5 阶段编排的可运行验证代码时。
蓝图位于 blueprints-index.md。每个条目指向 blueprints/<id>.md（配方）。不要进行推测性读取；只有在已经决定需要场景级编排时，才加载它。
路由
| 想要… | 读取 |
|---|---|
| 根据触发器/标签选择一个原子运动模式 | rules-index.md |
| 读取一条规则的完整 HTML / CSS / GSAP 配方 | rules/<name>.md |
| 选择一个多阶段场景模板 | blueprints-index.md |
| 读取一个蓝图的完整配方 | blueprints/<id>.md |
| 编写场景过渡（CSS 驱动，在两个片段之间） | transitions/overview.md, transitions/catalog.md |
| 查阅更广泛的运动设计技术 | techniques.md |
| 运动模糊——元素的快门拖影效果，以及何时不该使用它 | references/motion-blur.md |
| 分析现有合成的动画映射 | scripts/animation-map.mjs |
| GSAP API —— 时间线 / 补间 / 位置参数 | adapters/gsap.md |
| GSAP —— 即用型效果配方 | rules/gsap-effects.md |
| GSAP —— 变换 / 性能优化 | adapters/gsap-transforms-and-perf.md |
| GSAP —— 缓动 / 交错 | adapters/gsap-easing-and-stagger.md |
| GSAP —— 时间线 / 标签 | adapters/gsap-timeline-and-labels.md |
Lottie / dotLottie（After Effects 导出，window.__hfLottie） | adapters/lottie.md |
| 角色动画（行走循环、吉祥物、关节木偶、手势） | adapters/lottie.md → 角色 |
Three.js / WebGL（3D 场景，AnimationMixer，hf-seek） | adapters/three.md |
Anime.js（window.__hfAnime） | adapters/animejs.md |
CSS 关键帧（animation-delay / play-state / fill-mode） | adapters/css-animations.md |
Web 动画 API（element.animate()，currentTime 寻帧） | adapters/waapi.md |
TypeGPU / WebGPU（navigator.gpu，WGSL，计算管线） | adapters/typegpu.md |
HTML 作为纹理 + WebGL/GLSL 后期特效（通过 drawElementImage 捕获实时 DOM） | adapters/html-in-canvas-patterns.md |
命名的文本动画效果（通过外部 animate-text 技能的 24 个 ID） | adapters/animate-text.md |
选择运行时
- GSAP 是 95% 运动工作的默认选择——涵盖时间线编排、变换、缓动、交错。此技能中的所有原子规则都基于 GSAP。
- Lottie 用于资产自带预烘焙时间线（通常是 After Effects 导出）的情况，包括行走、手势或反应的角色。
- Three.js 用于 3D 场景、摄像机运动、着色器驱动的视觉效果。
- Anime.js 用于轻量级补间，当 GSAP 显得大材小用时。
- CSS 用于简单的重复图案、装饰、闪烁——没有 JavaScript 动画成本。
- WAAPI 用于原生浏览器关键帧，无需依赖 GSAP。
- TypeGPU / WebGPU 用于 GPU 渲染的画布（粒子、液体玻璃、自定义着色器）。
多个运行时可以在一个合成中共存。每个运行时将其实例注册到特定于运行时的全局变量上，以便 HyperFrames 在单次遍历中能寻帧到所有实例。
关键约束
前提条件：hyperframes-core → 不可协商的规则（单一暂停时间线，data-duration 控制长度，无 Math.random / Date.now / performance.now，无 repeat: -1，无页面加载时对后面场景的片段执行 gsap.set，无 display 或原始 visibility 补间，且不在 async / setTimeout / Promise 内构建时间线）。核心仍然允许在明确的时间线边界使用 GSAP autoAlpha 和零持续时间的可见性设置。请仅对非片段元素或片段包装器使用这些例外情况；框架拥有 .clip 的生命周期。不要在此处重述完整契约。
在核心契约基础上增加的动画制作限制：
- 预计算的布局常量——绝不要在补间执行时通过
getBoundingClientRect()获取位置。补间时的 DOM 测量会不同步，因为渲染器会并行采样；在组合设置时一次性计算坐标并复用。 - 空间运动只能使用 GSAP 变换别名（
x，y，scale，rotation）。核心的允许列表也允许对非空间属性使用opacity/color/backgroundColor/borderRadius进行补间——但绝不使用width/height/top/left进行布局更改。
脚本
node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \
--out <composition-dir>/.hyperframes/anim-map
读取在 window.__timelines 上注册的每个 GSAP 时间线，枚举补间，采样边界框，计算标志，输出 animation-map.json。用于在创作后审核编排（死区、交错一致性、生命周期警告）。
animation-map.mjs 首先从当前项目解析辅助包，然后可以引导捆绑的 HyperFrames 包版本。仅在捆绑的 CLI/技能安装之外运行技能，并且需要显式固定该引导版本时，设置 HYPERFRAMES_SKILL_PKG_VERSION=<version>。
另请参阅
hyperframes-core—— 组合结构、数据属性、子组合、确定性渲染契约hyperframes-creative—— 调色板、排版、叙述、节奏规划（非动画创意指导）hyperframes-cli——npx hyperframes lint / check / snapshot / preview / render