全部技能 / 内容创作 / hyperframes-animation
内容创作 · heygen-com/hyperframes

hyperframes-animation

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 player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

风险提醒：蓝色 · 知晓即可AI 侦查报告
作者 heygen-comGitHub heygen-com/hyperframes ↗Stars 48297许可 Apache-2.0（仓库根 LICENSE；GitHub API spdx Apache-2.0）commit b8328f9573
agent 宿主通常会约束 skill 执行权限；风险提醒为 AI 侦查观点，不构成质量或安全保证。第三方 skill 仅作拆解与展示，安装使用风险自负，版权归原作者。

1实现原理 · 为什么它能做到

SKILL.md 是四层知识的入口与路由：原子 rules（rules-index.md 索引 48 个 rules/<name>.md 食谱）→ 多相 scene blueprints（blueprints-index.md 索引 22 个）→ transitions 目录（16 文件）→ techniques.md；再加 12 张运行时 adapter 卡。

skills/hyperframes-animation/SKILL.md
All motion knowledge in one skill: **rules** (atomic recipes), **blueprints** (multi-phase scene templates), **transitions** (scene-to-scene), **techniques** (broader motion-design patterns), and **adapters** (per-runtime APIs).
注：路由表约 30 行：'Pick an atomic motion pattern by trigger / tag | rules-index.md'、'Read one blueprint's full recipe | blueprints/<id>.md' 等；文件实测 rules/ 48 个、blueprints/ 22 个、examples/ 13 个 HTML、adapters/ 12 个 md、transitions/ 16 个。

默认创作法=组合原子规则：挑 2-4 条 rules 用一条 paused GSAP timeline 粘合，而不是从蓝图起手——声称更快且代码更少；蓝图仅当场景命中预设计模板时使用。

skills/hyperframes-animation/SKILL.md
Pick 2-4 rules from `rules-index.md`, glue them together with a single paused GSAP timeline, done. This is faster and produces less code than starting from a blueprint.
注：rules-index.md 每条规则自带契约：单 paused timeline、seek-safe 双向（fromTo 显式 from 态）、确定性（禁 Math.random/Date.now，索引派生伪随机）、禁 width/height/top/left tween、禁 CSS transition 于动画元素等。

所有配方强约束在 core 的确定性契约之内，并附加动画层特有规则：布局常量预计算（禁 tween 期 getBoundingClientRect——渲染器并行采样会失步）、空间运动只用 GSAP transform 别名。

skills/hyperframes-animation/SKILL.md
**Pre-calculated layout constants** — never derive positions from `getBoundingClientRect()` at tween time. Tween-time DOM measurements desync because the renderer samples in parallel; compute coordinates once at composition setup and reuse.
注：Critical Constraints 段逐条回指 core 的 Non-Negotiable Rules 但不重复全文（'Don't restate the full contract here'）——层间职责单向下沉。

运行时适配层真实存在：七类运行时（GSAP 默认 + Lottie/Three.js/Anime.js/CSS/WAAPI/TypeGPU-WebGPU）各自注册到全局（window.__hfLottie/__hfAnime 等），HyperFrames 一次 seek 全部；adapter 卡给出每运行时在 HyperFrames 内的注册/seek 约定。

skills/hyperframes-animation/SKILL.md
Multiple runtimes can coexist in one composition. Each registers its instances on the runtime-specific global so HyperFrames can seek all of them in one pass.
注：路由表逐运行时列出读哪张卡（gsap.md / lottie.md / three.md / animejs.md / css-animations.md / waapi.md / typegpu.md / html-in-canvas-patterns.md / animate-text.md）。

可审计能力由真实脚本支撑：animation-map.mjs 读 window.__timelines 全部 GSAP 时间线、枚举 tween、采样 bbox、算 flags，输出 animation-map.json 供 choreography 审查（dead zones/stagger 一致性/lifecycle 警告）。

skills/hyperframes-animation/scripts/animation-map.mjs
Reads every GSAP timeline registered in window.__timelines, enumerates tweens, samples bboxes at N points per tween, computes flags and human-readable summaries. Outputs a single animation-map.json.
注：实现经 package-loader 导入 @hyperframes/producer/@hyperframes/core 并 createCaptureSession（headless 捕获会话）——需项目内装有包；bootstrap 只在缺失时征求同意（npm install --ignore-scripts，pinned spec 守护）。

依赖引导有安全设计：package-loader.mjs 只装 pinned 包规格、用 --ignore-scripts 禁依赖生命周期脚本、spawn npm 用 argv 数组不拼 shell 字符串、install 行仅展示不执行、引导前 confirmBootstrap 征求同意。

skills/hyperframes-animation/scripts/package-loader.mjs
// package-loader — bootstrap optional helper packages only when missing, with // defense-in-depth so a malicious or typo'd dependency can't run on install: // • install runs `npm install --ignore-scripts` — package lifecycle scripts // never execute
注：同文件注释：'npm is spawned with an argv array (no shell) — never a built command string'；'installLine strings below are DISPLAY ONLY … never handed to a shell or executed.'

2核心能力

