跳转到使用指南
hyperframes-keyframes作者 HeyGen

HyperFrames Keyframes Skill.

适用于 Claude Code 和 Codex 的动效与视频 skill:推进镜头、变焦、重新构图、Ken Burns 移动以及 HyperFrames 的 2D/3D 关键帧。

  • Motion & Video
  • Video
heygen-com/hyperframes · skills/hyperframes-keyframes/SKILL.mdSKILL.md
--- name: hyperframes-keyframes description: Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics. Don't use for broad scene strategy, brand design, media sourcing, captions, or general video … --- ## Creator editing boundary ## Procedure ## Contract ## Runtime Rules ## GSAP Skeleton ## Keyframe Forms
前置信息和章节标题读取自上游文件,日期为 2026-09-14 · 完整内容共 15,899 字符

01 功能说明

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

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

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

以 skill 自身的术语

处理 HyperFrames 合成中的推近、拉远、缩放、重新取景、Ken Burns 运镜、镜头移动、视觉匹配/甩镜切换,以及可安全跳转的 2D/3D 关键帧。支持 GSAP、CSS keyframes、Anime.js、WAAPI、FLIP、路径、遮罩、SVG 变形/描边、文字轨迹和 3D 深度。关键帧是一种姿态契约:可见状态、连续的主体一致性、可安全跳转的运行时、经过验证的像素。

聚焦于片段内部的视觉运动,而非片段组装或场景策略。要求同步运行时构建、已注册的时间线实例,以及确定性时序。作者需通过 hyperframes lint、check、keyframes 命令、聚焦的 --shot 诊断,以及在关键时刻的快照进行验证。

它产出什么

  • 在 window.__timelines[compositionId] 中注册的 GSAP 时间线实例,paused: true
查看示例提示词 ↗

工作方式

  1. 01
    识别主体与状态

    在编写关键帧之前,先识别动画主体、可见状态、最终状态和运行时。

  2. 02
    选择最小机制

    选择能证明该提示的最小机制,仅当机制不明确时才查阅 references/keyframe-patterns.md。

  3. 03
    编写并注册

    在声明的运行时中编写可安全跳转的关键帧,以同步方式构建并注册该运行时实例。

  4. 04
    通过诊断进行验证

    使用 hyperframes lint、check、keyframes 命令、一次聚焦的 --shot,以及在关键时刻的快照进行验证。

  5. 05
    修复并重新测试

    如果验证失败,先修复源关键帧,再重新运行最小的失败诊断,然后才进行渲染。

02 找到适合场景

何时使用 hyperframes-keyframes Skill

在 Claude Code 或 Codex 中,当工作是此类动效与视频时,使用 hyperframes-keyframes skill。下面的适用范围和限制取自 skill 自身的文件。

适合场景

  • 在片段内的非计时视觉/裁剪包装器上,使用关键帧化的缩放和平移进行推近或拉远
  • 平滑的多状态缩放或重新取景,使一个主体包装器以多个状态作为姿态阶梯保持存在
  • 通过动画化的包装器平移加缩放实现平移、重新取景或 Ken Burns 运镜
  • 在一条已注册的可安全跳转时间线上,进行带标签变换节拍的连续镜头移动
  • 保留既定几何形状、方向和速度的匹配剪辑或甩镜

了解边界

  • 宽泛的场景策略、品牌设计、媒体素材采集、字幕或一般视频规划
  • 属于 hyperframes-core 的源范围硬切、裁剪、拼接与重排
  • 带随时间变化的播放速率包络的源变速,不受支持
  • 源中任意位置的定格帧,需要预处理静止/派生片段

需要提供的信息

  • 可见姿态与最终状态证明预期动作所需的姿态,包括完成该动画的最终状态。

03 Skill 内部

hyperframes-keyframes skill 为 Claude Code 和 Codex 设定的规则

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

  1. 暂停的 GSAP 时间轴

    GSAP 时间轴必须使用 gsap.timeline({ paused: true }),对渲染关键的动作绝不调用 tl.play(),并以匹配 data-composition-id 的键注册为 window.__timelines[compositionId]。

  2. Anime.js Autoplay False

    Anime.js 实例必须设置 autoplay: false,并推入 window.__hfAnime,且 duration 与 loops 均为有限值。

  3. CSS 关键帧填充模式

    CSS 关键帧需要有限的 duration 与迭代次数、确定性的 delay,以及 animation-fill-mode: both。

  4. 绝不使用计时器或随机数

    对渲染关键的动作,绝不使用 Date.now()、performance.now()、未设种子的 Math.random()、悬停/滚动触发、计时器、异步创建的时间轴、未注册的 requestAnimationFrame,或无限循环。

  5. 仅对可见通道设关键帧

    为 x/y/z、scale、opacity、clip-path、masks 等可见通道设关键帧,而非隐藏的辅助状态。

  6. 保持对象身份一致

    当连续性重要时,保持对象身份一致。仅当预期动作为替换或溶解时才使用交叉淡化。

  7. 末帧是动画的一部分

    末帧是动画的一部分,而非清理步骤。除非有要求,不要重置为静止状态;除非有要求,不要以黑屏结束。

  8. 命名主体与姿态

    命名移动的主体,以及证明预期动作所需的姿态,包括最终状态。

