插件安装： 在执行设置或刷新命令之前，如果此技能位于 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 Animations 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 |
命名的文本动画效果（24 个 ID，通过外部 animate-text 技能） | 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