hyperframes-animation
HyperFrames动画知识库，提供原子级动画规则、场景蓝图与多运行时适配器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：HyperFrames动画知识库，提供原子级动画规则、场景蓝图与多运行时适配器。 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要一个产品卡片悬停时，图标轻微弹跳并伴随文字渐显的效果，请用HyperFrames的原子规则组合实现。’ 它会提供2-4条合适的运动规则（如“弹性缩放”、“淡入”）及其组合代码。或者
对AI说：‘帮我加载一个“页面过渡-淡入缩放”的场景蓝图，并适配到CSS Keyframes。’ 它会生成相应的多阶段动画蓝图代码。
介绍
该Skill旨在解决前端开发者在实现复杂、高性能动画时面临的挑战，如动画代码难以维护、跨运行时兼容性差、以及缺乏系统性的动画设计方法。它提供了一个结构化的动画知识库，包含原子级运动规则、多阶段场景蓝图、场景过渡方案以及更广泛的动效设计技巧，并集成了七个主流动画运行时的适配器（GSAP、Lottie、Three.js等）。用户可以根据任务需求，组合2-4条原子规则来构建动画，或直接加载预设的场景蓝图，也可以查阅特定运行时的API参考（如GSAP的缓动函数）。此外，它还支持对现有动画编排进行审计，并提供24种命名文本动画效果。
使用方式非常灵活。对于简单的交互动画，你可以选取几条原子规则（如“淡入”和“向上滑动”）进行组合。对于复杂的多步骤场景动画，可以直接调用预制的“场景蓝图”。当需要针对特定动画库（如Three.js）进行优化时，可以查阅对应的运行时适配器文档。所有动画都基于HyperFrames原生架构，具有单一暂停时间线、安全跳转和确定性播放的特性。
它非常适合需要精细控制动画效果、追求代码可维护性，或在项目中混合使用多种动画技术的前端开发者、UI设计师和动效设计师。对于全栈开发者和产品经理而言，它也能帮助快速原型化复杂的交互流程，或统一团队内的动画设计规范。
使用建议：建议先从“原子规则”入手，理解基础运动原理，再尝试组合。在复杂项目中，优先使用“场景蓝图”可以保证动画逻辑的一致性。注意，虽然它支持多个运行时，但深度功能可能仍需参考各运行时的官方文档。对于追求极致轻量级（如仅需CSS动画）的简单场景，可能有些“杀鸡用牛刀”。
核心特点
与单一动画库Skill不同，它提供了一套跨运行时的统一动画抽象层和设计方法论，允许开发者在GSAP、Lottie、CSS等多种技术栈间使用同一套规则和蓝图，并内置了动画编排审计功能。
注意事项
不适合仅需极简单CSS动画或对包体积有极端要求的超轻量级项目。
常见问题
这个Skill和直接使用GSAP有什么区别？
它封装了GSAP等库，提供了更高层次的动画规则和蓝图，并能让你用同一套代码适配其他动画运行时。
能用它来制作Lottie动画吗？
可以，它包含Lottie运行时适配器，你可以使用其规则设计动画，并通过适配器输出为Lottie兼容的格式或控制Lottie播放器。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation-x-3/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation-x-3/raw/index.md（查看排版版本）