Play a finished motion-graphics ad in sync with the rough drafts it grew from, and export the breakdown as MP4.

Null Motion — 它是什么

Null Motion 是一款免费的本地工具，向您展示完成的动态图形广告是如何逐稿、逐帧构建的。它将最终影片放在屏幕顶部，粗糙的黑白草稿放在底部，所有内容都与同一时间线同步。您可以研究分解过程，或将其导出为单个 MP4 视频。

它的功能

顶部最终影片 — 完整广告循环播放，全宽显示。
底部草稿 — 广告的每个部分（Hook、Reveal、App、End card 等）都有一个简单的 HyperFrames 场景：黑白、Arial 文本、平面形状、一个简单的动作。它展示了润色前的想法。
一切同步 — 播放头在草稿上运行。当前屏幕上部分的草稿逐帧跟随影片，并带有橙色轮廓。其他草稿继续循环播放自己的部分。
一键导出 — 下载 → 整个预览 将影片及其草稿逐帧渲染为 1920 宽、24 Mbps 的 MP4，并包含影片的音频。

快速开始

git clone https://github.com/blixvip/NullMotion.git && cd NullMotion
npm start                # Node 22+，无需安装

然后打开 http://127.0.0.1:4343，选择一个参考，按 下载 → 整个预览（Chrome 或 Edge）即可获得 MP4。

无需 npm install，无需 API 密钥，无需账户。仓库附带三个参考，因此首次运行即可使用。

与 Null Studio 不同。 此仓库是免费的本地发布影片预览。暂停剪切、字幕以及 YouTube、Twitch 和 Kick 片段是 Null Studio 的功能，这是一个独立的托管产品，位于 nullmotion.com。它们不在此代码中。

展示

仓库附带三个参考及其草稿，可直接播放：

参考	长度	草稿
Infinite · Global payments	0:30	7
SaaS · Launch sequence	1:02	8
Motion study 08	0:03	3

这些片段来自其他创作者，用作示例。它们不代表委托作品。

工作原理

部分。 scripts/plan-sections.mjs 在真实场景变化处（使用 FFmpeg 场景检测）将每个参考分割成 3–8 个部分，并保留所有剪切。两拍草稿在影片剪切的确切时刻切换。
草稿。 public/drafts.mjs 是一个小型 HyperFrames 引擎：每个草稿是一个 640×360 的 HTML 场景，位于暂停的 GSAP 时间线上。一个部分由一个或两个拍（text、logo、phone、window、input、chat、cards、list、chart、cloud 等）描述，与真实帧的布局、文本和时机匹配。
播放。 页面根据影片的时钟驱动每个草稿的时间线。活动部分跟随影片，其他部分循环。
导出。 影片的隐藏副本以半速播放。requestVideoFrameCallback 捕获每个解码帧，草稿在该帧的确切时间绘制，WebCodecs 以 24 Mbps 编码，并带有帧自己的时间戳。音频从参考中复制，mp4-muxer 写入 MP4。没有实时录制，因此不会丢帧。

要求

	需要用于
Node.js 22+	运行本地服务器（`npm start`）。无需安装依赖。
Chrome 或 Edge	MP4 导出（WebCodecs + `requestVideoFrameCallback`）。播放适用于任何现代浏览器。
FFmpeg / ffprobe（可选）	导入您自己的参考、规划部分、重建展示以及为导入的参考提取音频。
Python 3（可选）	`scripts/import-motionclone.py`。

自带参考

安装 Python、FFmpeg 和 ffprobe 后：

python scripts/import-motionclone.py --source /path/to/MotionClone
node scripts/plan-sections.mjs      # 部分 + 场景剪切 + 联系表

导入的媒体保留在本地 .local-media/ 和 public/references/（两者都被 Git 忽略），并优先于展示。在 public/references/drafts.json 中描述每个部分的拍。未描述的部分获得占位草稿。npm run showcase 从本地库重建 showcase/。

导入器创建非破坏性片段，提取缩略图，并在源视频与此仓库位于同一驱动器时硬链接源视频（否则复制它们）。原始文件仅被读取。服务器流式传输字节范围，因此搜索不会将整个视频读入内存。

常见问题亮点

导出需要 Chrome 或 Edge — Firefox 和 Safari 可以播放预览，但不能导出。
导出至少需要影片长度的 2 倍时间 — 影片以半速渲染，以确保不跳过任何帧。渲染时保持标签页在前台。
导出没有声音？ — 对于您自己导入的参考，服务器在首次导出时使用 FFmpeg 提取音频，因此 FFmpeg 必须在您的 PATH 中。
导入失败并显示“Invalid cross-device link”（EXDEV）？ — 拉取最新的 main；导入器现在在硬链接不可用时复制视频。
导入时“No data/ folder”？ — --source 必须指向 MotionClone 项目文件夹（包含 data/ 的文件夹），而不是单个视频。
端口 4343 被占用？ — 设置 PORT 和/或 HOST，例如 PORT=5000 npm start 或 HOST=0.0.0.0 npm start。
“Generation not connected”？ — 这是故意的。生成、渲染服务和 Premiere 在此仓库中未连接；服务器以 501 NOT_CONNECTED 响应这些调用。草稿是手工编写的，不是 AI 生成的。
竖屏片段、暂停剪切、字幕？ — 没有。这些是 Null Studio 的功能。

项目布局

public/demo.html · demo.mjs · demo.css   预览页面和导出器
public/drafts.mjs                        HyperFrames 草稿引擎（拍类型）
public/scraps.mjs                        为 Interface 参考手工构建的草稿
public/editor.*                          早期发布编辑器，位于 /editor
showcase/                                三个已发布的参考
scripts/                                 导入、部分、展示、波形、检查
server.js · media.js                     静态服务器、媒体流、音频提取
test/                                    服务器、媒体和编辑器测试

npm run dev     # 更改时重启
npm run check   # UI 文件检查
npm test        # node --test

备注

浏览器仅调用此项目自己的源。
早期发布编辑器（参考时间线、修剪、品牌叠加）位于 /editor，原始 Null Motion 模板库位于 /index.html。
捆绑的 GSAP 和 mp4-muxer 保留其许可证；请参阅 THIRD_PARTY_NOTICES.md。品牌艺术品和参考素材属于其各自所有者，不受项目许可证覆盖。

贡献

Null Motion 很小，零依赖，通过 npm start 运行。他们正在寻找贡献者：

好的第一个问题 — 小、范围明确，并附有要查看的文件。
需要帮助 — 新的草稿拍类型、导出选项、跨平台测试。
想法和问题 — Discussions 或 Discord。

在问题上评论以认领；拉取请求在几天内审查。每位贡献者都会在发布说明中署名。

许可证

MIT。捆绑的 GSAP 和 mp4-muxer 保留其自己的许可证（请参阅 THIRD_PARTY_NOTICES.md）。参考素材和第三方品牌标志属于其所有者。

社区

问题、帮助、反馈、发布新闻和您的渲染都发布在 Discord。如果 Null Motion 对您有帮助，一颗 ⭐ 可以帮助其他人找到它。

blixvip/NullMotion