HyperFrames Animation 是一个面向 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；分析现有合成的动画映射看 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；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 Animations API（element.animate()、currentTime seek）看 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 以及在明确时间线边界处的零时长 visibility 设置，这些例外仅用于片段内的非片段元素或包装器；框架拥有 .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。