skill-motion: コードで作るアニメーション映画
この形式の映画は、あらゆるフレームを <canvas> に描画するJavaScriptファイル（seek(t)）、
サウンドトラック（banda.mp3：音声＋音楽＋効果音）、そしてその2つを合成したMP4レンダリングで構成されます。
作業時間は約2時間、ElevenLabsの費用はわずか数セント、フレーム単位で修正可能で、
インターネット接続なしでプレゼンテーション内でライブ実行することもできます。
2つのモード。 ストーリーモード（キャラクター、コミック調またはソフト調、感情に訴える）と
コマーシャルモード（実商品、リズム、約束、購買意欲を促す）があります。
開始前にどちらかを決めてください。「マーケティング」「コマーシャル」「プロ」「デモ」「クライアントに見せる」
などの言葉があれば、references/promo.md を読み、assets/motor-promo.js を使用します。
| リクエスト | エンジン | 参照ファイル |
|---|---|---|
| 誕生日、家族、招待、キャラクター登場のストーリー | motor-base.js（コミック調）または motor-suave.js（ソフト調） | guion.md、chispa.md |
| コマーシャル、ウェブ/アプリのデモ、購入者向け動画、Reels | motor-promo.js + filmar_web.py | promo.md |
| 技術的なルック、ドキュメンタリーカメラ風のブランド・ローンチ | motor-tech.js | motor-visual.md セクション9 |
| 傾く地図、実ウェブなしで飛び回るカメラ | motor-3d.js | chispa.md |
| 数値やメカニズムの説明：寸法、ラベル、読み上げ、テクニカルイラスト | motor-acotaciones.js（他のエンジンと併用） | motor-visual.md セクション12 |
| 3Dシーンを周回・移動するカメラショット | motor-3d.js 末尾の Orbita3D | motor-visual.md セクション13 |
これを機能させているのは技術ではなく、3つの習慣です。語ることはすべて真実である、 推測せずにDeepgramで聴く、レンダリング前にコマ送りシートで見る。 Claudeは動作中に動画を見たり音声を聞いたりできません。これら2つの確認手段が、Claudeの目と耳の役割を果たします。
必要なもの
Node 18以降、Python 3、ffmpeg、Chrome。音声と音楽用にElevenLabsアカウント（ELEVENLABS_API_KEY）。
結果を「聴く」ためにDeepgramアカウント（DEEPGRAM_API_KEY、オプション）。詳細は INSTALAR.md を参照。
各ファイルの場所
| 必要なもの | ファイル |
|---|---|
| スパーク："良い"ではなく"すごい"を生み出すためのチェックリスト（脚本の前に読む） | references/chispa.md |
| コンセプト、試したスタイル、フレーズ、声の割り当て、タイムシート | references/guion.md |
| 音声、音楽、効果音、ミックス、Deepgramで聴く | references/sonido.md |
| 描画エンジン、キャラクターとポーズ、コミック調スタイル、構図ルール | references/motor-visual.md |
| レンダリング、軽量版、プレゼンテーション、公開、git | references/entrega.md |
| .jsの出発点：コミック調またはソフト調 | assets/motor-base.js（コミック調）、assets/motor-suave.js（ソフト調、年齢を重ねるキャラクター付き） |
| 動画を表示するページとコマ送りシート | assets/pelicula.html、assets/hoja.html |
| プレゼンテーション内の動画（スライド＋コントローラー）とビルダー | assets/pelicula-en-presentacion.html、assets/construir.py |
| スクリプト | scripts/（キー、音声、音楽、ナレーション、効果音、ミックス、Deepgram、レンダリング、軽量版） |
| 含まれるCC0効果音 | sfx/（クレジットは sfx/LICENSES.md） |
| Canvas上の擬似3D（傾く地図、飛び回るカメラ、ネオンの床） | assets/motor-3d.js |
| ブランド・ローンチ向け「テック＆プロ」スタイル：ドキュメンタリーカメラ（HUD）、フォーカスフレーム、アラート、スキャン、インターフェースカード、ダッシュボード、グリッド床 | assets/motor-tech.js と references/motor-visual.md セクション9 |
| プロ向けコマーシャル、プロダクトデモ、16:9、9:16、1:1フォーマット | references/promo.md、assets/motor-promo.js |
| GPUを使用したフレーム単位の実ウェブ撮影 | assets/filmar_web.py |
| クライアントブリーフとフレーム範囲指定付き固定ストーリーボード（コマーシャル描画前） | assets/brief-cliente.md、assets/storyboard-plantilla.md、references/promo.md |
弧を描くカーソル、クリック、タイピング、バウンス入力、オフセット、ドリフト、カメラプッシュ。コマーシャル内のポインター移動はすべて弧を描き、クリック前に一時停止（cursorPro）。直線移動は禁止。 | motor-promo.js（cursorPro、cursor、tecleo、entra、escalonar、deriva、empuje）、references/motor-visual.md セクション11 |
| セーフゾーン、ベクターインターフェース、「レンダリング前に確認する」チェックリスト、磨き上げバンク | references/promo.md |
一行レビュー用の DATOS ブロック内のスクリプト数値。音声なしレンダリング。 | references/entrega.md セクション11 |
スクリプト注釈（[VISUAL]、ポーズ）、画面上の数字とその単語 | references/guion.md セクション8 |
| プロポーション付きショット語彙、時間の凍結 | references/chispa.md |
| BPM測定と小節に基づく音楽の並び替え | scripts/pulso.py、scripts/cortar_musica.py、references/sonido.md セクション13 |
| テストセグメント、部分ごとの組み立て、再レンダリング不要の新しい音声 | references/entrega.md セクション8 |
| 製品変更により納品済みの映画を修正する | references/entrega.md セクション10 |
| 本人の声による挨拶とフライヤー付き招待 | references/sonido.md セクション9、references/entrega.md セクション7 |
プロセス
手順を順に実行します。各手順には、次の手順に進む前の確認工程があります。
0. 今、動画を作るべきか？ 動画がビジネスの数値（利益、価格、顧客数、納期）を伝える場合、脚本を書く前にそれらの数値の公式な情報源が存在しなければなりません。2つの異なる数値を出すモデルがある場合、または数値が議論中の場合、動画は作成しません。その旨を伝え、代わりにスプレッドシートを開いて話し合うことを提案します。動画は2時間の労力を要し、見た人の頭の中に一つの数値を固定します。詳細は references/guion.md セクション9を参照。
1. コンセプト（相手と一緒に）。 モード（上記）を決定。まず references/chispa.md：破るルールのあるフォーマット、ひねり、個人名、再登場するキャラクター、そして「すごい」瞬間。誰に向けて、何を感じてもらうか、尺、どこで見せるか。3つのコンセプトを、それぞれ2～3文とテキストプレビュー、トーン（試したスタイルは references/guion.md にあり）で提案します。相手がアイデアを出した場合は、それを忠実に実行します。リクエストの各要素が一つのシーンになります。
2. 主張内容の検証。 動画が製品について述べることはすべて、そのコード内で確認します。コードにないことは述べません。コードにあっても無効化されていることは、述べ、その旨を相手に通知します。これはまだ存在しないビジネスやプロジェクトでも同様です。各数字は GUION.md に情報源とともに事実、仮定、提案として記録し、「保証」「既存」「数秒で」「法令遵守」「価格」など、責任を伴う言葉は、決定済みでどこかに文書化されている場合のみ使用します（references/guion.md セクション9）。
3. 脚本。 動画フォルダ内の GUION.md：相手からのテキストリクエスト、音声、音楽、秒、話者、フレーズ、映像をまとめた表。フレーズは短く、1トラックに1つ、スペイン語（中立）、長いダッシュは使用しません。
4. 音声。 source scripts/llaves.sh と scripts/voces.py frases.json を実行。Deepgramで聴き、--solo で失敗したものを再作成。ナレーションが相手のボイスメモの場合は、フレーズはありません：references/sonido.md セクション9と10を参照。
5. タイミング。 scripts/armar_narracion.py <inicios> --total <s>：フレーズ間に余白と、映像だけが語る隙間を設けます。Deepgramから palabras.json（各単語の秒数）を取得して同期します。
6. 音楽。 シーンに沿ったセクションごとの計画（scripts/musica.py）；scripts/pulso.py で拍と音量を測定。セクションが別の場所に当たった場合は、scripts/cortar_musica.py で並び替えます。
7. ミックス。 含まれているCC0効果音ライブラリ（sfx/）および合成効果音（scripts/efectos_sinteticos.py）、scripts/mezclar.py efectos.json で -16 LUFS に。確認： oir_con_deepgram.py --comparar ナレーション単体とトラック全体を比較：単語の欠落がないこと。欠落がある場合は、その秒に鳴っている効果音を下げるか、音楽に隙間を開けます。
8. 描画。 コマーシャルの場合、最初にブリーフと固定ストーリーボード（assets/brief-cliente.md）、そして製品を撮影（references/promo.md）。スタイルに合ったエンジン（assets/motor-base.js コミック調、assets/motor-suave.js ソフト調、または assets/motor-promo.js コマーシャル）を mi-pelicula/pelicula.js としてコピーし、グローバル名を変更し、タイムシートに従ってシーンごとに関数を記述。assets/ から pelicula.html と hoja.html（.jsとグローバルの名前を変更。別のフォントを使用する場合は追加）。キャラクターは汎用的にし、実在の人物は描かない。
9. コマ送りシート。 source scripts/preparar_render.sh と node $R/render.mjs pelicula.html fotos.png --stills ... を1シートあたり9フレーム、全編にわたって実行。確認し、隠れている、切れている、小さい、ずれている、読めない箇所を修正（典型的なエラー一覧は references/motor-visual.md にあり）、再度確認。コマーシャルの場合、SEGURAS=1 でセーフゾーンを描画し、promo.md に「レンダリング前に確認する」チェックリストがあります。
10. レンダリング。 node $R/render.mjs pelicula.html <path>.mp4 30 1 6 をバックグラウンドで実行。MP4を動画フォルダにコピー。scripts/liviano.sh でメッセージングで送信できる軽量版を作成。軽量版の1フレームを確認。スタイル変更が大きい場合は、まずセグメントを再作成し、そのセグメントのみをレンダリングして相手に動きを見せます（references/entrega.md セクション8）。音声のみ変更の場合はレンダリングせず、新しいトラックをミュート動画に結合します。
10.b 動画のテキスト確認。 scripts/revisar_texto.sh <path>.mp4 'word1|word2'：最終MP4上で毎秒1フレームのOCRを実行し、製品から削除された各単語を確認（tesseract が必要）。ボタンのテキストは動画ファイルに保存されます。製品の語彙が変更された場合は、再撮影と再フィルムが必要です（references/entrega.md セクション10）。
11. 納品。 シーンごとの要約、確認内容、相手の決定事項を含むMP4。同じ動画からフライヤーを作成可能（references/entrega.md セクション6と7）。プレゼンテーションに入れる場合：data-peli スライド、コントローラー、フォント、construir.py、そしてブラウザでのテスト。
12. 保存。 スクリプト、.js、ページ、音声mp3とjsonをgitに追加（wavとmp4は除外）。フォルダのLEEMEにセクションを追加。
譲れないルール
- 真実： 製品や実在の人物についての嘘は禁止。デリケートな話題（転倒、健康）は控えめに、誠実な小さな文字で。
- キー： 環境変数から
llaves.shで読み取り、決して出力したりファイルに書き込んだりしない。 - 著作物の複製禁止： 有名な映画のトーンをリクエストすることは可能（「Upのように」「スーパーヒーロートレーラー風」）ですが、そのキャラクター、シーン、音楽、名前を決して使用しない。
- 時間純粋性：
seek(t)はステートレス、Math.random()の代わりにrngを使用、setTimeoutは使用禁止。あるフレームが前のフレームに依存すると、レンダリング結果がライブ表示と異なります。 - 動画は一つの数値を固定する： 数値の公式情報源なしに動画は作成しません。各動画はその状態（ドラフト、承認済み、誰が見たか、どのバージョンか）をフォルダの
LEEMEに記録し、第三者が見た後に再作成された場合は、どの数値が変更されたかを相手に通知します（references/entrega.mdセクション12）。 - 推測ではなく測定： 「音が良い」「見た目が良い」は、Deepgramとコマ送りシートでの確認後にのみ言えます。
参考時間（1分の動画の場合）
脚本と音声20分。タイミング、音楽、ミックス20分。描画40～60分。コマ送りシートと修正20分。レンダリングと軽量版5分。プレゼンテーションと公開15分。映像修正は通常の工程です。各動画には5～10の修正があります。ウェブから撮影した97秒のコマーシャル：レンダリング48秒、モーションブラー込みで3分。レンダリング後に修正が入った場合は、再レンダリングします。
アプリが途中で終了した場合
重要なもの（音声、.js、スクリプト）はすでに動画フォルダにあり、レンダラーは ~/.cache/skill-motion-render 内の preparar_render.sh で自動的に再構築されます。長時間のタスクの前に、どのステップにいたかをメモしておいてください。