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 查找） | 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