hyperframes-animation
为 HyperFrames 提供全面的动画知识库与多运行时适配器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：为 HyperFrames 提供全面的动画知识库与多运行时适配器。 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要为产品介绍页面创建一个优雅的标题入场动画，使用 GSAP 运行时。’，它会推荐 2-3 条合适的原子运动规则（如“缓入放大”和“淡入”），并生成可直接在 HyperFrames 中使用的代码片段。或者说：‘检查一下我这个场景的动画编排是否流畅。’，它会分析你的动画地图，指出可能存在的性能或时序问题。
介绍
该 Skill 旨在解决开发者在创建复杂、高性能动画时面临的挑战，如动画规则零散、跨运行时兼容性差、缺乏结构化蓝图等问题。它整合了原子级的动画运动规则、多阶段场景蓝图、场景过渡方案以及更广泛的动效设计技术。
使用时，开发者可以根据具体动画任务，灵活选择 2-4 条原子规则进行组合，或直接加载预设的多阶段场景蓝图，快速构建动画。对于特定运行时（如 GSAP、Lottie、Three.js 等），Skill 提供了详细的 API 参考，方便开发者查阅缓动函数、播放器控制、混合器使用等细节。
该 Skill 非常适合前端开发、UI 设计师、全栈开发以及任何需要在 Web 项目中实现精细动画的开发者。无论是制作文字动画、优化交互界面，还是开发需要复杂动效的 AI 应用或游戏，都能从中受益。
建议在使用时，先从简单的原子规则组合开始，熟悉 HyperFrames 的“单一暂停时间轴、可安全跳转、确定性”等原生特性。对于已有动画项目，可以利用其“动画地图”功能进行编排审计，快速定位和优化问题。
核心特点
与单一运行时动画库不同，它提供了统一的原子规则和蓝图，可适配 GSAP、Lottie、Three.js 等七种主流动画运行时，并内置了动画编排审计和 24 种预设文字动画效果。
注意事项
主要针对 HyperFrames 框架内的动画设计，不适用于非 HyperFrames 项目或需要完全自定义底层动画引擎的场景。
常见问题
这个 Skill 支持哪些动画运行时？
支持七种：GSAP（默认）、Lottie、Three.js、Anime.js、CSS Keyframes、Web Animations API 和 TypeGPU。
如何用这个 Skill 快速制作一个文字动画？
可以直接调用 Skill 内置的 24 种命名文字动画效果，或选取原子规则组合，快速应用到 HyperFrames 时间轴上。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation-x-6/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation-x-6/raw/index.md（查看排版版本）