Bang Motion

Bang Motion 是一套智能体技能，让编程智能体做动态图形，而不是幻灯片式网页。交付物是一份自动播放、循环的 index.html。仓库 bangtutorial/bang-motion 是 HTML，创建于 2026-09-05，MIT。README 徽章写 version 1.19.0。2026-09-19 GitHub 显示 390 star、62 fork。390 star 是热度信号，不是访问量。

它配合 Claude Code、Codex、Gemini CLI、Cursor。Remotion 产品片对照 video-shotcraft。黑底讲解片对照 anything2explainer。董事会甲板对照 consulting-pptx-skill。

核心功能

• 一份 HTML：双击播放。?debug=1 加时间轴。可选 scripts/export-frames.mjs（Node、puppeteer、ffmpeg）导出 MP4。
• 菜单，不是一种脸：10 种风格方向、19 种概念、9 个渲染族。必须先写风格简报，从品牌推导色与字。README 要求智能体不要抄 starter 的皮。
• 它点名的活：开场与宣传（15–40 秒）、SaaS 导览（20–60 秒）、动态字体（10–30 秒）、台标（3–10 秒）、讲解（30–120 秒，16:9 或 9:16）。
• 影像层：你的 MP4 或生成片段，蒙版后和场景同一时间轴。
• 可选 After Effects：AE 打开且接上 Higgsfield MCP 时，可做卡通讲解。

限制：观看需要浏览器，以及 CDN 加载的 GSAP 和字体。逐帧质检和 MP4 导出是可选 Node 任务。只装一份。插件和同名手动目录会冲突，插件优先。

适用场景

• 必须像视频、不能像 PPT 的发布片和产品导览。
• 台上始终是同一个主体 的讲解。
• 跳过：要 36 英寸科研海报或咨询 PDF，用 PPTX Posters 或 consulting-pptx-skill。

定价方案

快速开始

1. Claude Code：/plugin marketplace add bangtutorial/bang-motion，再 /plugin install bang-motion@bang-motion。
2. 或克隆到 ~/.claude/skills/bang-motion（或 Codex 技能目录）。
3. 要开场、宣传或讲解，并附上品牌简报。
4. 打开 index.html。导出帧之前加 ?debug=1。

第一方入口：README。

常见问题

产物是视频文件吗？

默认是像视频一样播放的 HTML。MP4 是可选逐帧导出。

能给参考片吗？

能。README 说可以借节奏和运动语言，不能借色板、字体、布局或标志性镜头。

必须有照片吗？

只有照片风格需要。否则选字体或插画。

替代方案

• video-shotcraft：Remotion 电影感产品片。
• anything2explainer：带 TTS 的 Remotion 讲解。
• consulting-pptx-skill：静态董事会甲板。

使用技巧

1. 不要同时装插件和第二个同名目录。
2. 外观从品牌简报推导，不要从上个项目抄。
3. 先 ?debug=1，再花 ffmpeg 一遍。

总结

Bang Motion 是开源动态设计技能，专门对付只会吐幻灯片的智能体。只装一份、写品牌简报、交出会动的 HTML。要真正的视频图用 Remotion 技能；静态海报跳过。