Rudywizz-motion は何をしますか？
決定論的レンダラー: すべてのフレームは（ヘッドレス Chromium + WebGL2 で）計算され、ffmpeg にパイプされます。そのため、同じ入力から常に同じ動画が得られます。このフォルダは自己完結型です:
engine/ cli.mjs (エントリ), host.js, timeline.js, camera.js, gl/ (シェーダー), data/ (地図), fonts/
styles/ スタイルごとに1フォルダ (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 ✓ browser ✓ 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. ジョブの形状を選択
| ユーザーの希望 | 実行すること |
|---|---|
| アニメーションテキスト/タイトル1つ | 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"' |
| エディター用の透明オーバーレイ（ローワーサード、キャプション、CTA） | render lower-third --text "名前 / 役割" --alpha --out name.mov |
| マルチシーンリール / ドキュメント / ティーザー / イントロ | init reel.json またはテンプレートから開始、その後編集（セクション4） |
テンプレート: node engine/cli.mjs templates で全テンプレートを1行説明付きで一覧表示します。
ユーザーのアセットの横にコピーし（cp "$RM/templates/<name>.json" .）、テキスト/パスを編集してレンダリングします。
3. ワークフロー（常に）
- スタイル、テキスト、フォーマット（デフォルト 9:16 1080×1920）、カメラ、グレードを決定します。
- まずスチルを確認 — 低コストでレイアウト問題を発見できます:
node "$RM/engine/cli.mjs" still <style|comp.json> --at 2.5 --size 540 --out "$TMP/check.png"→ PNG を開いて確認します。各シーンの開始、中間、終了の2～3箇所をチェックします。warning/error行を読んでください。タイポを特定し、正しいキーを提案します。 - レンダリング:
node engine/cli.mjs render … --out out.mp4 - 確認:
ffprobe -v error -show_entries format=duration -of csv=p=0 out.mp4で1～2フレームを取得します。 - ファイルを1行のコンテキストと共に納品します。
経験則
- 短いテキストが効果的: 行あたり1～6単語、最大約4行。改行には
" / "または\nを使用します。 - トルコ語の大文字小文字変換は、テキストに ğ/ş/ı/İ が含まれる場合は自動的に行われます。それ以外の場合は、トルコ語テキストに対して
--lang trを渡します（i → İ）。 - レンダリングは CPU 負荷が高く、1080p フレームあたり約0.2～0.5秒かかります。プレビューは
--size 540で行い、最終出力のみ 1080 で行います。 - ユーザーの許可なく Web から画像/クリップをダウンロードしないでください。ユーザーのファイルを使用します。
- 透明オーバーレイ:
--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パス、または 2.5D パララックス用のlayers: [{src, depth}]）、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ı」ボード | 1行に1ボード、colors |
| receipt | サーマルプリンターがメッセージを印刷し、切り離す | header、items、total、date |
| ink-bleed | インクの滴が文字に広がる | ink、paper |
| halftone-press | 2色リソグラフ印刷 | inkA、inkB、dot |
| signal-tune | 古いテレビ: スノーノイズ → テストカード → 放送中 | channel、station |
| inflate | Y2Kクロームバルーン文字 | chrome、face |
| orbit-ring | 惑星の周りをテキストのリングが回る | 1行に1リング |
| beat-cut | ビートごとに1単語をスタンプ、スイス風ポスター | bpm、offset |
| lyric-video | 歌詞がビートに合わせて単語ごとにハイライト | bpm、times、credit |
| captions | リールキャプション、アクティブな単語をピルで表示（--alpha 使用） | times、maxWords、pill、position |
| split-flap | 出発案内板が反転（トルコ太鼓） | title、cols |
| neon-sign | レンガ壁のネオン管、1本故障 | colors、broken |
| odometer | 数字が回転してカウントアップ | text "10000 takipçi"、prefix、suffix |
| pixel-quest | 8ビットタイトル画面 | pixel、subtitle |
| vhs-memory | ホームビデオテープ風 | date、clock |
| キネティックタイポ | ||
| word-stack | 均等割り付けのポスタースタック、各行が全幅で叩き込まれる | accent、beat、kicker |
| typewriter | 点滅カーソルで1キーずつタイプ | theme paper·terminal、speed、prompt |
| scramble | ランダムなグリフがテキストにデコード | font mono·display、resolve、hud |
| ticker-rows | 巨大な行が交互方向にスクロール | rows、tilt、speed、accent |
| highlight-quote | 引用がフェードイン、マーカーがキーワードをなぞる | author、highlight (words)、marker |
| glitch-title | RGBスプリット + データモッシュがクリーンなタイトルに収束 | subtitle、colors、every |
| 3D | ||
| extrude-3d | 肉厚の押し出し文字がスイングして回転 | face、side、bg、depth |
| cube-spin | キューブが面ごとに回転、各面に1行 | colors、ink、floor |
| text-tunnel | テキストのリングをくぐり抜けてタイトルへ | line 1 = title、rings、ring、colors |
| retro-grid | シンセウェイブグリッド、ストライプの太陽、クロームタイトル | line 1 chrome, rest script、sky、sun、speed |
| particle-sphere | パーティクル球が単語にモーフィング | count、morphAt、colors |
| card-carousel | カードの3Dリングが最後の行にランディング | images (local files)、turns、colors |
| ソーシャル＆ブロードキャスト | ||
| countdown | 3·2·1 がリングスイープと共に、その後テキスト | from、tick、accent |
| lower-third | ニュース/YouTube 名前ストラップ（--alpha 使用） | line 1 name, line 2 role、theme solid·glass·minimal、position |
| chat-story | メッセージングチャット、タイピングドット付き | 1行に1メッセージ、> = 自分、name、theme |
| bar-chart | 棒グラフレース、値がカウントアップ | items: [["A",10],…]、unit、note、source |
| cta-follow | カーソルがフォローをクリック、チェック＋紙吹雪 | line 1 handle, line 2 button, line 3 subtitle、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を渡します。