hyperframes-animation作者 HeyGen

HyperFrames Animation Skill.

适用于 Claude Code 和 Codex 的动效与视频 skill：动画规则、场景蓝图、过渡效果以及 HyperFrames 的运行时适配器。

Motion & Video
Video

heygen-com/hyperframes · skills/hyperframes-animation/SKILL.mdSKILL.md

--- name: hyperframes-animation description: All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie … --- ## Default: compose atomic rules ## Load a blueprint when ## Routing ## Picking a runtime ## Critical Constraints ## Scripts

前置信息和章节标题读取自上游文件，日期为 2026-09-14 · 完整内容共 7,755 字符

01 功能说明

hyperframes-animation Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

为 HyperFrames 提供全部动效知识：原子运动规则、多阶段场景蓝图、场景转场、动效设计技巧，以及七种运行时适配器（默认 GSAP，外加 Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU）。用户可挑选 2-4 条原子规则，用单个暂停的 GSAP 时间线将其组合，也可加载多阶段蓝图以编排复杂的 4-5 阶段动作，或查阅特定运行时的 API。

同时涵盖通过 animation-map.mjs 审计现有编排，以及 24 种命名文字动效。GSAP 是 95% 动效工作的默认选择，涵盖时间线编排、变换、缓动与错峰（stagger）。一切均以 HyperFrames 原生方式实现：单个暂停时间线、可安全跳转（seek-safe）、确定性。

它产出什么

包含编排审计数据的 animation-map.json，涵盖死区、错峰一致性和生命周期警告

查看示例提示词 ↗

工作方式

01
挑选并组合原子规则
从 rules-index.md 中选择 2-4 条规则，并用单个暂停的 GSAP 时间线将其拼接在一起。这是默认工作流，比从蓝图开始更快。
02
为多阶段场景加载蓝图
当场景与现有预设模板（如 brand-reveal 或 social-proof）匹配时，从 blueprints-index.md 加载其配方以复用其阶段流水线。
03
查阅特定运行时的 API
使用路由表查找 GSAP 缓动与时间线控制、Lottie 播放器方法、Three.js mixer API，或其他所需的运行时专属文档。
04
使用 animation-map 审计编排
运行 animation-map.mjs 以读取每个 GSAP 时间线、枚举 tween、采样边界框（bbox）、计算标记，并输出 animation-map.json，用于审计死区和错峰一致性。

02 找到适合场景

何时使用 hyperframes-animation Skill

当任务是这类动态与视频时，在 Claude Code 或 Codex 中使用 hyperframes-animation skill。适用范围和限制取自该 skill 自己的文件。

适合场景

从 rules-index.md 中按触发条件或标签选取的原子运动模式
两个片段之间由 CSS 驱动的场景转场
使用 Three.js 实现的 3D 场景、镜头运动与 shader 驱动的视觉效果
使用 TypeGPU 实现的 GPU 渲染画布，包含粒子、液态玻璃或自定义 shader

了解边界

为布局变化对 width、height、top 或 left 进行动画处理

需要提供的信息

组合目录运行 animation-map.mjs 审计编排时，提供组合目录的路径。
蓝图 ID当你的场景匹配多阶段模板时，提供 blueprints-index.md 中的蓝图 ID 以加载其完整配方。

03 Skill 内部

hyperframes-animation Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

预先计算布局常量
绝不要在 tween 执行时通过 getBoundingClientRect 推导位置。
空间运动仅使用 GSAP 变换别名
所有空间运动使用 x、y、scale、rotation。切勿为布局变化动画 width、height、top 或 left。
GSAP 是默认运行时
GSAP 是 95% 动效工作的默认选择，覆盖时间线编排、变换、缓动以及 stagger（错位动画）。此 skill 中的所有原子规则均基于 GSAP。
默认按原子规则组合
从 rules-index.md 中选取 2-4 条规则并进行组合。这比从 blueprint 开始更快，生成的代码也更少。
多种 Runtime 可以共存
多个运行时可以在一个组合中共存。每个运行时在特定于运行时的全局对象上注册其实例，这样 HyperFrames 就能一次性查找所有实例。
请勿投机式解读 Blueprint
不要投机性地读取 blueprint 文件；只有在已经确定需要场景级编排时才加载它。
允许非空间属性
该白名单允许对 opacity、color、backgroundColor 和 borderRadius 等非空间属性进行动画过渡，但绝不允许对 width、height、top 或 left 等布局属性进行改动。

