Communitygithub.com

heygen-com/hyperframes

这是所有视频、动画和动态图形任务的强制入口点。使用它来创建、编辑、渲染或检查 HyperFrames 项目,以及路由到正确的专业工作流程。

hyperframes 是什么?

HyperFrames 是一个基于 HTML 的视频渲染框架,它将 HTML 文件作为“合成”(composition),并利用 `data-*` 属性控制时序、动画和时间线。该技能(SKILL.md)是所有交互的强制入口点,无论是新建项目、编辑现有项目、导入 Remotion 项目,还是诊断和发布项目。它会首先读取项目状态(如是否存在 `BRIEF.md` 或 `hyperframes.json` 文件)来决定是恢复工作、执行特定操作,还是运行完整的意图访谈以收集需求。然后,根据用户请求的交付物(例如幻灯片、解释视频、音乐视频或产品发布视频),路由到相应的工作流程。该技能支持多种输入,包括网站 URL、GitHub PR、Figma 设计、文本描述或现有素材。它还能够安装和更新所需的工作流技能,并按需加载领域技能(如动画、音频、键帧)。此技能是 Claude Code、Cursor 和 Codex 等 AI Agent 的核心,确保所有视频相关操作都遵循一致、可预测的开发流程,并默认使用 HyperFrames 作为输出框架。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/skills/hyperframes

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

插件安装: 在执行 setup 或 freshness 命令之前,当此技能位于 HyperFrames 插件内部时,请遵循插件执行规则。独立安装请保留下面的更新说明。

HyperFrames 入口点

HyperFrames 通过 HTML 渲染视频 —— 一个合成就是一个 HTML 文件,其 DOM 通过 data-* 属性声明时序,其动画运行时是可寻位的(seekable),其媒体播放由框架控制。完整的创作合约位于 /hyperframes-core 目录中;在编写合成 HTML 之前请先阅读它。简介、故事板、审查、制作、分发和帧工作者的合约位于此技能的 references/ 目录中。

1. 从项目状态开始

应用第一个匹配的行;不评估较低的状态行:

状态操作
明确将现有的 Remotion 源码移植到 HyperFrames阅读 references/routes/remotion-to-hyperframes.md,然后直接路由到该工作流程。跳过意图层。
对现有 HyperFrames 项目执行特定操作:检查、诊断、验证、预览、渲染、发布或批量渲染仅执行该操作。跳过意图和工作流程路由;加载 /hyperframes-cli 和任何必需的领域技能。
在现有项目中提出一个问题、一个暂停、一个没有具体变更的想法,或对已构建影片的感性笔记遵循 /hyperframes-studio 第 0 节。
在现有项目中请求制作一部新影片遵循 /hyperframes-studio 第 5 节。
对现有项目进行特定编辑进行编辑。不要运行意图层。要知道项目时间线上有什么(轨道、剪辑、开始、结束、播放什么内容),请运行 npx hyperframes timeline [--json],而不是读取 index.html 和每个子合成文件。
BRIEF.md 文件存在读取 workflow 和 flow。执行该工作流程;flow: companion 始终在 /general-video 中执行。不询问任何简介问题。
没有简介,但存在 hyperframes.json 或 STORYBOARD.md 文件从项目文件和记录的偏好中恢复。根据现有工件推断所属工作流程。如果无法唯一确定,则只问一个路由问题;不要运行意图面试。
全新创建运行意图层 —— references/intent-interview.md —— 然后使用第 2 节的表格路由一次。

当您编辑现有项目时,请将您的编辑操作括在项目历史记录(/hyperframes-cli,项目历史记录)中。

如果新的请求未明确主体或输入,请在路由之前询问视频内容。在询问任何问题之前,请先检查偏好和配方(references/intent-interview.md,步骤 1)。figma.com 输入或命名的配方会改变接收方式,但不会改变路由 —— 面试的“适配正交输入”部分处理这两种情况。

保持项目的 CLI 更新

脚手架项目会在其 package.json 脚本中固定 hyperframes@<版本号>,以使渲染保持可重现性;固定版本不会自动更新,而使用旧版 CLI 的固定版本运行不会打印任何警告。当恢复其脚本带有固定版本的项目时,请在第一个影响渲染的命令之前执行一次探测:

npx hyperframes@latest upgrade --project . --check

该探测是只读的,它会报告固定版本与最新版本之间的差异;请保留明确的 . 符号 —— 在旧版 CLI 版本中,裸露的 --project 后跟另一个标志会将那个标志当作目录值。当它报告项目版本落后时 —— 或者任何 CLI 输出已经显示了这一点(stderr 通知 This project pins hyperframes@… (latest …),或者在来自固定版本脚本的 --json 结果中显示 _meta.updateAvailable: true )—— 请使用 npx hyperframes@latest upgrade --project . 应用更新,然后使用 npx hyperframes check 进行验证。如果验证通过,则确认项目的合成在新版本上仍然有效 —— 而不是渲染输出与旧固定版本的帧一致 —— 因此成功更新绝不是静默的:请在运行的摘要中注明新旧版本号。没有合成的项目不需要验证。如果检查失败,请还原 package.json 的更改,继续使用固定版本,并报告项目停留在哪个版本及其原因。根据信号采取行动而不是将其转达给用户;永远不要留下未验证的新固定版本。

