Communitygithub.com

Rudywizz/rudywizz-motion

从代码生成电影级动态图形视频——包括动态排版、3D 标题、地图路线动画(世界、地球、土耳其省份)、社交媒体模板(底部三分、字幕、聊天故事、倒计时、条形竞赛、关注号召)、泛黄历史文档风格的雕刻图像,以及用户自己的剪辑结合摄像机运动、着色器过渡、调色和胶片效果的全套 Reel。

rudywizz-motion 是什么?

这是一个确定性渲染器,专为需要从代码生成高质量、可复现动态图形视频的开发者和 AI 代理设计。其核心原理是:每个视频帧由无头 Chromium 加上 WebGL2 计算,然后通过 ffmpeg 管道输出,因此相同输入始终产生相同视频。该工具支持包括动态排版、地图路线动画、3D 标题、社交媒体模板(底部三分、字幕、聊天故事、倒计时、条形竞赛、关注号召)、图像雕刻风格化以及用户剪辑的摄像机运动、过渡、调色和胶片效果在内的多种风格。它通过一个独立的 CLI 工具运行,提供“渲染前检查单帧”的工作流来快速验证布局,并利用合成 JSON 文件编排多场景项目。支持 Playwright、Node.js 和 ffmpeg,适用于 macOS、Windows 和 Linux。主要用例包括制作宣传视频、社交媒体内容、地图动画和统一的影视级动态图形资产。

兼容平台✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Rudywizz/rudywizz-motion/tree/HEAD/skills/rudywizz-motion

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

rudywizz-motion 是做什么的?

确定性渲染器:每一帧都由计算生成(无头 Chromium + WebGL2)并通过 ffmpeg 管道输出, 因此相同输入始终产生相同视频。此文件夹是自包含的:

engine/      cli.mjs(入口)、host.js、timeline.js、camera.js、gl/(着色器)、data/(地图)、fonts/
styles/     每个风格一个文件夹(style.js)
templates/  现成的合成(JSON)
assets/demo/ 原始演示插图(CC0)

1. 一次性设置(首次渲染前检查)

RM="${CLAUDE_SKILL_DIR}"                       # 包含此 SKILL.md 的文件夹
[ -f "$RM/engine/cli.mjs" ] || RM=$(ls -dt "${CLAUDE_PLUGIN_ROOT}/skills/rudywizz-motion" ~/.claude/plugins/cache/*/rudywizz-motion/*/skills/rudywizz-motion ~/.claude/skills/rudywizz-motion .claude/skills/rudywizz-motion 2>/dev/null | head -1)
TMP=$(node -p "require('os').tmpdir()")       # bash 和 Node 都能识别的临时目录(Windows 也适用)
cd "$RM" && npm install --no-audit --no-fund   # 安装 playwright(唯一依赖)
node engine/cli.mjs doctor                    # Node ✓ ffmpeg ✓ 浏览器 ✓ WebGL2 ✓ — 每个 ✗ 会打印修复方法

在用户文件夹中运行渲染:node "$RM/engine/cli.mjs" …,这样相对路径可正确解析。 如果浏览器检查失败:npx playwright install chromium(或设置 RM_CHROME=/path/to/chrome)。 如果缺少 ffmpeg,请告诉用户如何安装(macOS brew install ffmpeg,Windows winget install ffmpeg,Linux apt install ffmpeg)。

2. 选择任务类型

用户想要执行这个
一个动画文本/标题render <style> --text "…"
地图/路线动画render map-route --set 'route=["İstanbul","Konya"]'
将自己的图片绘制成雕刻效果render image --image photo.jpg --look engrave --grade sepia --film 0.6
对用户剪辑应用摄像机运动render clip --clip in.mp4 --camera handheld --set speed='"ramp-mid"'
为编辑器生成透明叠加层(底部三分、字幕、号召行动)render lower-third --text "姓名 / 职位" --alpha --out name.mov
多场景 Reel/文档/预告片/片头init reel.json 或从模板开始,然后编辑(第4节)

模板:node engine/cli.mjs templates 列出所有模板及一行描述。 将模板复制到用户资产旁边(cp "$RM/templates/<name>.json" .),编辑文本/路径,然后渲染。

