vibe-video — AI駆動の短尺動画生成（コード→MP4）
あらゆるアイデアを、コードだけで短く雰囲気のある動画に変換します。AIがCanvas/JSアニメーションを書き、フレーム単位でレンダリングし、必要に応じてBGMを合成してMP4に出力します。
使用するタイミング
このスキルは、以下のような短尺動画（15秒～60秒）を作成したい場合に使用します。
- 知識解説 — ノーベル賞の事実、科学原理、心理学の洞察
- 感情メタファー — 愛着、不安、手放すこと、記憶
- 商品プロモーション — アプリの機能、ブランドストーリー、ローンチ告知
- 社会評論 — 行動パターン、文化現象
- 抽象コンセプトアート — 純粋な視覚詩、ループアニメーション
ワークフロー（5ステップ、スキップ禁止）
ステップ 1: 明確化（最大3つの質問）
以下の項目をユーザーと確認します。
- 尺 — 15秒 / 30秒 / 45秒 / 60秒（デフォルト30秒）
- アスペクト比 — 9:16（縦長）/ 16:9（横長）/ 1:1（正方形）（デフォルト9:16）
- スタイル —
style-presets.mdのスタイルプリセットを参照 - トピックと感情の流れ — コアメッセージは何か？どんな感情を残すべきか？
ステップ 2: ストーリーボードの出力
コードを書く前に、ストーリーボードテーブルを作成します。
| 時間 | 視覚的説明 | キャプション（20文字以内） | 視覚/音声の合図 |
|------|------------|---------------------------|------------------|
| 0-3s | ... | ... | ... |
ルール:
- 各キャプションは2秒以上表示、結論部分は3秒以上
- 最初の3秒でフック（直感に反する事実 / 感情的な導入 / コアペインポイント）
- 5～8カット、テンポは 遅い→速い→遅い
- 視覚的説明には、形状、色、動きの方向、カメラワークを明記すること
次のステップに進む前に、ユーザーの確認を待ちます。変更が要求された場合は、指定されたカットのみ修正します。3カット以上変更する場合は、ストーリーボード全体を再出力します。
ステップ 3: レンダリングコードを書く
assets/templates/animation.js + animation.htmlを開始点としてコピーします — これらはレイヤーシステム、キャプションフェード、シード付きPRNG背景、window.seek(t)コントラクトを実装しており、ライブブラウザプレビューも含まれています。STORYBOARDとdraw*()関数を編集します。
完全な技術仕様についてはrendering-guide.mdを参照してください。クイックリファレンス:
// 時間駆動アニメーション — すべての視覚要素はtの純粋関数
//（Math.random()やDate.now()は使用禁止 — 必要な場合はシード付きPRNGを使用し、
// どのフレームも静止画と再開レンダリングで同一に再レンダリングされるようにする）
function seek(t) {
// t = 現在の時間（秒）
// このフレームの視覚状態を返す
// 位置/不透明度/スケールには線形補間を使用
}
// レイヤーシステム
// レイヤー0: 背景（グラデーション / パーティクル）
// レイヤー1: メイン被写体
// レイヤー2: 動的装飾（光の糸 / パーティクル / ライン）
// レイヤー3: キャプションオーバーレイ
// エクスポート
// Playwrightヘッドレス → 各フレームをスクリーンショット → ffmpeg合成
ステップ 3.5: ストーリーボード → H3プロンプト（事前チェック）
確認済みのストーリーボードとレンダリングコードの最初の行の間に挿入します。ストーリーボードは人間向けに書かれています。H3は異なる文法を必要とします。事前に翻訳しておくことで、このパイプラインで唯一修正不可能なミス — オン・モデルであるべきキャラクターを再描画するAIショット — を防ぎます。
# 最初にlint: タイムラインギャップ、H3ウィンドウ（4～15秒）、エンジン割り当て、クレジット見積もり
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
次に、H3ショットごとに6セクションのプロンプトブロックを出力し、そのカメラ番号とカットマークをアニメーションコードにコピーして、2つのレイヤーが同期するようにします。
完全な手順、フィールドルール、チェックリスト、lintテーブル: storyboard-to-h3.md
ステップ 4: レンダリングと合成
まず静止画をプレビューします — 1フレームの確認は約1秒、フルレンダリングには数分かかります:
# ルックチェック（t=0 / 4 / 10秒で。インストール済みのEdgeまたはChromeを自動使用）
node assets/templates/still.js --html animation.html --times 0,4,10
# フレームレンダリング（12～15fpsで十分なことが多い。滑らかな動きには24～30が効果的）
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# 合成（FFMPEGがPATHにない場合はFFMPEG=/path/to/ffmpegを設定）
bash assets/templates/composite.sh ./frames output.mp4 30
# BGM付き
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# ハイブリッド: AI雰囲気プレート上のCanvasレイヤー（透過フレーム、キーイングなし）
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Windowsの注意点: bash composite.shが正常に動作しない場合（Git Bash shim / 切り詰められたPATH）、rendering-guide.mdのトラブルシューティングを参照して、Nodeからchild_process.spawnで直接ffmpegを起動します。
レガシー手動コマンド:
# フレームレンダリング
node render.js # outputs frames/frame_0001.png ...
# ffmpegで合成
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# BGM付き
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
ステップ 5: 納品
納品物: MP4ファイル + ストーリーボード + ソースコード。ファイルサイズ目標: 30秒で50MB未満。
このスキルに含まれるファイル
| ファイル | 目的 |
|---|---|
SKILL.md | このファイル — メインスキル定義 |
style-presets.md | カラーパレットとレンダリングのヒントを含む6つのビジュアルスタイルプリセット |
rendering-guide.md | 技術仕様: Canvasレンダリング、イージング、決定論ルール、トラブルシューティング |
metaphor-library.md | 抽象概念のビジュアルメタファーマッピング |
caption-guide.md | キャプションのタイポグラフィ、タイミング、トーンルール |
bgm-guide.md | 動画タイプ別BGM選択ガイド |
storyboard-to-h3.md | 事前チェック: コードを書く前のストーリーボードlint + H3 6セクションプロンプトブロック |
../assets/templates/lint-storyboard.js | ストーリーボードlinter: タイムラインギャップ、H3 4～15秒ウィンドウ、エンジン割り当て、クレジット見積もり |
../assets/templates/animation.js + animation.html | 編集可能なひな形（レイヤー、キャプション、シード付き背景、ライブプレビュー） |
../assets/templates/render-playwright.js | フレームレンダラー: ブラウザ自動検出（Edge/Chrome/chromium）、ペイント同期スクリーンショット |
../assets/templates/still.js | 単一フレーム静止画レンダラー（簡易ルックチェック用） |
../assets/templates/composite.sh | ffmpeg合成ツール（動画 / 動画+BGM、FFMPEG=オーバーライド） |
../assets/templates/render-template.js | Node-canvasバリアント（ブラウザ不要。CSS/フォントは制限あり） |
プロンプト例
知識解説
タマネギを切ると涙が出る理由について、30秒16:9の知識動画を作成してください。
スタイル: tech-blueprint。流れ: 現象 → メカニズム → 解決策。
感情メタファー
所有欲について30秒9:16の感情動画を作成してください。
スタイル: soft-glow。ビジュアルメタファー: 光の糸が巻き付く → 緩む → 蛍。
商品プロモーション
フォーカスアプリの15秒9:16商品プロモーション動画を作成してください。
スタイル: minimal-line。流れ: ペインポイント → 解決策 → 結果。
ライセンス
MIT — LICENSEファイルを参照。個人・商用利用無料。