2. 路由新创建

使用第一个匹配的行。匹配的是请求的交付物,而不是顺便提一下的单词或文件类型。

优先级请求工作流程
1明确移植现有的 Remotion 源码/remotion-to-hyperframes
2编写演示文稿、宣传幻灯片或可导航的交互式演示文稿/slideshow
3为现有的谈话头部素材添加纯字幕或翻译,而不改变素材本身/embedded-captions
4为现有的谈话头部、采访或播客素材添加设计好的图形覆盖层,而不改变素材本身/talking-head-recut
5根据音轨构建一个节奏同步的视频,无需旁白或网站抓取/music-to-video
6创建明确的短小、无旁白、以运动为主的片段,通常低于 10 秒/motion-graphics
7根据 PR 引用解释 GitHub 拉取请求或代码变更/pr-to-video
8根据 URL 或特定网站的简介,营销或展示一个网站、产品站点、应用或公司/product-launch-video
9使用创造的视觉效果解释一个主题、文章或笔记,无需产品或网站抓取/faceless-explainer
10任何其他自定义视频或合成/general-video

在最终确定路由之前,请阅读 references/routes/<工作流程.md> —— 每个路由一个文件:包含规范的输入/输出/触发合约(在延迟安装的工作流技能可用之前)以及该路由的面试入口。如果候选路由不满足其合约,请继续路由,而不是强制匹配。只读取匹配的路由文件。

解决常见的歧义

  • 短动画标题、标志动画、统计数据冲击、图表冲击、地图冲击或独立的下三分之一片段,如果是无旁白且运动本身是信息的重点,则为 /motion-graphics。静态标题卡、有旁白的序列、较长的蒙太奇或自定义循环为 /general-video。
  • 明确较短的运动图形可以使用 URL、推文、文章或截图作为源材料。通用的“从这个网站制作一个视频”的请求为 /product-launch-video。
  • 带字幕的现有素材路由到 /embedded-captions;带有设计的信息卡的素材路由到 /talking-head-recut。对素材进行重新计时、重新排序、重新着色、重新构图或重混属于自定义编辑,并落入 /general-video。
  • 只有当节拍网格驱动整个作品时,音乐文件才选择 /music-to-video。作为背景音乐使用的音乐不会覆盖主题匹配的路由。
  • “我想要一个故事板”会改变审查过程,而不是工作流程。如果没有其他路由信号,请使用 /general-video。确认的草图形式的 storyboard.html 本身可能就是所需的交付物;审查循环定义了那个停止点。
  • 专门的叙事工作流程支持大约最多 3 分钟,并且在 30-90 秒左右时效果最佳。明显更长的片段会路由到 /general-video。长度永远不会覆盖明确的移植、演示文稿、字幕、覆盖层或音乐驱动的交付物。

3. 路由一次,然后离开

对于新创建,意图层(references/intent-interview.md)执行完整的对话 —— 记忆、分类、推介环节、必备条件、运行形态、交接 —— 并以编写 BRIEF.md 文件结束。简介是工作流程读取的唯一路由工件;之后不会再重新打开此技能或面试。所有后来的“路由要求什么?”的问题都从 BRIEF.md 文件中回答。

4. 安装并进入工作流程

在阅读所选工作流程之前,请安装或更新它以及核心领域技能:

npx hyperframes skills update <工作流程名称>

使用不带 / 的裸名称。如果命令失败,则显示错误;不要从记忆中重建工作流程。关于安装的所有其他事项 —— 核心与延迟加载的拆分、init 刷新什么、诊断、CI 退出选项以及无 CLI 的回退机制 —— 都在 references/skill-lifecycle.md 中。

5. 按需加载领域技能

需求技能
合成结构、时序属性、轨道、变量、确定性/hyperframes-core
运动规则、场景蓝图、过渡、运行时适配器/hyperframes-animation
安全可寻位的 GSAP、CSS、Anime.js、WAAPI、FLIP、路径、遮罩、SVG、3D 关键帧或 hyperframes keyframes 诊断/hyperframes-keyframes
设计规范、概念、调色板、排版、旁白、节拍规划/hyperframes-creative
图像、图标、徽标、音频、字幕、分级、LUT、可重用媒体/media-use
配音剪辑、音频效果链、自动化包络线,或跨多个轨道的单一链/推子(子混音总线)/hyperframes-audio
初始化、lint、检查、快照、比较、批量渲染、Studio、渲染、发布或诊断/hyperframes-cli
注册表块和组件/hyperframes-registry
命名的外观、效果、处理或过渡 —— CRT 扫描线、故障、胶片颗粒、闪光扫掠、五彩纸屑爆发 —— 在手动构建之前/hyperframes-registry
Figma 资源、令牌、组件或作为重建运动的故事板帧/figma

创作者编辑短语是跨领域的请求。加载匹配行中命名的每个技能:

创作者请求所需领域
“剪辑这段素材”、硬切、修剪、拼接、重新排序或使用源范围

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

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). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

相关技能