3. 工作流(始终遵循)

  1. 确定风格、文本、格式(默认 9:16 1080×1920)、摄像机、调色。
  2. 先检查静态帧——成本低且能捕捉布局问题: node "$RM/engine/cli.mjs" still <style|comp.json> --at 2.5 --size 540 --out "$TMP/check.png" → 打开 PNG 查看。检查 2-3 个时刻(每个场景的开始、中间、结束)。阅读任何 warning/error 行:它们会指出拼写错误并建议正确的键。
  3. 渲染:node engine/cli.mjs render … --out out.mp4
  4. 验证:ffprobe -v error -show_entries format=duration -of csv=p=0 out.mp4 并抽取一两帧。
  5. 交付带一行上下文的文件。

经验法则

  • 短文本最优:每行 1-6 个单词,最多约 4 行。使用 " / " 或 \n 作为换行符。
  • 当文本包含 ğ/ş/ı/İ 时会自动应用土耳其语大写规则;否则传递 --lang tr 来处理土耳其语文本(i → İ)。
  • 渲染是 CPU 密集型:每帧 1080p 约 0.2-0.5 秒。使用 --size 540 预览,最终渲染用 1080。
  • 未经用户同意,绝不从网络下载图片/剪辑;使用用户的文件。
  • 透明叠加层:--alpha --out file.mov(ProRes 4444)或 .webm。
  • 音乐:--audio song.mp3 和 --bpm N,以便 beat-cut、lyric-video 和 beat-punch 摄像机命中节拍。

4. 合成 JSON

{
  "format": "9:16",
  "lang": "tr",
  "bpm": 96,
  "audio": "song.mp3",
  "look": { "grade": "teal-orange", "bloom": 0.3, "grain": 0.05, "leak": 0.2, "aberration": 0.3,
            "vignette": 0.3, "film": 0, "weave": 0, "distortion": 0 },
  "motionBlur": 1,
  "scenes": [
    { "style": "map-route", "route": ["İstanbul", "Kapadokya"], "duration": 6, "camera": "drift",
      "transition": { "type": "whip", "duration": 0.45, "dir": "left" } },
    { "clip": "beach.mp4", "in": 3.2, "duration": 2.5, "speed": "ramp-mid", "camera": "handheld",
      "overlay": { "style": "captions", "text": "Kaş, Antalya" },
      "transition": { "type": "burn", "duration": 0.8 } },
    { "image": "portrait.jpg", "look": { "type": "engrave", "reveal": 3 }, "duration": 4, "camera": "push-in" },
    { "style": "neon-sign", "text": "See you / soon", "duration": 3 }
  ],
  "overlays": [ { "style": "captions", "text": "…", "from": 0, "to": 5 } ]
}
  • 场景类型:style(任何风格 ID 及其选项)、image(image 路径,或 layers: [{src, depth}] 用于 2.5D 视差)、clip(clip、in、speed:数字 | ramp-in | ramp-out | ramp-mid)、color。
  • 路径相对于 JSON 文件。
  • transition 位于它离开的场景上。下一个场景在此场景结束前 duration 秒开始。
  • overlay = 绘制在该场景顶部的风格(随其摄像机移动)。overlays = 固定在所有内容之上,不进行调色。
  • 摄像机:预设名称或 { "preset": "drift", "amount": 0.6, "shake": 0.5, "keys": [{ "at": 0, "zoom": 1 }, { "at": 1, "zoom": 1.3, "ease": "outExpo" }] }。

5. 目录

摄像机 — static, drift, push-in, pull-out, punch-in, crash-zoom, whip-from-left, whip-from-right, whip-from-top, spin-in, rise, orbit, tilt-reveal, tilt-left, tilt-right, vertigo, handheld, float, beat-punch。摄像机运动自动应用运动模糊。

转场 — cut, fade, flash, dip, whip, zoom, spin, glitch, ink, burn, liquid, iris, wipe, blinds, pixelate, leak, cube, ripple, doors, stretch, luma。

效果(图像/剪辑) — engrave(墨水绘制 → 网线 → 棕褐色水洗)、sketch、oldphoto、duotone、halftone、posterize、noir。选项:{ "type": "engrave", "reveal": 3, "delay": 0.2, "paper": "#ece0c4", "ink": "#33210f" }。