04 投入使用

在 Claude Code 或 Codex 中安装 hyperframes-animation

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 hyperframes-animation 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

用于 skills/hyperframes-animation/SKILL.md 的通用 skills CLI 形式；该仓库可能会自行说明其路径。

给 Skill 一个首次动效和视频任务

按 skill 自身的术语撰写；把括号中的部分换成你的内容。

Starter prompt

Build a brand-reveal scene for [product name] using the multi-phase blueprint. The hero text should fade in with elastic ease at y:40, followed by a product card sliding up from y:60 with 0.2s stagger between child elements. Add a subtle pulse to the CTA button starting at 2.5s. Use GSAP as the runtime, ensure all spatial motion uses transform aliases (x, y, scale, rotation), and pre-calculate any layout constants at composition setup. Run animation-map.mjs on [composition directory] and output the audit results.

来源：依据 SKILL.md，按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果：

确认所有运行时实例都已注册到各自运行时专属的全局对象上，以便 HyperFrames 能一次性检索到它们

在 OpenDesign 中通过 SKILL.md 链接导入 hyperframes-animation：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: HeyGen
Repository: github.com/heygen-com/hyperframes 分支 main
Skill 文件: skills/hyperframes-animation/SKILL.md 验证时记录的内容校验和；commit 558c11b
License: Apache-2.0 来自 LICENSE。
仓库星标数: 49,761 GitHub 快照拍摄于 2026-09-14，针对整个 heygen-com/hyperframes 仓库，该仓库在此目录中包含 9 个 skills。不是 hyperframes-animation 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

默认：组合原子规则从 rules-index.md 中选取 2-4 条规则，用 GSAP timeline 组合，比 blueprints 更快
满足以下情况时加载 blueprint当场景匹配多阶段模板，或需要可运行的 4-5 阶段编排时使用
路由将任务映射到文件的表格：rules、blueprints、transitions、techniques、adapters、scripts
选择运行时何时使用 GSAP、Lottie、Three.js、Anime.js、CSS、WAAPI、TypeGPU
关键约束预先计算好布局常量，仅使用 GSAP transform 别名，不对 width/height/top/left 做 tween
脚本运行 animation-map.mjs 以审查编排并输出 animation-map.json
另请参阅指向 hyperframes-core、hyperframes-creative、hyperframes-cli 的链接

Skill 自身的描述

"HyperFrames 的全部动画知识 — 原子化动效规则、多阶段场景蓝图、场景转场、更广泛的动效设计技术，以及七个运行时适配器（GSAP 默认，以及 Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU）。适用于任何动效或动画任务：选择 2-4 条规则并组合，或加载蓝图，或查找特定运行时 API（例如 GSAP eases / Lottie player / Three.js mixer）。还涵盖审计现有组合的编排（animation map）以及 24 种命名文本动画效果。HyperFrames 原生：单一暂停时间轴，seek 安全，确定性。"

来自 SKILL.md 的前言描述。完整文件约 7,755 个字符。在 GitHub 上阅读完整文件。

HyperFrames Animation

在真实的动效和视频任务上运行 hyperframes-animation。

下载 OpenDesign，从其 SKILL.md 链接导入 hyperframes-animation，粘贴上面的提示，并在结果之前阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-animation

hyperframes-animation Skill 在 Claude Code 和 Codex 中的作用

以 skill 自身的术语

工作方式

何时使用 hyperframes-animation Skill

适合场景

了解边界

需要提供的信息

hyperframes-animation Skill 赋予 Claude Code 和 Codex 的规则

预先计算布局常量

空间运动仅使用 GSAP 变换别名

GSAP 是默认运行时

默认按原子规则组合

多种 Runtime 可以共存

请勿投机式解读 Blueprint

允许非空间属性