0148 个原子 motion 规则（文本/数据/3D/cursor/UI 演示等类别，按 tag/触发词查）
0222 个多相场景蓝图（brand-reveal/social-proof 等，含可运行 ground-truth 代码）
03场景转场目录（transitions/：overview + catalog + 各 CSS 转场实现卡）
0412 张运行时 adapter 卡（GSAP/Lottie/Three/Anime/CSS/WAAPI/TypeGPU/HTML-in-canvas/animate-text）
0524 个具名文本动画效果（经外部 animate-text skill 接入）
06动画地图审查（animation-map.mjs：时间线枚举/tween 采样/bbox flags/JSON 报告）

3外部依赖

类型依赖
package@hyperframes/producer / @hyperframes/core（animation-map.mjs 运行时依赖；项目优先，缺失才 bootstrap）
network产物运行期 CDN 库（gsap/three/animejs 经 jsdelivr 进 composition/示例——作品级依赖，渲染浏览器加载）
clihyperframes CLI（lint/check/snapshot/render，验证动画产出；命令细节在 hyperframes-cli）
package外部 animate-text skill（24 个具名文本动画效果的实现方）

4风险提醒 风险提醒：蓝色 · 知晓即可

风险提醒：蓝色 · 知晓即可
  • 知识量大（48 规则 + 22 蓝图 + 12 适配器），agent 路由错层会读到不匹配的食谱 — 路由表与 tags 缓解；规则卡都标注适用触发条件，但最终选择依赖模型判断。
  • 动画地图审计需驱动 headless 浏览器执行 composition inline JS — 与 core/preview 同级：不可信 composition 的执行面，宿主渲染沙箱承担；脚本自身无外发。
  • 外部 animate-text 技能为 24 个文本效果的事实源，跨仓库依赖 — adapter 卡仅指引（github.com/pixel-point/animate-text），其质量/安全不在本仓控制范围。
风险提醒：蓝色，知晓即可。无凭证读取、无第三方数据外发；运行的是官方 hyperframes 包（项目优先，缺失才在用户同意下 npm install --ignore-scripts 引导）与本地 headless 捕获；产物运行期经 CDN 拉公开动画库。无删除/破坏性操作；按统一分档『自带本地脚本、写本地配置、无凭证接触』取 blue（网络仅官方包/公开 CDN，不碰 token）。

5第二遍独立确认

  • [ok] rules-index/blueprints 数量与路由声称一致 — find 实测 rules/ 48 个 md、blueprints/ 22 个 md、examples/ 13 个 html、adapters/ 12 个 md、transitions/ 16 个，与 SKILL.md/rules-index 描述一致。
  • [ok] 『7 个运行时适配器』声称（GSAP+Lottie+Three+Anime+CSS+WAAPI+TypeGPU） — adapters/ 目录实测含对应 7 种 + html-in-canvas-patterns + animate-text + gsap 细分 3 卡；TypeGPU 卡存在（WebGPU/WGSL）。
  • [ok] package-loader 安全声称（防依赖投毒） — 源码注释与实现复核：pinned spec 断言（assertPinnedPackageSpecs）、--ignore-scripts、argv spawn、display-only installLine、confirmBootstrap 征求同意——逐条命中。
  • [discrepancy] animation-map 是否会在无依赖时擅自联网 — 首轮注记偏『项目优先』；复核发现若项目无包且用户同意 bootstrap 会执行 npm install（网络）——非默认路径但确实存在，已在外联 deps/scripts_executed 如实标注并保持 blue（官方包 + consent + --ignore-scripts）。
  • [ok] 有无把文档站链接误当外发依赖 — gsap.com/threejs.org/animejs.com 等仅为 adapter 卡内的 API 文档引用（人类阅读），非运行依赖，未列入 external_deps。

6结论

  • 知识分四层且每层可独立消费：原子规则组合是默认、蓝图按需、转场/适配器查表——创作成本随复杂度平滑增长
  • 把『确定性/可 seek』作为一切规则的前提并一次写清，规则库自洽不重复
  • 脚本层防御设计（pinned spec + --ignore-scripts + argv spawn + consent）在生态内属最佳实践样板
  • 多运行时（Lottie/Three/Anime/WAAPI/TypeGPU）统一进 seek 体系，适配真实 After Effects/3D 资产工作流
    • 适合：适合 HyperFrames 一切 motion 创作（从单条规则到多相场景蓝图到 3D/Lottie 资产接入）、对已有 composition 做动画审查（animation-map）、以及想参考『规则库+索引+适配层』知识工程结构的技能作者。
    不适合：不适合非动画的视觉/品牌/叙事方向（→hyperframes-creative）、HTML 结构契约（→hyperframes-core）；TypeGPU/WebGPU 等高端适配器需要宿主渲染器支持，无 WebGPU 环境不可用。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-09
    方式 A · 人下载镜像包下载 hyperframes-animation.tar.gz
    sha256: f370d7615a306ee2…
    方式 B · JSON 格式安装指南，复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗
    本页镜像锁定 commit b8328f9573；上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库heygen-com / heygen-com/hyperframes
    原始 GitHubheygen-com/hyperframes ↗
    Stars48297
    最近推送2026-09-09
    本 skill commitb8328f9573
    许可Apache-2.0（仓库根 LICENSE；GitHub API spdx Apache-2.0）
    本站信息
    收录日期2026-09-06
    分类内容创作
    侦查报告2026-09-06 · 2 遍
    本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。