Communitygithub.com

HyperFrames

HyperFrames 可从 HTML 渲染视频,通过 `data-*` 属性声明 DOM 时序,并提供可搜索的动画运行时和由框架管理的媒体播放。

HyperFrames 是什么?

HyperFrames 是一个 AI 驱动的视频创作框架,它革新了 HTML 到视频的渲染流程。其核心创新在于使用 HTML 文件作为视频“合成”的声明式源文件,通过 `data-*` 属性而非传统时间线来定义动画和媒体片的出现、持续与同步。这为开发者和 AI Agent 提供了高度的精确性和可确定性,使得动画运行时可搜索,媒体播放由框架统一管理。该技能支持多种使用场景和工作流,包括从现有 Remotion 项目移植、创建幻灯片、添加字幕、为访谈视频叠加图形、从音乐生成节奏同步视频,以及创建产品发布视频等。它的核心工作流由 `BRIEF.md` 文件驱动,并支持按需加载一系列领域技能(如核心、动画、关键帧、媒体、CLI 等)来处理复杂任务。HyperFrames 的设计强调了可复现构建(通过版本锁定)和明确的意图路由,使得 AI Agent 能够准确理解用户需求并选择最合适的创作路径。

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

在你喜欢的 AI 中提问

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

文档

HyperFrames 入口点

HyperFrames 从 HTML 渲染视频 — 一个合成是一个 HTML 文件,其 DOM 通过 data-* 属性声明时序,其动画运行时是可搜索的,其媒体播放由框架拥有。完整的创作契约位于 /hyperframes-core 中;在编写合成 HTML 之前请先阅读它。

1. 从项目状态开始

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

状态动作
将现有 Remotion 源码明确移植到 HyperFrames阅读 references/routes/remotion-to-hyperframes.md,然后直接路由到该工作流。跳过意图层。
对现有 HyperFrames 项目执行特定操作:检查、诊断、验证、预览、渲染、发布或批量渲染仅执行该操作。跳过意图和工作流路由;加载 /hyperframes-cli 和任何所需的领域技能。
对现有项目进行特定编辑进行编辑。不要运行意图层。
BRIEF.md 存在阅读 workflow 和 flow。执行该工作流;flow: companion 总是在 /general-video 中执行。不要询问任何简要问题。
没有简要,但存在 hyperframes.json 或 STORYBOARD.md从项目文件和记录的偏好中恢复。从现有工件推断拥有该工作流。如果无法唯一确定,则询问一个仅用于路由的问题;不要运行意图访谈。
全新创建运行意图层 — references/intent-interview.md — 然后使用 § 2 的表格路由一次。

如果一个新的请求没有标识主题或输入,在路由之前询问视频是关于什么的。在询问任何事情之前检查偏好和配方 (references/intent-interview.md,步骤 1)。figma.com 输入或命名配方会改变信息收集,而不是路由 — 访谈的“适配正交输入”部分处理两者。

保持项目的 CLI 最新

一个被搭建的项目在其 package.json 脚本中固定了 hyperframes@<版本>,以使渲染保持可重现;固定版本永远不会自己前进,并且固定版本的旧 CLI 运行不会打印任何警告。当恢复一个其脚本带有固定版本的项目时,在第一个影响渲染的命令之前探查一次:

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

该探查是只读的,并报告固定版本与最新版本的关系;保持显式的 . — 在旧的 CLI 版本上,一个裸露的 --project 后跟另一个标志会将该标志值作为目录值。当它报告项目落后时 — 或者任何 CLI 输出已经显示它 (stderr 通知 此项目固定了 hyperframes@… (最新 …),或者来自固定版本脚本的 --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。一个确认的草图板本身可能就是请求的交付物;审查循环定义了该停止点。
  • 专门叙述性工作流支持最长约 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
初始化、代码检查、检查、快照、比较、批量渲染、Studio、渲染、发布或诊断/hyperframes-cli
注册表块和组件/hyperframes-registry
Figma 资产、令牌、组件或故事板帧作为重建的运动/figma

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

创作者请求所需领域
“剪辑此视频”、硬切、修剪、拼接、重新排序或使用源范围/general-video + /hyperframes-core;核心拥有 data-start、data-duration、data-media-start 和轨道布局。
在此处放大、推近/拉远、平滑的多状态缩放或重新构图、肯·伯恩斯效果或摄像机移动/general-video + /hyperframes-core + /hyperframes-keyframes;动画内部视觉/裁剪包装器,而不是定时剪辑。
匹配剪辑或扫视相机过渡/general-video + /hyperframes-animation + /hyperframes-keyframes + /hyperframes-registry;在手动创作之前搜索/安装过渡原语。
淡入淡出、交叉淡入淡出、轨道增益/音量、自动化、回避/提取或音频效果/general-video + /hyperframes-core + /hyperframes-audio;核心放置剪辑,音频混合放置轨道。
结合剪辑与摄像机运动或混音的图像和声音编辑/general-video + /hyperframes-core + /hyperframes-keyframes(当有视觉运动时)+ /hyperframes-audio(当声音被淡入淡出、混合、回避、自动化或处理时)。
获取或生成媒体,或预处理不支持的变速/媒体中冻结/media-use;仅获取/生成/预处理,绝不混合放置的轨道。

常量 data-playback-rate 对于图像和保持音高的声音是渲染安全的。它不会使源速度斜坡成为关键帧;预处理斜坡。对于可复制的编辑契约,加载 /hyperframes-core → references/creator-editing-recipes.md。

关于摄影媒体外观或行为的广泛反馈也路由到 /media-use,即使用户从未说过“色彩分级”或“特效”。

Individual skills in this repo

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

embedded-captions

>

faceless-explainer

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.

figma

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.

general-video

>

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

hyperframes-audio

>

hyperframes-cli

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

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.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

相关技能