HyperFrames — 从这里开始 是做什么的?
此技能是 HyperFrames HTML 视频框架的本地路由器,
镜像自 heygen-com/hyperframes。
镜像的领域技能作为此文件夹的子目录存在,
并按需通过名称加载。根据用户意图,在执行前先读取相应的子技能 SKILL.md。
上游的权威代理指南与此路由器一起镜像为
UPSTREAM-CLAUDE.md(完整技能目录、安装、维护)和
UPSTREAM-AGENTS.md(工作流列表)——查阅它们以获取规范的上游技能描述
以及 npx skills add / npx hyperframes 工作流。
HyperFrames 从 HTML 渲染视频——一个合成是一个 HTML 文件,其
DOM 通过 data-* 属性声明时间,动画运行时是可搜索的,
并且媒体播放由框架拥有。完整的创作契约位于 hyperframes-core/ 中;
在编写合成 HTML 之前请先阅读它。
子技能索引
| 子技能 | 目录 | 使用场景 |
|---|---|---|
| 合成契约 | hyperframes-core/ | 创作/编辑 HTML 合成——data-* 时间、剪辑、轨道、子合成、变量。在编写合成 HTML 之前阅读。 |
| CLI 开发循环 | hyperframes-cli/ | 运行 npx hyperframes init、add、lint、check、snapshot、preview、render、publish、doctor、cloud/lambda 渲染,或排查构建/渲染环境问题。 |
| 动画 | hyperframes-animation/ | 原子运动规则、多阶段场景蓝图、场景过渡、动态设计技巧以及运行时适配器(GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)。 |
| 关键帧 | hyperframes-keyframes/ | 可搜索安全的 2D/3D 关键帧、GSAP 时间线、CSS 关键帧、Anime.js、WAAPI、FLIP、路径、蒙版、SVG 变形/绘制、文本、3D 深度,以及 hyperframes keyframes 诊断。 |
| 创意指导 | hyperframes-creative/ | 非动画创意指导:frame.md/design.md、调色板、排版、叙述、节拍规划、音频反应。 |
| 媒体 | media-use/ | 解析/生成 BGM、SFX、图像、图标、品牌标志、语音、颜色分级、LUT;TTS 配音、转录、背景去除、字幕;跨项目复用。 |
| 注册表块 | hyperframes-registry/ | 安装和连接注册表块/组件(hyperframes add)。 |
| Figma 导入 | figma/ | 导入 Figma 内容——资产、令牌、组件、故事板→重构的运动。 |
工作流(端到端交付物)
| 工作流 | 目录 | 使用场景 |
|---|---|---|
| 通用视频 | general-video/ | 创作/编辑任意自定义合成(任意长度/格式)的备用工作流——较长/多场景作品、品牌和精彩片段。 |
| 动态图形 | motion-graphics/ | 短小、以设计为主导的动态图形,运动本身就是信息——动态排版、统计计数、图表/数据可视化打击、标志转场、下三分之一。 |
| 幻灯片/演示 | slideshow/ | 演示、融资路演或互动式演示,包含离散幻灯片、片段揭示、分支、热点导航。 |
| 产品发布 | product-launch-video/ | 将产品/营销 URL、粘贴的脚本或简介转化为产品发布/宣传视频。 |
| PR 转视频 | pr-to-video/ | 将 GitHub PR(URL、owner/repo#N 或 "此 PR")转化为代码变更解说视频。 |
| 音乐转视频 | music-to-video/ | 将音乐曲目转化为节拍同步的视频——歌词视频、幻灯片或动态可视化。 |
| 无人讲解 | faceless-explainer/ | 将任意文本(文章、笔记、主题、简介)转化为带有自创视觉效果的无人讲解视频。 |
| 嵌入式字幕 | embedded-captions/ | 为说话人头视频添加设计好的字幕——基于列流动/嵌入式引擎的视觉标识。 |
| 说话人头重剪 | talking-head-recut/ | 将现有的说话人头/访谈/播客视频与定时图形叠加卡打包——标题、下三分之一、数据标注、引用。 |
| Remotion 移植 | remotion-to-hyperframes/ | 将现有的 Remotion(React)合成移植到 HyperFrames HTML。仅在用户明确要求移植/转换/迁移 Remotion 源时使用。 |
路由规则
- 对于任何“帮我做一个视频/动画/动态图形”的请求,从上面第二个表中挑选一个工作流。如果没有合适的,则回退到
general-video。 - 所选的工作流会在执行过程中引入领域技能(第一个表)——它们本身从不拥有端到端的任务。
- 创作契约优先:在编写合成 HTML 之前,先阅读
hyperframes-core/。 - 除非项目说明指定了本地包装器,否则所有内容都通过
npx hyperframes运行——请严格遵循本地包装器。需要 Node.js >= 22 和 FFmpeg。
同步
这些技能从上游镜像。要检查或拉取更新:
bash hyperframes/scripts/sync-hyperframes.sh --check # 试运行
bash hyperframes/scripts/sync-hyperframes.sh # 同步并备份
有关上游源、上次同步的提交和同步策略,请参阅 SYNC.md。