説明ビデオ、ハウススタイル
すべてのビデオは同じルックとモーション言語を共有しており、最初はCRM説明ビデオ用に構築されました。
ゴールドリファレンスは reference/desk-crm-explainer.html（84.5秒、9シーン、架空の製品Desk CRM）と
そのフレームグリッド reference/contact.png です。不明な点がある場合は、リファレンスを開いてパターンをコピーしてください。
このスキルのファイル：
| パス | 説明 |
|---|---|
templates/explainer-template.html | ここから始めてください。完全なヘルパーキットと3つのサンプルシーン（タイトル、カーソルクリック付きカード、アウトロ）が含まれています。 |
templates/apply-theme.mjs | themes/ からビデオのHTMLにテーマを適用します（--theme studio --html explainer.html、--list）。その場で実行します。 |
themes/*.json | テーマごとのルック＆サウンド（house、studio、ember、tide）：色、グラデーション、フォント、カードの半径、ロゴマーク、音楽のキー、進行、テンポ、アルペジオ。house がデフォルトです。 |
templates/render.mjs | Playwrightのフレームステッパーをffmpegにパイプします。ビデオ、ポスター、コンタクトシート、スチルを生成します。その場で実行し、コピーしないでください。 |
templates/compose.py | シーンのローカル時間に同期されたNumpy音楽ベッドとSFXをマスタリングしてミックスします。ビデオごとにコピーします。 |
templates/voiceover.sh | オプションのmacOS say ボイスオーバーで、音楽の下にダッキングされます。引数を使用してその場で実行します。 |
checklist.md | 批評チェックリスト。納品前にすべての項目に合格する必要があります。 |
reference/ | リファレンスHTMLとそのコンタクトシート。編集しないでください。 |
examples/tidy-tasks/ | テンプレートから構築された短い完成ビデオ（20秒）：HTML、その compose.py、コンタクトシートが含まれています。 |
セットアップ（マシンごとに1回）：スキルフォルダ（package.json があります）で npm install と npx playwright install chromium を実行し、さらにffmpegとPython 3（numpy付き）をインストールします。render.mjs は起動できない場合に不足しているものを説明します。
ルック
1つのモーション言語、複数のルック。以下はすべてデフォルトテーマ house を説明しています。テーマはパレットトークン、グラデーション、フォント、カードの半径、ロゴマーク、音楽を変更しますが、モーション、カーソル、キャプション、チェックリストは変更しません。同じテーマとシーンは、フレームごとに同じビデオを生成します。テーマは themes/*.json（house、studio、ember、tide）にあります。node $SK/apply-theme.mjs --list でそれらを表示し、--theme <name> --html explainer.html でHTMLの先頭にある THEME ブロックにテーマを適用します。compose.py は同じブロックから音楽設定を読み取ります。ブリーフはテーマを指定します。指定がない場合は house を使用します。新しいテーマの場合は、jsonをコピーし、トークンを変更し、gr、am、rd がそれぞれ緑、琥珀、赤として認識可能であることを確認し、レンダリングするマシンに存在するフォントを選択し、使用する前にコンタクトシートでコントラストを確認してください。
シーンごとのテーマ（オプション）：THEMES にさらにテーマオブジェクトを貼り付け、シーンに theme: 'studio' を指定します。パレット、グラデーション、カードの半径は1秒のクロスフェードでモーフィングし、フォントとロゴマークは境界で切り替わります。音楽は最初のテーマのままです。ビデオ自体がバラエティに関する場合に使用します。通常は1つのテーマが標準です。
ステージ：1920x1080 SVG、フォント 'Avenir Next', 'Helvetica Neue', Helvetica, Arial, sans-serif（テーマ font）。
背景は3つのレイヤーで、テーマ内で変更されることはありません：
- 50% / 30% を中心とした放射状グラデーション、r 75%:
#172638->#111b26(60%) ->#0f1720 - ドットグリッド：40 pxパターン、r 1.6ドット
#22303f、70%不透明度 - キャプションバンド：下部200 px（y 880..1080）が
#0b121aに90%でフェード
パレットトークン（テンプレートでは C、名前は保持）：
| トークン | 16進数 | 用途 |
|---|---|---|
| bg | #0f1720 | ページ、フェードトゥブラックターゲット |
| s1 | #141d27 | カード表面 |
| s2 | #1b2733 | 行、インセット、内部パネル |
| bd | #2a3a4b | 境界線、グリッド線、空のドット |
| tx | #e6edf3 | 主要テキスト |
| mu | #a0b1c5 | 二次テキスト、列ヘッダー |
| bl | #3b82f6 | アクション、選択、パケット、カーソルバースト、ブランドアクセントワード |
| gr | #2fca73 | 完了、ライブ、ゲイン、成功 |
| am | #f59e0b | 注意、ホット、外れ値 |
| rd | #ef4444 | 損失またはエラーのみ |
| off | #3a4a5c | 非アクティブステータスドット |
| paper / ink | #f3f6fa / #1b2733 | ライトなドキュメントページ |
| light blue | #93c5fd、core #dbeafe | 投げ縄、ハイライト、パケットコア |
| click spark | #ffd166 | クリックバーストの代替スポーク |
グラデーション：logoG は青 #3b82f6 から緑 #2fca73（斜め）でロゴタイルと下線バー用。hotG は琥珀から赤で「ホット」バー用。blueBar は #2563eb から #3b82f6。areaG は緑 38% から 0 でチャートの下用。
形状：
- カード：半径26、塗りつぶし s1、2 px bd ストローク、影
dy 16, blur 20, black 42%（card()）。 - 行：半径14..18、塗りつぶし s2、高さ52..80、ピッチ64..96 px。
- チップ：完全なピル型、高さ40、色を16%の塗りつぶし、ラベル24 px/600 でその色で表示（
chip()）。 - プライマリボタン：半径22、高さ84、ベタ塗り bl、白34 px/700 ラベル、クリックされるまでソフトグローパルス。
- アイコンとピル用の小さな影：
dy 8, blur 8, black 45%（#shs）。 - アプリウィンドウ（リファレンス
dashboard()）：上部バー66 px（s2、交通信号ドット r 8（rd、am、gr、80%））、サイドバー214 px（#111922内）、ナビゲーション項目は高さ48、半径14、アクティブ項目は bl 20%、KPIタイルは半径18。 - ステータスドット r 14。アバターリング4 px プラス25%のハロー。
lock()からの南京錠。 - ブランドバグ：ロゴ46 px プラス名前28/700 を (56, 40) に、85%不透明度で、シーン2からアウトロまで表示。
タイプスケール（px/ウェイト）：ワードマーク132/700（アウトロは96）、タグライン58/500 mu、クロージングライン56/600、キャプション50/600、大きな数字52..64/700 表形式、カードタイトル34..40/700、行テキスト26..28/600、ラベルとチップ24/600、22未満はなし。ワードマークの文字間隔は -1%。
構図ルール：
- コンテンツは y 120..860、x 140..1780 に収める。キャプションバンドとブランドバグのコーナーは空けておく。これには静止カーソルも含まれます。その先端を y <= 800 に保つ（矢印は先端から約75 px下に達します）。
- テキストにサイズ設定されたもの（取り消し線、下線、ハイライトボックス、ピル）は
textW(str, size, weight)から幅を取得し、決して推測された定数を使用しない。 - フレームの3分の2以上を空のままにしないこと。コンテンツが左右に分割されている場合は、フローライン、パケット、またはページのファンで中央を接続する。シーングループ全体（
G(s, {x: SX})）を移動して中央に再配置する。 - 1シーン1アイデア。最大で2枚のカードを並べ、さらに1枚の詳細カードを配置可能。
- データは常に架空のもの：Client A、Northwind、Maple Ridge、Bluebird、Harbor Point、ACC 01。
モーション言語
イージングキット（テンプレート内）：E は3次インアウト（デフォルト）、EO は3次アウト（落ち着き）、EB はバックアウトで約10%のオーバーシュート（ポップ：カード、チップ、バッジ、アイコン）、esine は描画パス用、fadeIO(t, a, b, 0.35) はカーソル不透明度用、5次アウトイージング 1 - (1 - x)^5 はカウンター用。決定性：rng(seed) のみを使用し、Math.random や壁時計は使用しない。
エントランス：
- カード：0.5秒でフェードイン、20 px上昇（0.6秒）、または
mix(0.92, 1, EB)でスケール（0.7秒）。 - リスト行：0.08..0.12秒のスタガー、x -20/-30 または y +16 からスライドイン、各0.5秒。
- ポップ：
EBで0.5..0.7秒。バッジは 0.7 -> 1 にスケール。 - ワードマーク：中央からクリップワイプで開く（0.8秒、34 pxの上昇）。ロゴマークは
pathLengthで描画。
カーソルキット（drawCursor、curPos）：
- 白い矢印パス
ARROW、#0b11183.4 px アウトライン、ドロップシャドウ dx 4 dy 7 blur 4（50%）、ベーススケール 1.1。 keys: [[t, x, y], ...]をローカル秒で指定。(x, y) は矢印の先端。グライドは3次インアウトと、距離の12%（最大110 px）のサイドアークを使用。傾きは水平速度に従う（pxあたり0.35度、最大14度）。- 典型的なグライドは0.7..1.5秒。シーン開始から約1.5秒後にフレーム外（1880, 1080）から進入。
- クリックの少なくとも0.15秒前に到着し、コントロールの中心に正確に静止する。
- クリック：xを+16%、yを-22%にスカッシュし、クリックでピーク（0.34秒のウィンドウ、0.1秒早く開始）、その後0.6秒のバースト：青いリング r 8 -> 54、太さ6 -> 1 px、さらに8本のスポークが白 /
#ffd166を交互に表示。 - クリックされたコントロールは
press()でスケール0.93にディップし、グローパルスが停止する。 - アクション後、静かな休息スポット（カードの間、例：(1010, 800)）にグライドして保持。シーンとともにフェードアウト。
trailは描画中に12ドットの青いコメットを追加。posはカスタムパス（投げ縄）用にキーを置き換える。
シグネチャームーブ（コピーするリファレンスシーン）：
- 投げ縄：カーソルが
esineでゆらぐ楕円を描き、点線の#93c5fd5 px（16 12、流れる）、閉じるときはベタ塗りで0.35秒のグローフラッシュと7%の塗りつぶし、その後アイコンが曲線パスに沿ってゴーストフレームに飛び込み、それがアプリウィンドウに固まる（sBefore）。 - パケット：発光ドット（r 22 グロー プラス r 12
#dbeafeコア）と6ドットのコメットテールがS字曲線上を移動、3次インアウトで1.2..1.45秒、点線のガイドラインが24 px/sで流れ、送信者が青くフラッシュし、到着時に緑のリング（packet()、sClose）。 - ステータスドット：グレーから緑にリングバースト（r 14 -> 40、0.6秒）と1.25倍のポップ、その後
0.25 + 0.2 sin(3t)で呼吸するグロー。警告：琥珀、1.3秒ごとに繰り返しリング、短いシェイク（statusDot()、sStatus）。 - チャート描画：
pathFromがラインを1.5..3.7秒で表示、6..7 pxの緑、areaGの塗りつぶし、発光ヘッドドット（r 18 グロー プラス r 10 白）。バーは0から0.18秒のスタガーで成長。ヒートマップセルはスタガーでポップ（sAlgos、sHistory）。 - カウンター：5次アウトイージングで1.0秒かけてカウントアップ、表形式の数字。
- ページファン：ページがボタンを離れ、中央を通ってファン状に広がり（回転 -10、-3.5、3.5、10度、60 pxのホップ）、その後各ページが110 pxホップしてトレイにスケール0.56で収まり、0.55秒のスタガー。トレイは満杯になると緑に光る（
sReports）。 - 組織ファン：クリックされたアバターからチーム列にラインが描画され、南京錠が閉じ、点線のアウトラインがデスクをグループ化する（
sBook）。 - チェックリスト（テンプレートキット）：
checkbox()はクリック時にディップし、緑にポップしてチェックマークを描画する丸いチェックボックス。strike(x, y, textW(...) + 8, u)はラベルに取り消し線を引く。各チェックはpacket()をprogressRing()に送信し、到着ごとに1ステップずつイージングし、閉じると光る。リストシーンはcheckbox + strike + packet + ring（examples/tidy-tasks/を参照）。
トランジション：シーンは連続して配置されます。各シーンは最後の0.5秒でフェードアウトし、次のシーンは最初の0.5秒でフェードインし、0.985 -> 1 のスケールセトル（背景を通るディップ）が適用されます。最初のシーンはベタ塗りで開始し、アウトロは独自の0.6秒のフェードで bg に終わります。トランジションフレームは意図的にほぼ空白です。「修正」しないでください。
ホールドとアイドルモーション：すべてのフレームで何かが動いています。流れるダッシュオフセット、呼吸するグロー（sin(3t)）、bob() による3..5 pxのフロート、スロースピナー（60度/秒）、ドリフトアイコン（18/14 px）を使用します。シーンの最後のビートの後、キャプションが読み終わるように少なくとも1.5秒のホールドを維持します。
コピールール
- 英語のキャプション、文の大文字小文字、ピリオドで終わる。1行または2行で、各行最大約48文字。
- 画面に表示される時間（キャプションは0.45..1.05秒でフェードイン、
dur - 0.75でフェードアウト）は、4語あたり少なくとも1秒、かつ2.5秒未満であってはなりません。実際には、シーンは約5秒より短くなることはありません。 - キャプションや画面上で、句読点としてダッシュ（emダッシュ、enダッシュ、スペース入りハイフン）を使用しないでください。コンマとピリオドを使用してください。
- 真実の主張のみ。画面上の数字（クライアント、アカウント、間隔）はユーザーまたは製品からのものであり、決して発明されたものではありません。テンプレートの数字はPLACEHOLDERとマークされています。真実の数字（ティーザー、架空の製品）がない場合は、アウトロの
STATSをプレーンワード、['Simple lists', 'Daily focus', 'Clear progress']にします。ピルがカウントの代わりにポップします。 - 実際のクライアントデータなし：実際の名前、アカウント番号、残高、メール、クライアントのロゴは使用しないでください。架空のセットを使用してください。
- タイトルとアウトロにはキャプションはありません。タグラインとクロージングラインがその役割を果たします。
アーキテクチャ
- 1つの自己完結型HTMLファイル。ネットワーク不要、ライブラリ不要。SVGステージと1つのIIFEスクリプト。
render(t)は純粋関数です。tのみから#frameのinnerHTMLを再構築します。window.renderAt(t)として公開され、window.TOTAL_DURATIONとwindow.SCENES_INFOも公開されます。URLに#manualがない場合は、リアルタイムでループします。SCENES = [{ id, start, dur, fn, cap }]、連続して配置されます。各エントリをこのキー順序で1行に保ち、const TOTAL = <number>;をリテラルとして保持します。compose.pyは両方を正規表現で解析します。- シーンは
fn(lt, dur) -> { svg, cursor? }で、ローカル時間ltを受け取ります。シーン内のすべてのビート時間はローカル定数（click、send(i)、onT(i)）であり、オーディオスクリプトがミラーリングするものです。 - ヘルパー：数学（
clamp lin E EO EB mix f rng fadeIO bob）、svg（T G R Ci card chip check avatar lock logo wordmark textW）、チャート（pathFrom walk scalePts spark areaChart bez）、モーション（ring statusDot packet press progressRing checkbox strike）、カーソル（curPos drawCursor）、caption。G()は不透明度が約0の場合は '' を返すため、非表示のレイヤーはコストがかかりません。 - 描画順序：シーンコンテンツ、キャプション、ブランドバグ、カーソルが最後。
const STATS = [...]は行の先頭に1行で保持します。compose.pyがアウトロのサウンドのために読み取ります。
ワークフロー
- ブリーフ。対象者、製品、実際の数字を含む3..6個の真実の主張、長さ（フル60..90秒、ティーザー20..40秒）、投稿先、テーマ（
house、studio、ember、tide、または新しいjson）。 - ストーリーボード。シーンID、時間、キャプション、視覚的メタファー、カーソルアクション、ビート時間を含む表。アーク：フック（ロゴ、タグライン）-> ビフォー（ペイン）-> 機能ごとに1シーン -> アウトロ（統計またはワードピル、クロージングライン）。構築前にキャプションのタイミングをコピールールに照らして確認します。
- 構築。作業フォルダで、
SKをこのスキルのtemplatesフォルダに設定します（例：SK=~/.claude/skills/explainer-video/templates）：cp $SK/explainer-template.html explainer.html && cp $SK/compose.py .スキルのコピーは決して編集しないでください。 テーマを適用：node $SK/apply-theme.mjs --theme <name> --html explainer.html（houseの場合はスキップ）。BRANDを設定し、サンプルカードシーンを置き換え、マークされたブロックにシーンを追加し、開始時間とTOTALを更新し、STATSを設定します。リファレンスからパターンを借用します。 - プレビュー。ブラウザでHTMLを開き（ループします）、次にすべてのクリック、着地、境界でスチルをレンダリングします：
node $SK/render.mjs --html explainer.html --stills 3.2,4.9,8.6 --stills-dir critique/v1。 - レンダリング。
node $SK/render.mjs --html explainer.html --out name.mp4でMP4、-poster.png、-contact.pngを出力します。 - 批評。
checklist.mdに照らしてコンタクトシートとスチルを確認します。すべての項目に合格する必要があります。修正、再レンダリング、再批評を繰り返します。 - オーディオ。
compose.pyはシーンと同期します。再生し、音楽のキー/テンポを確認し、必要に応じてテーマのmusic設定を微調整してから再実行します。python3 compose.py --html explainer.html --out name.mp3。ビデオレンダラーと組み合わせて--audio name.mp3を指定するか、後でffmpegでミックスします。 - 配信。納品フォルダに
name.mp4とname-poster.pngを含めます。ソースのexplainer.htmlとcompose.pyはプロジェクトフォルダに保管します。
批評チェックリスト（checklist.md）
- すべてのテキストが読みやすい（ステル、スチル、コンタクトシートの背景に対して。
apply-themeのコントラストチェックはスチルを必要としません）。 - キャプションがコピールールに従っている（48文字、2.5秒以上、ダッシュなし、真実の数字のみ）。
- カーソルがすべてのクリックに正確に着地している。
- グライドのタイミングが良く、フレームの前後に十分な余裕がある。
- すべてのシーンアクションに少なくとも1.5秒のホールドがある（キャプション読み取り時間）。
- 遷移境界でスケール/不透明度がクリッピングしていない。
-
TOTALが実際の合計と一致する（render --checkまたは手動で検証）。 -
STATSはアウトロのサウンドスキームと一致する（単語はポップ、数字はカウンター）。 - タイトルとアウトロ以外のすべてのシーンにキャプションがある。
- アウトロのフェードアウトが bg で一貫している（黒色のフラッシュがない）。
- テーマのパレットが透過/彩度/神秘性の点で正しい。
- ブリーフに明記されている限り、実際のクライアントデータが使用されていない。