HyperFrames Animation 是一个面向 HyperFrames 动画制作的知识型技能，把运动设计所需的规则、模板、转场、技法和运行时适配集中在一处。
一、用途 为 HyperFrames 组合（composition）提供可查、可复用的动画编写指导，覆盖从单条运动规则到多阶段场景编排的完整层次，并说明在不同渲染运行时下如何实现动画。
二、主要能力
- 原子规则（rules）：按触发器或标签选择单条运动模式，每条规则带有完整的 HTML/CSS/GSAP 配方。
- 蓝图（blueprints）：多阶段场景模板，如品牌揭示、社会证明等；每个条目指向独立配方文档，提供复杂 4–5 阶段编排的可运行参考代码。
- 转场（transitions）：两个片段之间由 CSS 驱动的场景切换，含概览与目录。
- 技法（techniques）：更广泛的运动设计模式。
- 运行时适配（adapters）：GSAP（时间线、补间、位置参数、效果配方、变换与性能、缓动与交错、时间线与标签）、Lottie/dotLottie（After Effects 导出、window.__hfLottie）、Three.js/WebGL（3D 场景、AnimationMixer、hf-seek）、Anime.js（window.__hfAnime）、CSS 关键帧（animation-delay/play-state/fill-mode）、Web Animations API（element.animate()、currentTime 定位）、TypeGPU/WebGPU（WGSL、计算管线）、HTML-as-texture 与 GLSL 后处理，以及通过外部 animate-text 技能提供的 24 个命名文字动画效果。
- 脚本 animation-map.mjs：读取 window.__timelines 上注册的所有 GSAP 时间线，枚举补间、采样包围盒、计算标记，输出 animation-map.json，用于编写后审计编排（死区、交错一致性、生命周期警告）。
三、使用方式 默认路径是组合原子规则：从 rules-index.md 挑选 2–4 条规则，用一条暂停的 GSAP 时间线粘合。当场景匹配已有预设计的多阶段模板，或需要复杂编排的可运行基准代码时，加载 blueprints-index.md 中的蓝图。按任务查阅对应文档：选原子模式看规则索引，读单条规则看 rules/<name>.md，选多阶段模板看蓝图索引，编写场景转场看 transitions 目录，查运动技法看 techniques.md，分析现有组合的动画图使用脚本。 运行时选择上，GSAP 是约 95% 运动工作的默认选择，覆盖时间线编排、变换、缓动、交错；Lottie 用于带预烘焙时间线的素材（通常为 After Effects 导出）；Three.js 用于 3D 场景、相机运动与着色器视觉；Anime.js 用于轻量补间；CSS 用于简单重复纹样、装饰、闪烁等无需 JavaScript 动画开销的场景；WAAPI 用于不依赖 GSAP 的原生浏览器关键帧；TypeGPU/WebGPU 用于 GPU 渲染画布（粒子、液态玻璃、自定义着色器）。多个运行时可在同一组合中共存，各自把实例注册到对应全局对象，以便 HyperFrames 一次性定位全部实例。
四、适用场景 适合使用 HyperFrames 制作动效视频、品牌揭示、社会证明等分阶段场景动画，需要在多种动画技术栈之间做选型，或需要审计已有组合动画编排的人。
五、限制与约束 该技能以 hyperframes-core 的不可协商规则为前提：单一暂停时间线、时长由 data-duration 决定、禁止 Math.random/Date.now/performance.now、禁止 repeat: -1、禁止对后续场景片段使用 gsap.set、禁止 display/visibility 动画、禁止在异步/setTimeout/Promise 内构建时间线。动画层面额外要求：布局常量须预计算，不得在补间时用 getBoundingClientRect() 推导位置（并行采样会导致失同步）；空间运动只使用 GSAP 变换别名（x、y、scale、rotation），非空间属性可补间 opacity/color/backgroundColor/borderRadius，但绝不能用 width/height/top/left 做布局变化。官方页面未提供收费、价格或平台支持等更多信息。