04 投入使用

在 Claude Code 或 Codex 中安装 hyperframes-keyframes

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

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

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

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

针对 skills/hyperframes-keyframes/SKILL.md 的通用 skills CLI 形式;该仓库可能记录自己的路径。

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

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

Starter prompt
Add a Ken Burns punch-in to [clip-id] starting at 2.5s: scale from 1.0 to 1.4 over 3 seconds with ease-out, translating the wrapper 15% right and 10% up to reframe on the subject's face. Hold the final framing for 1 second. Register the timeline and verify with a strip shot showing the route.

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

检查首次结果

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

  • 运行 hyperframes lint 以检查结构问题
  • 运行 hyperframes check 以验证该合成
  • 运行 hyperframes keyframes,使用 --shot 和 --samples 校验目标、停止点、路径与时间间隔
  • 使用 --layout strip 验证原地运动、重叠、接触以及细微的缩放/透明度变化
  • 使用 --ghost 配合 --angle 验证 canvas、WebGL、着色器运动以及 3D 深度投影
  • 在首帧、验证姿态、终帧减一保持点以及精确终帧处截图,以验证遮罩、文本可读性、完整状态且无黑帧/重置尾

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

05 开源、可追溯

来源、许可与验证

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

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

SKILL.md 内部

  1. 创作者编辑边界关键帧掌管视觉运动;core 负责片段拼接、修剪、拼接、源偏移与硬切
  2. 流程五步工作流:从识别主体和状态,到创作、验证,再到基于诊断的修复
  3. 约定为主体和姿态命名,为可见通道设置关键帧,保持一致性,保持状态足够长时间,将终帧视为动画
  4. 运行时规则GSAP 暂停时间线、CSS fill-mode both、Anime autoplay false、注册要求、禁止的计时器/随机/异步模式
  5. 关键帧形式数组关键帧、百分比关键帧、属性数组、父级 ease-none 配合逐点缓动、easeEach 实现统一节奏
  6. 通道优先使用合成器/视觉通道,如 x/y/scale/opacity;避免使用布局/生命周期通道,如 top/left、width/height、display
  7. 机制选择将需求匹配到最小机制的对照表:FLIP、路径移动、描边绘制、形状插值、错位交错、文本细分、3D
  8. 时序预备动作、加速、峰值验证、跟随收尾、过冲、缓动选择、错位偏移、终帧保持、连续速度
  9. 文本保持行框、字间距、可读性与最终适配;移动字形或遮罩带;截图可读帧
  10. SVG使用 DrawSVGPlugin 实现描边增长,MorphSVGPlugin 实现形状插值,将图元转换为路径,拆分复杂轮廓
  11. 3D使用 perspective、preserve-3d、z 轴移动、旋转、相机/世界运动、遮挡、图层顺序;用诊断角度验证深度
  12. Canvas / WebGL为相机、物体变换、材质、着色器 uniform 设置关键帧;从 HyperFrames 时间渲染;使用 --ghost 进行验证
Skill 自身的描述
"当 HyperFrames 构图需要推入、推出、缩放、重新构图、Ken Burns 处理、镜头移动、视觉匹配/快速切换或其他可安全定位的 2D/3D 关键帧时使用;也用于 GSAP、CSS keyframes、Anime.js、WAAPI、FLIP、路径、蒙版、SVG 变形/绘制、文字轨迹、3D 深度或 `hyperframes keyframes` 诊断。不要用于广泛的场景策略、品牌设计、媒体采购、字幕或一般视频规划。"

来自 SKILL.md 的 front-matter 描述。完整文件约 15,899 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 hyperframes-keyframes Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

这个 skill 与 hyperframes-animation 有什么区别?

该 skill 负责关键帧实现和视觉运动机制。若需广泛的场景方案与视觉交接编排,请使用 hyperframes-animation。若需完整的命令文档,请使用 hyperframes-cli。该 skill 专注于实际关键帧的创作、注册与验证。

HyperFrames Keyframes

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

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

终端
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-keyframes

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows