ClaudeMap

Bang Motion

做浏览器动效的 agent skill——片头、宣传片、栏目包装、动态文字与讲解动画,产出一个自动播放的 index.html。

技能与命令skillmotion-graphicsanimationgsapfrontend

Bang Motion 把职业动效师的坚持固化成 agent 能在代码里自验的结构检查:一个连续的世界、真正会运动的镜头、跨场景存续的主体、每秒都有运动——没有淡入淡出的 section,也不允许幻灯片假装视频。产出是单个 index.html(GSAP、自动播放、循环、时间轴确定性),既可装成 Claude Code 插件,也可作为普通 skill 目录给 Codex、Gemini CLI、Cursor 用。

它做什么

  • agent 可自验的硬性反幻灯片检查:禁止淡入淡出的 <section>、要有视觉贯穿线、文字层级至多两级、每秒都有运动、转场要有变化
  • 菜单制而非默认值:8 种风格方向、11 种背景运动、6 种背景表面、9 种转场、6 种高亮形状——且同一选择跨项目不得重复
  • 五种讲解风格各配 starter:卡通拼贴、视觉新闻、白色目录、复古手绘、连续动作
  • 时间轴确定性(每帧都是时间的纯函数),外加把动画重新对时到你的配音的工作流

什么时候用

适合需要真实动效的产品与营销页面——片头、宣传片、栏目包装、动态文字——但没有动效师、也不想搭视频管线:交付物就是一个能直接嵌进页面的 HTML 文件。

如何上手

# Claude Code 插件方式:
/plugin marketplace add bangtutorial/bang-motion
/plugin install bang-motion@bang-motion

# 手动(任意 agent):
git clone https://github.com/bangtutorial/bang-motion
# Claude Code:复制到 ~/.claude/skills/bang-motion

注意事项

产出是浏览器动效不是渲染好的 MP4——播放需要联网(GSAP 与字体走 CDN),导出 MP4 只能靠可选的 Node + puppeteer + ffmpeg 脚本。

代码仓库

bangtutorial/bang-motion

收录日期

地图上的相关资源

  • 归藏的 Agent Skill:把代码库的最近更新做成一支成片宣传片——接真实组件、代码渲染动画、代码写配乐,全程不碰视频剪辑软件。

    • agent-skill
    • video
    • promo
    • marketing
  • 一个给「图里没有任何文字线索」的照片做地理定位的 Agent Skill——用 OSM 几何、高程天际线与卫星瓦片,把「这是哪」变成带误差半径的测量答案。

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
  • Birdview

    技能

    让 AI 编码 agent 在动第一行代码之前先画出架构、声明影响范围的 skill——成果是一张可直接打开的独立 HTML 架构地图。

    • skill
    • architecture
    • code-visualization
    • change-scope