HyperFrames
HyperFrames 是一个视频合成框架，让你能用纯 HTML/CSS/JS 构建电影级合成画面，实时预览并渲染为 MP4 或 GIF。它类似 Remotion，但更轻量且原生运行在浏览器中。
何时使用此技能
当用户想要以下操作时激活：
- 创建视频、动画或动态图形
- 构建标题卡、下三分之一、片头、片尾或场景过渡
- 生成动画解说、演示短片或产品导览
- 为合成添加字幕或画外音
- 将网站、博客文章、播客或演讲转换为视频
- 制作音频响应式视觉
- 渲染动画 logo 或社交媒体短视频
如果用户提到“视频”、“动画”、“动态”、“渲染”、“MP4”或描述与时间相关的内容——此技能就是正确的选择。
CLI
所有操作通过 npx hyperframes 完成：
| 命令 | 用途 |
|---|---|
npx hyperframes init | 脚手架新合成（Tailwind、空白或模板） |
npx hyperframes preview | 在浏览器中实时预览并热重载 |
npx hyperframes lint | 根据 schema 验证合成 |
npx hyperframes inspect | 导出解析后的场景图用于调试 |
npx hyperframes render | 生成 MP4 / WebM / GIF |
npx hyperframes doctor | 诊断环境问题（浏览器、ffmpeg） |
npx hyperframes add <block> | 安装注册表块（字幕、过渡等） |
每个新项目都从用户选定的工作目录执行 npx hyperframes init 开始。在脚手架之前先与用户确认位置。
核心思维模型
HyperFrames 合成是一个 HTML 文件（或小型项目），它声明：
- 时长 — 合成运行的时间长度（
data-duration或配置） - 层 — 堆叠的元素，随时间出现/消失
- 时间 — 每个层带有
data-start、data-end、缓动函数和关键帧 - 适配器 — 可引入你自己的动画库：GSAP、Anime.js、Web Animations API、CSS 动画、Lottie、Three.js。HyperFrames 不干预，只负责编排时间。
渲染器确定性播放合成——相同输入、相同输出。这使得它对 diff 和 AI 友好。
工作流程
- 脚手架 —
npx hyperframes init并选择模板 - 创作 — 编辑 HTML；添加层、设置时间、选择动画库。保持合成范围紧凑：每个文件一个场景即可。
- 预览 —
npx hyperframes preview用于热重载 - 校验 + 检查 — 及早发现时间重叠和缺失资源
- 渲染 —
npx hyperframes render --format mp4（或gif、webm）
配套技能
当用户的请求符合更具体的工作流程时，使用匹配的技能——Claude Code 会在相关时自动加载它们：
- website-to-hyperframes — 将 URL 转换为视频（截图 → 场景）
- remotion-to-hyperframes — 移植现有的 Remotion 项目
- hyperframes-media — TTS 旁白（Kokoro）、Whisper 转录、通过背景移除实现透明叠加
- hyperframes-registry — 通过
npx hyperframes add安装社区块（下三分之一、VFX、过渡、文字效果） - 适配器技能：
gsap、animejs、waapi、css-animations、lottie、three、tailwind——每种动画库在 HyperFrames 内的模式
让生活更简单的默认设置
- 优先使用 Tailwind 模板（
npx hyperframes init --tailwind）——大多数用户想要样式化的合成，Tailwind 能快速实现。 - 默认使用 GSAP 处理基于时间轴的动画；WAAPI 处理简单的元素运动；Lottie 处理设计师提供的 JSON 动画。
- 除非用户另有要求，否则渲染为 1920x1080 @ 30fps。对于 TikTok / Reels / Shorts 使用竖屏（1080x1920）。
- 始终在
render之前运行npx hyperframes lint——它能捕获 90% 在预览中不可见的错误。
最小示例
<!doctype html>
<html data-duration="6000">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.tailwindcss.com" />
</head>
<body class="bg-black text-white font-sans">
<div class="absolute inset-0 grid place-items-center"
data-start="0" data-end="3000">
<h1 class="text-7xl font-bold tracking-tight">Crest</h1>
</div>
<div class="absolute inset-0 grid place-items-center"
data-start="3000" data-end="6000">
<p class="text-3xl text-emerald-400">专为 Claude Code 打造</p>
</div>
</body>
</html>
这是一个六秒、两场景的标题序列。npx hyperframes preview 查看效果，npx hyperframes render 导出 MP4。
事先向用户询问什么
在脚手架之前，获取以下信息：
- 视频的用途是什么？（标题卡、演示、解说、社交短视频）
- 时长多长？（社交内容 15 秒以内，产品演示 30-60 秒，解说 1-3 分钟）
- 宽高比？（桌面 16:9，社交 9:16，信息流 1:1）
- 是否需要画外音？（如果需要，使用
hyperframes-media生成 TTS） - 品牌资产？（logo、颜色、字体——如果存在品牌套件则从中提取）
获得这些信息后，开始脚手架并创作。