prod-by-claude

prod-by-claude

Strudel のトラックをライブコーディング動画にします。音楽はコードからオフラインでレンダリングし、 動画は Strudel 自身のノートイベントに合わせて進行するため、ハイライトはすべて該当するノートにぴったり合います。

使用する場面

• ユーザーが Strudel のコードを再生する動画を求めている場合。「この Strudel トラックを動画にして」「コードが光るところを見せて」「ライブコーディング動画にして」、またはエージェントが作曲したトラックなどです。
• その他の音声や DAW プロジェクト、トークヘッド動画、Strudel のコードがない既存の音声ファイルのビジュアライザーには使用しません（その場合は HyperFrames の音楽ワークフローを使用してください）。

入力

• Strudel のトラック（.strudel.js）、または作曲用の概要。作曲には references/composing.md を使用します。トラックがない場合は、 assets/example/track.strudel.js を使用します（シンセのみ、サンプルなし）。
• アレンジ：小節数と、ビルドおよびドロップにする小節。

ツールと依存関係

• Node 22 以降、npm、および HyperFrames CLI（[email protected] に固定。npx --yes 経由で実行）。
• tools/package.json で、それ以外のすべてを固定しています：@strudel/web 1.3.0（AGPL-3.0。npm からインストールし、ここには同梱しません）、puppeteer-core 25.12.0、@puppeteer/browsers 3.2.3、OFL ライセンスのフォント @fontsource/jetbrains-mono 5.3.0 および @fontsource/rubik-mono-one 5.3.0。
• 録画用の Chrome for Testing 149.0.7827.22、または CHROME=<path> で指定した任意の Chrome。
• 認証情報は不要です。

ワークフロー

1. プロジェクトを作成します（ファイルをそのままコピーします）： node <skill>/scripts/new-project.mjs <project-dir> [track.strudel.js]
2. <project-dir>/video.json を編集します：bars、builds、drops、themes、storm パーツ、signoff （references/video.md、references/themes.md）。 テンプレートはすでにサンプルトラックに対応しているため、これを使用する場合はこの手順を省略できます。
3. <project-dir>/tools から、固定されたツールをインストールします：npm install
4. <project-dir>/tools から、CHROME が設定されていない場合は Chrome for Testing を取得します： npx --yes @puppeteer/[email protected] install [email protected] --path .chrome
5. <project-dir>/tools から録画します：node record.mjs .. 32 小節の場合、所要時間は約 5～7 分です（タイムアウトは 10 分に設定してください）。4 小節ごとのレベルを出力し、クリッピングがあると警告します。クリップしたサンプルがなく、ドロップのピークが -2 dBFS 以下になるまで、トラックを修正して録画し直します。
6. <project-dir>/tools から動画データを構築します：node build-data.mjs .. 手順 7 で使用するスナップショットコマンドが出力されます。
7. <project-dir> から、npx --yes [email protected] check . を実行し、続けて出力されたスナップショットコマンドを実行して、すべてのフレームを確認します（確認項目：references/video.md）。
8. ユーザーが動画を求めている場合は、<project-dir> からローカルでレンダリングします： npx --yes [email protected] render . -o renders/video.mp4 HyperFrames のクラウドレンダリング（npx --yes [email protected] cloud render .）はユーザーのアカウントのクレジットを消費します。ユーザーが明示的に同意した場合にのみ使用してください。

トラックが変更された場合は、手順 5～7 を繰り返します。video.json が変更された場合は、手順 6～7 を繰り返します。

出力

• assets/bgm.wav（ミックス）、assets/stem-<part>.wav（スコープパート）、data/events.json （コード内の位置を含むすべてのノート）、data/events.js（コンポジションが読み込むデータ）。
• renders/video.mp4、1080×1080、30 fps、サインオフを含めて約 pre + bars × 240 / bpm + 4.6 秒。

副作用

• ファイル：書き込み先は <project-dir> 内のみです。build-data.mjs は index.html の data-duration 属性と音声の data-start 属性を書き換えます。
• ネットワーク：npm install（npm レジストリ）、Chrome for Testing のダウンロード（Google のストレージから約 150 MB）、およびコンポジションの読み込み時に cdn.jsdelivr.net から GSAP を取得します。snapshot は --describe false を指定しない限り、フレームをホストされたキャプション生成モデルにアップロードするため、必ず指定してください。録画は 127.0.0.1 のみで実行され、トラック自体がサンプルを読み込む場合を除き、何も取得しません（その場合はトラックに記載されたサンプルの URL から取得します）。
• 音声：録画はヘッドレスかつミュートで実行されます。音声が再生されることはありません。
• 費用：ユーザーがクラウドレンダリングを承認しない限り、かかりません。

検証

• record.mjs が終了コード 0 で終了し、すべてのパートを列挙して、クリッピングがないことを報告します。
• check がエラー 0 件でパスします。フレームの下にはみ出したコード行に対する canvas_overflow の情報メモは想定どおりです。
• スナップショットでは、0.6 秒で 1 行目のタイピングが始まり、pre の後に最初のパートが開花してハイライト表示され、各ドロップでグラフィティが現れ、各ドロップの後にデコードが行われ、最後に締めくくりが表示されます。
• レンダリングでは、最初のサウンドが pre 秒のタイミングで入り、動画が黒画面で終わります。

権利

Strudel で作成された音楽の権利は作成者に帰属します。Strudel の AGPL が適用されるのはソフトウェアであり、トラックではありません。組み込みシンセサイザーには許諾は不要です。トラックで読み込まれるサンプルは他者の録音です。ユーザーが所有する音源、または使用許諾を得た音源のみを使用してください。