1实现原理 · 为什么它能做到
本体是一份压缩到 6KB 的 GSAP 速查手册，按 API 面组织（Tween 方法 → vars 常用项 → transform 别名 → 缓动 → defaults → 播放控制 → matchMedia → Timeline → 性能 → 参考文件），供 agent 在写 HyperFrames composition 时现查现用。
.claude/skills/gsap/SKILL.md
GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo).
注：没有任何流程编排或脚本调度——它是被 ../hyperframes、make-a-video 等 skill 在 Step 引用时的知识底座。
用「约定」替 agent 省掉踩坑：强制 camelCase 属性名、首选 transform 别名而非拼 transform 字符串、优先 autoAlpha 而非 opacity。
.claude/skills/gsap/SKILL.md
Always use **camelCase** property names (e.g. `backgroundColor`, `rotationX`). … - **autoAlpha** — prefer over `opacity`. At 0: also sets `visibility: hidden`.
注：同节还给出 x/y/z、xPercent/yPercent、rotation/rotationX、skewX/Y、transformOrigin 的对照表，避免手写 transform 串导致 GSAP 覆盖失效。
把 Timeline 立为主推编排手段，并给出位置参数的四种写法（绝对值 / `+=` `-=` 相对 / 标签 / `<` `>` 对齐）。
.claude/skills/gsap/SKILL.md
- **Alignment**: `"<"` — same start as previous; `">"` — after previous ends; `"<0.2"` — 0.2s after previous starts
注：配套给 addLabel/play(label)/tweenFromTo、构造函数 defaults、嵌套 master.add(child, 0) 与 play/pause/reverse/restart/time/progress/kill 全套控制。
性能章的判据是「留在合成器上」：只动 x/y/scale/rotation/opacity，避免动布局属性；will-change 只给真的会动的元素；高频更新用 quickTo；能用 stagger 就别写多 tween；并在不需要时清理。
.claude/skills/gsap/SKILL.md
Animating `x`, `y`, `scale`, `rotation`, `opacity` stays on the compositor. Avoid `width`, `height`, `top`, `left` when transforms achieve the same effect.
注：末尾还有 Cleanup 与 Do Not 清单（Animate layout properties… / Create tweens before the DOM exists / Skip cleanup），把常见反模式写成否定式规则。
无障碍与响应式用 gsap.matchMedia() 处理：条件不匹配时自动 revert，示例直接接了 prefers-reduced-motion。
.claude/skills/gsap/SKILL.md
Runs setup only when a media query matches; auto-reverts when it stops matching. … reduceMotion: "(prefers-reduced-motion: reduce)",
注：示例里 duration: reduceMotion ? 0 : 2 —— 即减动偏好下首帧到位，而不是直接不渲染。
references/effects.md 提供两个 drop-in 效果（打字机、音频可视化），并强调所有效果都遵守 HyperFrames 的确定性规则。
.claude/skills/gsap/references/effects.md
All effects follow HyperFrames composition rules — deterministic, no randomness, timelines registered via `window.__timelines`.
注：音频可视化要求同步加载数据：文档明写 Do NOT use async `fetch()` to load audio data.，因为捕获引擎在页面加载后同步读 window.__timelines。
配一个 Python 脚本把音频转成逐帧可视数据：ffmpeg 解码为单声道 44.1kHz 样本，numpy 做 RMS + 对数频段 FFT，输出可直接嵌进 composition 的 JSON。
.claude/skills/gsap/scripts/extract-audio-data.py
Outputs JSON with RMS amplitude and frequency band data at the target FPS, ready to embed in a HyperFrames composition. … cmd = [ "ffmpeg", "-i", path, "-vn", "-ac", "1", "-ar", str(SAMPLE_RATE), "-f", "s16le", "-acodec", "pcm_s16le", "-loglevel", "error", "pipe:1", ] … result = subprocess.run(cmd, capture_output=True)
注：默认 30fps、16 个频段；FFT 用 4096 窗（44.1kHz 下约 10.8Hz/bin），频率范围 30Hz-16kHz，并在两遍处理里做归一化。
2核心能力
01Tween 方法速查：to / from / fromTo / set 的语义与选用场景（set = duration 0 立即应用）
02vars 常用项备忘：duration / delay / ease / stagger / overwrite / repeat / yoyo / 回调 / immediateRender
03transform 别名对照表（避免手写 transform 串）+ 方向旋转与相对值写法
04缓动清单与全局 defaults 设置
05tween 的运行时控制（pause/play/reverse/kill/progress/time），并要求把返回值存下来
06Timeline 编排全套：创建 + defaults、位置参数、标签、嵌套、播放控制
07响应式 + 减动偏好：gsap.matchMedia() 自动 revert，示例把 reduceMotion 接到 duration
08性能规范：合成器友好属性、will-change 纪律、quickTo 高频更新、stagger 代替多 tween、清理
09现成效果库（按需加载）：打字机（TextPlugin，含 cps 档位建议）与音频可视化
10本地脚本把音频转成逐帧 RMS/频段 JSON，供音频可视化直接消费
3外部依赖
| 类型 | 依赖 |
|---|---|
| package | GSAP 3.14.2（随仓库 npm ci 安装；上游来自 heygen-com/hyperframes 技能生态） |
| network | cdn.jsdelivr.net（**产物期**：effects.md 给出的示例片段在生成的 HTML 里用 script 标签引 [email protected] 与 TextPlugin；执行 skill 时并不外发） |
| cli | ffmpeg（extract-audio-data.py 用它解码音频为 s16le 管道） |
| package | numpy（脚本内 FFT/RMS 计算，需 pip 安装） |
| cli | Python 3.9+（跑 extract-audio-data.py） |
4风险提醒 风险提醒：蓝色 · 知晓即可
风险提醒：蓝色 · 知晓即可
- 不是库、不会替你装 GSAP — 它只提供知识与示例；真正依赖来自仓库 npm ci（gsap 3.14.2）。在别处单独用这个 skill 时要自己装 GSAP，否则抄下来的代码跑不起来。
- 示例片段在产物里默认引公网 CDN — effects.md 的 script 标签指向 cdn.jsdelivr.net 的 [email protected]；作者在仓库文档里提示最终渲染前应本地化资产，若照抄不本地化，成片构建会依赖外网可用性。
- 音频可视化脚本有隐性依赖与性能开销 — 需要 ffmpeg + numpy；按帧循环做 FFT，长音频（小时级）会显著耗时耗内存，且 FFT 参数（4096/30Hz-16kHz）是按音乐调过的，语音场景未必合适。
- 文档随 GSAP 版本漂移 — 内容针对 gsap 3.14.2 语境；GSAP 后续版本新增/调整 API 时，这份速查不会自动更新，可能给出过时写法。
风险提醒：蓝色，知晓即可。判级对象为本 skill 自身目录（SKILL.md + references/effects.md + scripts/extract-audio-data.py + NOTICE.txt，共 4 个文件）：主体是纯文档；唯一可执行代码是本地的 Python 脚本，只做 ffmpeg 解码 + numpy FFT，并以 JSON 落盘；无网络调用、无凭证读取、无子进程以外的作用面、无删除操作。文档里出现的 jsdelivr CDN 属『产物期引用』（生成的 HTML 由浏览器加载，执行 skill 时不外发），按分档细则不判级、只在 reason 与 external_deps 中列出。也不存在红档特征（无沙箱关闭、无 TLS 降级、无反爬绕过、无任意代码执行面）。
5第二遍独立确认
- [ok] 文件清单与类型 — SKILL.md（6.4KB 文档）、references/effects.md（8.8KB 文档）、scripts/extract-audio-data.py（6.5KB 脚本）、NOTICE.txt（228B 声明）；无隐藏文件、无 node_modules、无二进制资产。
- [ok] 网络外发反例搜索 — 目录内 3 条 http 命中：effects.md 两行 jsdelivr script 标签（产物期示例）与 NOTICE.txt 的 https://github.com/heygen-com/hyperframes（出处链接）。fetch( 命中位于『**Do NOT use async `fetch()` to load audio data.**』这句告诫中，非调用。
- [ok] 凭证面反例搜索 — 0 处 env/API_KEY/TOKEN/SECRET 命中；Python 脚本 import 仅 argparse/json/subprocess/sys/numpy。
- [ok] description 覆盖度核对 — 描述里点名的每一项都能在正文定位到专节：Core Tween Methods / Common vars（stagger、defaults）/ Easing / Timelines（position parameter、labels、nesting、playback）/ Performance（transforms、will-change、quickTo）。无夸大。
- [ok] 脚本产物与用法核对 — main() 用 argparse 提供 input/-o/--fps/--bands，默认 audio-data.json、30fps、16 段；输出结构含 duration/fps/bands/totalFrames/frames[{time,rms,bands[]}]，与 effects.md 里展示的 JSON 结构一致。
- [ok] 上游归属与许可 — NOTICE.txt 声明来源 heygen-com/hyperframes（Apache-2.0），并注明 student-kit 只做 runtime-relative 路径与可移植打包；与仓库 skills-lock.json 中 gsap 条目指向的 source 一致。
6结论
适合：适合：在 HyperFrames 组合里手写 GSAP 时间线的 agent/作者（尤其需要位置参数、标签、嵌套与会话性能规范时），以及要做打字机或音频律动效果、需要现成模板的人。
不适合：不适合：想找完整 GSAP 文档或插件手册（ScrollTrigger、SplitText 等只被一笔带过）、不使用 GSAP 的动画栈、以及期望它代管构建/渲染的人——它不碰渲染管线。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 gsap.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent68a50bcbc9292840…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nateherkai / nateherkai/hyperframes-student-kit
原始 GitHubnateherkai/hyperframes-student-kit ↗
Stars1070
最近推送2026-09-28
本 skill commit
0d30152a82许可NOASSERTION（仓库根 LICENSE，实为 MIT 文本）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。