一套供编程 agent 使用的技能,用代码把艺术风格和解说视频语法做成会动的动画。
Sunwood-ai-labs/hyperframes-motion-reel-skill
一个 Claude Code 技能,可将简短主题生成节拍同步的动态图形视频,并通过 HyperFrames 渲染为 MP4。
可替代:After Effects
- Star
- 143
- Fork
- 21
- 未关闭 Issue
- 0
- 最近提交
- 21天前
这是什么?
这是一个 Claude Code 技能,让智能体以动效设计师和创意程序员的身份工作。输入一个简短主题,还可附带图片或语音,它会规划世界观、文案、设计系统和逐拍时间线,然后用 HTML、GSAP、SVG 和 Canvas 实现各个场景。
时间轴锁定在 120 BPM、60 FPS 网格上,一拍等于 0.5 秒,即 30 帧。配乐由 Node.js 内置模块直接生成 WAV,与画面使用同一张节拍表驱动。Canvas 与 SVG 图层采用纯函数 render(t),支持确定性的跳转渲染。
流程包括 lint、check、截图审阅和渲染,最后用 ffprobe 与 ffmpeg 抽帧检查成片 MP4。项目基于 Apache-2.0 的 HyperFrames 与 GSAP,是 remotion-motion-reel 的移植版,可避开 Remotion 的商业授权要求。
核心功能
- 01基于 120 BPM / 60 FPS 网格锁定时间,切点以拍数标注。
- 02仅用 Node.js 内置模块生成 WAV 配乐,与画面节拍同步。
- 03双层动画架构:暂停的 GSAP 时间线加上可跳转的 render(t) 函数,适用于 Canvas 与 SVG。
- 04场景之间以图形变形衔接,代替淡入淡出。
- 05使用带种子的随机数生成器,输出可复现。
- 06交付前通过 lint、check、截图和 ffmpeg 完成验证。
适用场景
- 从一句话创意生成短小的showreel或动态预告片。
- 制作横版、竖版或方形的产品发布视频。
- 制作与音乐节奏同步的动态图形作品。
- 在不依赖付费动效库授权的前提下生成可商用的视频内容。
快速上手
- 1
将仓库克隆到 Claude Code 的 skills 目录以安装该技能
git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel - 2
确保已安装 Node.js(当前 LTS 版本)及 npx、Google Chrome,并且 ffmpeg/ffprobe 在 PATH 中
- 3
在 Claude Code 中用简短主题运行该技能
/hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128
使用前须知
- 需要 Claude Code,并另外安装 HyperFrames 领域技能。
- 渲染和验证需要 Google Chrome,以及 PATH 中的 ffmpeg/ffprobe。
标签
常见问题
- hyperframes-motion-reel-skill 是什么?
- 一个 Claude Code 技能,可将简短主题生成节拍同步的动态图形视频,并通过 HyperFrames 渲染为 MP4。 这是一个 Claude Code 技能,让智能体以动效设计师和创意程序员的身份工作。输入一个简短主题,还可附带图片或语音,它会规划世界观、文案、设计系统和逐拍时间线,然后用 HTML、GSAP、SVG 和 Canvas 实现各个场景。
- hyperframes-motion-reel-skill 可以免费使用吗?用的什么许可证?
- hyperframes-motion-reel-skill 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- hyperframes-motion-reel-skill 还在维护吗?
- 活跃维护中。hyperframes-motion-reel-skill 最近一次提交是在 2026年9月29日。
- hyperframes-motion-reel-skill 适合用来做什么?
- 从一句话创意生成短小的showreel或动态预告片。 制作横版、竖版或方形的产品发布视频。 制作与音乐节奏同步的动态图形作品。 在不依赖付费动效库授权的前提下生成可商用的视频内容。
- hyperframes-motion-reel-skill 怎么安装和运行?
- 将仓库克隆到 Claude Code 的 skills 目录以安装该技能: git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel 确保已安装 Node.js(当前 LTS 版本)及 npx、Google Chrome,并且 ffmpeg/ffprobe 在 PATH 中 在 Claude Code 中用简短主题运行该技能: /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128
- 在哪里获取 hyperframes-motion-reel-skill?
- 源代码和安装说明在 GitHub 上:https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
一个 Claude Code 技能,用代码生成程序化 canvas 短动画,并通过无头浏览器和 ffmpeg 渲染为 MP4。
一个让 Claude Code、Codex 等 agent 用代码直出商业级产品发布片的 skill,支持作曲配乐和在画面上指点修改。
把脚本变成带旁白的解说视频或产品演示,语音、时间轴和渲染都在本地完成,可由编码智能体驱动。
一组可安装的技能包,为 AI 编程代理提供动效设计、After Effects、Remotion 视频、Logo 动画和动态背景的指导。
可浏览的 144 个动态图形、镜头、UI、网页与摄影效果名称库,每项附动态示例和配合 AI 使用的提示词。