【免费下载链接】NullMotionPlay a finished motion-graphics ad in sync with the rough drafts it grew from, and export the breakdown as MP4.项目地址https://gitcode.com/gh_mirrors/nu/NullMotion点击查看免费下载Null Motion是一款面向新手的开源动效广告拆解工具把一条成品动效广告motion-graphics ad放在上方循环播放下方同步展示它诞生前的黑白 HyperFrames 草稿按帧对齐、逐段标注 Hook / Reveal / App / End Card 等结构还能一键把整个拆解过程导出为 MP4 视频。什么是 Null Motion它解决什么问题一条 30 秒的动效广告看起来浑然天成但每一条都从一个粗略的分镜计划长出来哪个想法放在哪一段、每个动作在什么时间点出现。Null Motion 做的就是把这个计划和成品并排给你看上方成品影片全宽循环播放就是你在社媒上刷到的那种广告下方每个分段的草稿draft——纯黑白、Arial 字体、扁平图形、只有一个简单动作的 640×360 HTML 场景展示打磨之前的创意骨架帧级同步播放头playhead扫过草稿条当前屏幕所在的分段会跟随影片逐帧走并加上橙色描边其余分段各自循环自己的部分一键导出Download → Whole preview会把影片和草稿逐帧渲染成 1920 宽、24 Mbps 的 MP4保留影片原声它零依赖、纯本地运行仓库内置 3 条参考广告第一次启动就能玩非常适合用来学习动效广告的结构化拆解方法。2分钟跑起来本地运行步骤只需要 Node.js 22无需安装任何依赖git clone https://gitcode.com/gh_mirrors/nu/NullMotion cd NullMotion npm start然后打开http://127.0.0.1:4343在视频库里选择一条参考视频即可开始拆解。本地服务器由 server.js 提供支持按字节范围流式传输视频拖动进度条不会把整个文件读进内存。 如果 4343 端口被占用可以用PORT5000 npm start换端口。用 3 个内置示例看懂广告结构仓库在 showcase/references/drafts.json 中为 3 条参考视频各写好了分段草稿正好覆盖动效广告最常见的四种结构。分段时间点由 showcase/references/sections.json 记录。示例 1Infinite · Global payments0:307 段这是最适合入门的一条7 个分段几乎就是标准的动效广告剧本分段时间结构作用Hook0:00–0:04用 a pain 大字开场3 秒内抛出痛点抓住注意力Coin0:04–0:08视觉隐喻硬币爆开暗示支付Reveal0:08–0:13品牌露出logo Global 枢纽动效App0:13–0:17手机演示 Sign Up In Seconds / Send Funds AnywhereProducts0:17–0:23产品矩阵 Dash / SDKStablecoins0:23–0:26技术背书End card0:26–0:30品牌收尾 INFINITE.DEV 行动号召注意每个分段的草稿只有 1–2 个beat节拍比如 App 段就是两个手机卡片切换点精确对齐影片的真实剪辑点——这就是先有骨架、再上质感的动效广告制作流程。示例 2SaaS · Launch sequence1:028 段一条 1 分钟的 SaaS 发布广告结构更完整Hook图标墙 Newsroom 窗口→ Problembroken tools 通知气泡→ Platform → No code手机 卡片→ Launch → Analytics图表增长到 58.6K→ Generate → End card。对比 Infinite 可以看出短视频靠单点冲击长视频靠多段递进但 End card 都承担记住品牌 行动号召的收尾职责。示例 3Motion study 080:033 段只有 3 秒的运动研究片段拆成 Search搜索框输入→ Profile手机主页→ Follow关注动效三段。它适合用来观察单个 App 引导场景内部如何用输入框、手机、卡片这类 beat 类型input、phone、cards组织信息密度。帧同步与导出是怎么实现的进阶如果你好奇背后的机制核心就四步详见 README.md 的 How it works分段scripts/plan-sections.mjs 用 FFmpeg 场景检测把参考视频切成 3–8 段切点落在真实镜头切换处草稿引擎public/drafts.mjs 是小型 HyperFrames 引擎把每个 beattext、logo、phone、window、chart、burst等渲染成带暂停 GSAP 时间线的 HTML 场景播放驱动public/demo.mjs 用影片时钟驱动所有草稿时间线当前分段跟随影片、其余分段循环导出隐藏副本影片以半速播放requestVideoFrameCallback捕获每个解码帧WebCodecs 按帧时间戳以 24 Mbps 编码mp4-muxer.js 写 MP4——非实时录制所以不会丢帧如何导出拆解视频为 MP4用Chrome 或 Edge打开预览页Firefox / Safari 能看但无法导出点右上角Download → Whole preview耐心等待影片按半速逐帧渲染导出耗时至少是影片时长的 2 倍期间保持标签页在前台导出结果就是文章开头截图那样的完整拆解画面成品 草稿 播放头适合放进你的作品集或提案演示。常见问题与项目结构速览常见问题完整版见 README.md FAQ导入自己的视频需要 FFmpeg/ffprobe 和 Python 3运行python scripts/import-motionclone.py --source /path/to/MotionClone媒体保留在本地generation not connected 提示属于正常设计本仓库不包含 AI 生成草稿是手工编写的想继续深入了解编辑工作流可以看 docs/launch-editor.md关键文件位置预览页与导出逻辑public/demo.html、public/demo.mjs草稿 beat 引擎public/drafts.mjs3 条参考视频与分段数据showcase/references/本地服务器与媒体流server.js、media.js贡献指南CONTRIBUTING.md写在最后用 Null Motion 学动效广告拆解的方法很简单先看成品抓感觉再对照草稿看结构最后逐帧验证切点。Hook 在前 3 秒定生死Reveal 负责品牌记忆点App 段用产品演示建立信任End card 完成行动号召——把这四段结构吃透你再看任何动效广告都会自带拆解滤镜。赞分享【免费下载链接】NullMotionPlay a finished motion-graphics ad in sync with the rough drafts it grew from, and export the breakdown as MP4.项目地址https://gitcode.com/gh_mirrors/nu/NullMotion点击查看免费下载相关推荐用 h5i-app 构建 Web 应用完全教程从计算器示例看懂 Axum 内核架构用 h5i app 构建 Web 应用完全教程从计算器示例看懂 Axum 内核架构 h5i app 是 h5i 项目中基于 Axum 的 Rust Web 应FairScan源码结构拆解从3大模块看懂Android扫描应用的架构设计FairScan源码结构拆解从3大模块看懂Android扫描应用的架构设计 FairScan 是一款开源的 Android 文档扫描应用 主打简单 隐一眼看懂任意网页结构Libretto snapshot命令完整用法附5个实战示例一眼看懂任意网页结构Libretto snapshot命令完整用法附5个实战示例 Libretto 是面向浏览器自动化的 AI 工具包而 snapsho创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考