调色 — none, teal-orange, kodak, fuji, sepia, noir, bleach, cyber, sunset, matte(+ gradeAmount 0–1)。

风格 — 运行 node engine/cli.mjs list 获取实时列表。每种风格的选项在 styles/<id>/style.js 顶部文档中(defaults + options)。

风格功能关键选项
map-route地球/平面地图/土耳其省份上的路线飞行,带大头针和标签route, mode globe·flat·turkey·auto, theme dark·atlas·light, icon, highlight
history-title金色年份计数器 + 章节标题text "1453 / Title / Subtitle", from
parchment-letter焦黄羊皮纸,手写体 + 羽毛笔 + 蜡封place, signature, seal
murmuration椋鸟群折叠成文字birds, 天空颜色
led-marquee商店/小巴 LED "kayan yazı" 板每行一块板, colors
receipt热敏打印机打印消息,撕下header, items, total, date
ink-bleed墨滴扩散成字母ink, paper
halftone-press双色孔版印刷inkA, inkB, dot
signal-tune老电视:雪花 → 测试卡 → 开播channel, station
inflateY2K 铬色气球字母chrome, face
orbit-ring围绕行星的文字环每行一个环
beat-cut每拍一个印章文字,瑞士海报风格bpm, offset
lyric-video歌词逐词在节拍上点亮bpm, times, credit
captionsReel 字幕,当前活动词在圆角矩形内(使用 --alpha)times, maxWords, pill, position
split-flap出发牌翻转(土耳其鼓)title, cols
neon-sign砖墙上的霓虹灯管,一根有故障colors, broken
odometer滚动数字计数到目标数字text "10000 takipçi", prefix, suffix
pixel-quest8 位标题画面pixel, subtitle
vhs-memory家用录像带效果date, clock
动态排版
word-stack对齐的海报式堆叠,每行全宽弹入accent, beat, kicker
typewriter逐键打字,带闪烁光标theme paper·terminal, speed, prompt
scramble随机字形解码为文本font mono·display, resolve, hud
ticker-rows巨大行交替方向滚动rows, tilt, speed, accent
highlight-quote引言淡入,标记划过关键词author, highlight(单词), marker
glitch-titleRGB 分离 + 数据损坏后归位为清晰标题subtitle, colors, every
3D
extrude-3d厚重挤压字母摆动并旋转face, side, bg, depth
cube-spin立方体逐面旋转,每面一行colors, ink, floor
text-tunnel穿过文字环飞向标题第1行=标题, rings, ring, colors
retro-grid合成波网格,条纹太阳,铬色标题第1行铬色,其余手写体, sky, sun, speed
particle-sphere粒子球变形为文字count, morphAt, colors
card-carousel3D 卡片环停在最后一行images(本地文件), turns, colors
社交与广播
countdown3·2·1 带环形扫描,然后显示文字from, tick, accent
lower-third新闻/YouTube 姓名条(使用 --alpha)第1行姓名,第2行职位, theme solid·glass·minimal, position
chat-story即时通讯聊天带打字点每行一条消息,> = 我, name, theme
bar-chart条形竞赛图,数值递增计数items: [["A",10],…], unit, note, source
cta-follow光标点击关注,勾选 + 彩纸第1行用户名,第2行按钮,第3行副标题, done

风格选项在 --set key=value 中传递(JSON 值:--set 'route=["A","B"]'),或作为场景对象的键。

6. 故障排除

  • unknown place "X"(map-route):使用 "lat,lon" 或 { "name": "X", "lat": 0, "lon": 0 }。
  • 文字被摄像机运动裁剪:降低摄像机 amount 或使用 drift/float。
  • 渲染缓慢:草稿使用 --size 540。避免 --motion-blur 超过 4,除非用户要求最佳质量。
  • 输出为白色/空:运行 still 并阅读错误;doctor 检查 WebGL2。
  • Windows PowerShell / cmd 会破坏 --set 'route=["A","B"]':将选项写入文件并使用 --params opts.json,或使用合成 JSON。
  • 包含土耳其语名称(ı, ş…)的英语文本会自动应用土耳其语大写规则;传递 --lang en 可停止此功能。

相关技能