bb-video

BB Video

コードで描画する動画です。HTML + CSS / SVG / canvas のフレームを Chrome でフレームごとにレンダリングし、音声をコードで合成して、ffmpeg で組み立てます。各フレームは純粋関数 renderFrame(t) であるため、どのフレームも単独でレンダリングでき、レンダリング結果は毎回同一になります。

このファイル内の相対パスは、このスキルのフォルダーからの相対パスです。

1 つ選ぶもの：スタイル

ユーザーが選ぶのはスタイルだけです。スタイルによって動画の見た目、動き、音が決まります。動画の内容は変わりません。ユーザーがスタイルを指定した場合はそれを使い、指定がない場合はトピックや製品に基づいてスタイルを提案し、ストーリーボードでその理由を説明してください。ユーザーが「別のスタイルを試して」と言った場合は、同じ内容を新しいスタイルで作り直してください。

スタイル	見た目	最適な用途	解説	プロモーション
whiteboard 手描きホワイトボード	無限に広がるホワイトボードに描きながら説明します。カメラが動き、漫画風のキャラクターが登場します	問題の解説、導出、現象、登場人物が必要な物語	✓	✓
riso リソグラフ	スポットカラーの重ね刷り、網点、版ずれがある雑誌ページ。ドラムロールに合わせてページがめくられます	日常の雑学、心理学、ニュース、金融、データ、食べ物、語彙	✓	✓
ink 水墨画	画仙紙に描く一幅の長い手描き巻物。書が一画ずつ描かれ、山水、人物、印章が登場します	中国の歴史や故事、古典詩、慣用句、文化、自然	✓	✓
launch 発表イベント風モーション	製品に合わせたステージカラー（明色／暗色／ブランドカラー）、ビートに合わせて打ち出される言葉、ブラウザーウィンドウに表示される実際のUI、カメラの寄り、素早いパン、閃光	ソフトウェア、SaaS、AI ツール、製品発表のほとんど。実際のスクリーンショットがある場合	✓	✓
origami ペーパークラフト	光と折り目が映える紙。広げて明かす演出、机に落ちるカード、飛び出す絵本、ページめくり、折り鶴	温かみのある消費者向け製品、創作、教育、文書、コンテンツ	✓	✓
pop ポップアート	1960年代のコミック風。太い輪郭線、ベンデイドット、コマ、吹き出し、爆発的な効果音、ウォーホル風の反復	若年層向け、遊び心のあるコンテンツ、ソーシャル、AI アシスタントやチャット（対話を漫画のセリフに変換）	✓	✓
op オプ・アート	「レンズ」の周囲で膨らむ白黒の縞模様、リング、市松模様、渦巻き。ブラインドで明かす演出	テクノロジー、AI、開発者向けツール、音楽。「精密」「並列」「催眠的」な印象	✓	✓
cutout マティスの切り絵	ガッシュで塗った紙をハサミで切り、クリーム色の紙に貼り付けます。画面全体を覆ってから破る演出	創作、学習、コミュニティ、教育、ライフスタイル	✓	✓
ascii ASCII文字アート	すべてを等幅文字で描きます。グリフのノイズから製品画像が解読され、カメラが寄るにつれて鮮明になり、実際の写真へとスキャンされます。入力される行、罫線で描かれたフレーム	開発者向けツール、ハードウェアや製品ラインナップ、「精密」さを打ち出すもの全般。良質な製品画像があるテクノロジー製品の発表	✓	✓
shadow 影絵芝居	木製舞台枠の中に、ランプで照らされた布のスクリーン。関節と操作棒のある、横向きの透光性の革製人形が登場し、歩き、話し、お辞儀し、馬に乗り、倒れます。名前と日付を記した赤い紙札が垂れ下がります。場面転換ではランプの光が弱まります	登場人物と対立がある中国の歴史や物語（誰が誰に何をしたか）、民俗文化、創業者の物語	✓	✓ (手書きのみ)
bauhaus 構成主義／バウハウス	バウハウス風の黄色と青を配した、クリーム色の印刷紙に赤と黒。大きな円、太い帯、斜めに配置されたくさび形。斜めに置かれた力強いスローガンを、一文字ずつスタンプで押します。円、四角形、三角形から組み立てられる図形。場面の合間を赤いくさび形が横切ります	マニフェストや製品発表、物事が部品からどのように構築されるか、プロセスや比較、デザイン／建築／産業の歴史、ツールや生産性	✓	✓
pixel ピクセルアート（8ビットゲーム）	低解像度のゲーム画面を全画面に拡大します。ディザ処理された空の帯、1ピクセルずつ後退する視差のある丘や都市。輪郭線のあるスプライトキャラクターが歩き、跳び、話し、戦います。ゲームUIで情報を伝えます。文字が一文字ずつ入力される会話ボックス、▶カーソルのあるメニュー、セルごとに埋まるHPバー、スコアカウンター、レベルマップ。ブロック状に消えるトランジションやアイリスワイプ。チップチューン音楽	ゲーム、開発者向け・生産性向上ツール、AI 製品、段階的なフローや選択、登場人物のいる短い物語、テクノロジーやゲームの歴史、子ども向けの解説	✓	✓
chat チャットログ	物語や情報がメッセージアプリ上で展開します。誰かが入力中になり、メッセージが次々に表示されてスレッドが上へ押し上げられます。出典付きの引用カード、行ごとに光る詩、リレー形式のチェックリスト、投票、地図上のルート、「Xがグループに参加しました」、送信取消済みメッセージ。カメラが他の部分を暗くしながら、ひとつのメッセージに寄っていきます。横長では、大きなチャットウィンドウとサイドカラム。縦長では、アプリが画面幅いっぱいに広がります	対話形式で語る故事や歴史の小話、引用元が多い「誰が何を言ったか」の解説、AI アシスタント、サポートやコラボレーション製品	✓	✓
toy3d おもちゃ風3D	暖色系の暗い机の上に、製品の実画面を物理的な板として配置します（スクリーンショットを印刷）。そこにマットなビニール製のおもちゃを置きます。ブランドマークをSVGから立体化したもの、マスコット、または問題に登場するキャラクターが、体を使ってUIを操作します。クリックで着地し、列に沿って跳ねて入力し、物を運んでドラッグします。キーが板からせり上がり、板の中に沈みます。キーキャップで数字や方程式を表現します。被写界深度が非常に浅い、ローアングルの望遠撮影を個別に行い、おもちゃが各カットで宙に浮いているビートに合わせてハードカットします。光らせるのは表示中の対象だけです。マシンにBlenderがあればおもちゃをBlenderで作成し（継ぎ目のないビニール製）、なければ同じパーツ一覧からthree.jsで作成します	実際のUIと段階的なフローがあるソフトウェア（エディター、ボード、IDE、アプリ）、ロゴやマスコットがあるブランド。物そのものが動作する解説（数える、まとめる、入れ替える）	✓	✓ (手書きのみ)
newsreel 昔のニュース映画	黒地に1.37:1の画面枠で映す、1930年代の映画館のニュース映画。ライセンス上問題のないアーカイブ写真をゆっくり動かし、日付入りの出典タグを添えます。フィルムに印刷された字幕、ゴム印、中二本線の間に入るタイトル字幕、切り取り式カレンダー、ストップウォッチ、印刷された価格表、目撃した／していないという判定、映像が残っていない部分を示す製図グリッドの「アニメーション図解」（再現映像と明記）。粒子、傷、フィルムの揺れ、ちらつき。金管行進曲に乗せて、光学サウンドトラックから威勢よくナレーションが流れます。架空のニュース映画ブランドで始まり、締めくくります	ニュースや出来事の振り返り（製品発表、記録、主張の検証）、アーカイブ写真を使った歴史、実際の写真があるレトロな製品発表	✓	✓ (手書きのみ)
filmroom フィルムルームでの映像分析	暗い放送スタジオで、ライセンス上問題のない、クレジット表記付きの実映像を流します。分析者が映像を止め、静止フレームに描き込みます。選手の足元の円、これから走るコース、パスコース、隙間、スポットライト。巻き戻して再生し、選手を追う円を重ねたスローモーションにして、細部に寄ります。映像から調整した俯瞰戦術ボード、試合データから作成したショットチャート	スポーツの分析（ひとつのポゼッション、ひとつの教訓：ボールを持たない選手の動き、スペーシング、フットワーク）、位置関係が重要な映像全般、画面録画を使った製品の解説	✓	✓ (手書きのみ)
mystery サスペンス風の謎解き	彩度の高い青で映す、古い4:3テレビの淡々とした疑似科学番組（ブラウン管の周辺減光、傷、局のロゴ、「フィクションです。お楽しみください」というスクロール表示）。重要語を赤で記した、白い輪郭線のタイトル。筆文字の番号付き「症状」。ゴムホースアニメ風のステッカー（脳、白い手袋をした電球人間、電話、目覚まし時計、残量19 %のバッテリー）がそれぞれを演じます。緑の吹き出しがある全画面チャット、大きな淡色の言葉の嵐。そして信号が途切れてテストパターンに切り替わります。もうひとつの表現（look: 'case'）では、事件ファイルを演出します。霧、取り消し線の引かれた推測、青緑色の再現図、赤い糸を張った証拠ボード、監視映像、そして昼間に示される出典付きの答え	「友達が……かどうかを見分けるには」といった日常の習慣をチェックするリスト、共感できる疑似科学、俗説の検証や「なぜ……なのか」という謎、遊び心のあるプロモーション	✓	✓ (手書きのみ)
isometric アイソメトリックのミニチュア世界	45°の固定されたアイソメトリック視点から見た小さな世界。厚い台座の上に隙間を空けて並ぶタイル、ローポリの丸みを帯びた建物、ベルトコンベヤー、棚、バン、自分で動く小さな人々。ひとつの物がシステム内を進む様子を追います（人からベルトへ、そしてトラックへと受け渡し）。地面に区間ごとのルートを描き、各段階に時計のカードを置き、量を示す荷物の流れを描写します。説明中の段階が持ち上がり、他の部分は薄れていきます。カメラは一続きの動きでパンし、寄り、引きます。長距離輸送の場面では夜が訪れます	プロセスやシステム（物流、サプライチェーン、都市／送電網／決済／インターネットの仕組み）、「システムの中をひとつの物が進む」様子、価値がシステムにある製品	✓	✓ (手書きのみ)
trailer 映画予告編	2.39:1のレターボックスで見せるハリウッド映画の予告編。コードで描いた、奥行きのあるレイヤーを重ねたシネマティックなショット（宇宙、惑星、尾根、通路、画面、リムライトに照らされた人物のシルエット）。ティール＆オレンジのカラーグレーディング、粒子、周辺減光。ゆっくり寄り、視差、フォーカス送りを使います。幅広のメタリックな書体で一文を載せた黒いカード。孤独なピアノの一音、時を刻む時計、そしてBRAAMと太鼓の音に合わせてカットが速まり、閃光フレーム、ショックカット、完全な静寂の一拍、タイトルの登場、公開日、圧縮したスタッフ・キャスト表記、最後の見せ場が続きます。カード中心で、会話は控えめ（セリフに独自の声色を付けてもかまいません。例：ラジオ）、または低く響く予告編ナレーション。架空の映画スタジオのロゴを使用し、実在するスタジオや映画のトレードドレスは決して使いません	物語の予告編（架空の映画、本、ゲーム、歴史エピソード）、ドラマ仕立ての製品発表（変化前の世界 → そして…… → 変わること → 名前と日付）	✓	✓ (手書きのみ)
dossier 切り抜きファイル風の解説	現代の金融／ニュース解説を紙で表現します。灰色の新聞用紙に新聞の切り抜き（黄緑の蛍光ペンの線を引いた大きな見出し、事実に基づいて書かれた短い実際の記事、網点写真）と、実際の出典資料（プレスリリース、届出書、中央銀行の声明）を架空の新聞名で組み直して掲載します。カメラが紙面から引用行へ寄り、その言葉の上に赤／青の翻訳バー、タグ、またはマーカーが現れます。画像の上に紙面が飛び込み、ショット間には筆のかすれ、サムネイル風のタイトルカード、データの吹き出し。上部に章タイトルバー、太い輪郭線の字幕、粒子、周辺減光	収益、マーケット、政策、届出書の解説、資料を根拠として使うニュース解説、「この発表が本当に伝えていること」	✓	✓ (手書きのみ)
manga 漫画／モーションコミック	白黒の漫画ページ（白い紙、インクの線、ドットやグラデーションのスクリーントーン）を、余白のあるコマに分割します。斜めのコマや枠からはみ出すコマ、枠を突き破る人物。スピード線や集中線、絵の一部として描かれる効果音（ドン／ゴゴゴ／轰）、丸い吹き出し／叫びの吹き出し／思考の吹き出し、ナレーション枠、縦書き。カメラはコマごとに（右から左へ）読み進め、重要なコマに寄り、衝撃の瞬間に揺れます。コマがインクで描かれ、ページがめくられたり、切り開かれたりします。クライマックスでは見開きの大ゴマ。コードで描いたオリジナルキャラクター（表情、目のアップ、拳、シルエット、ちびキャラのリアクション）、バトル漫画風の導入枠、インクで描いた図表	戦いや競争として描く科学や概念（分子対受容体、バグ対修正）、どんでん返しのある物語、若年層向けのキャラクター主導のプロモーション	✓	✓ (手書きのみ)
map アニメーション地図	実際の地理データから作成した、デザイン性のある印刷地図（陸地は紙風、海岸線には彫刻風の水の線、公園、街路の質感、地図記号）。ルートが一画ずつ描かれ、路面電車／列車／飛行機が路線に沿って移動し、セリフに合わせて各停留所に到着します。駅が現れ、地域がインクのように広がり、印刷された吹き出しカードが場所にピン留めされ、年数カウンターと位置を示す地球儀が登場します。ひとつのカメラが地球儀を回し、街路へ降下し、場所から場所へ飛び、傾きながら乗り物を追います。対象を照らしたまま、それ以外を暗くします	場所とそのつながり：交通と都市、歴史上の遠征や旅、貿易や移住のルート、物事の広がり、「どこにあるのか」という導入、年を添えた前後比較	✓	✓ (手書きのみ)
名前のある人物が登場するストーリーでは、すべてのスタイルで styles/CHARACTERS.md に従います（固定キャスト、一目で人物を見分けられること、対面シーン、リレー）。キャラクターが登場するのはホワイトボード、インク、シャドウ、ピクセル、チャット、マンガだけです。人物主体のストーリーには、そのいずれかをおすすめしてください。

各スタイルは styles/<name>/ にあります。STYLE.md（すべてのスタイルで同じ構成です。styles/TEMPLATE.md、中国語版は styles/TEMPLATE.zh.md）とスターターファイルが含まれています。スタイルを選んだら、描画コードを書く前に必ずその STYLE.md を読んでください。

各スタイルで、どちらの種類の動画も制作できます。各スタイルはそれぞれ一方のワークフローで生まれ、共通インターフェース（promo/runtime/kit.js：大きな文字、文、カード、実際のスクリーンショット、シグネチャームーブ、トランジション、エンドカードという同じ動詞を、各スタイル独自の素材で描画します）を通じてもう一方にも対応します。

	解説動画（ナレーションあり）	プロモーション動画（ビートに合わせる、ナレーションなし）
whiteboard riso ink	ネイティブ：node explainer/scripts/new.mjs <dir> --style … — ボード API、キャラクター、数式をすべて利用できます	node promo/scripts/new.mjs <dir> --style … [--quick] — ボードがプロモーション動画の中で動作します。シーンはボードの領域／ページ／スクロール区間、トランジションはパン／ページ変更／スクロール移動になります
launch origami pop op cutout ascii shadow bauhaus pixel chat toy3d newsreel filmroom mystery isometric trailer dossier manga map	node explainer/scripts/new.mjs <dir> --style … — ナレーションのペースに合わせたプロジェクトを作成します（ナレーション＋字幕。キューはナレーションに合わせてタイミング調整されます。promo/references/kit.md、「ナレーションに沿って」）	ネイティブ：node promo/scripts/new.mjs <dir> --style … — そのスタイルの全コンポーネントを利用できます

ネイティブ側には最も充実したツールがあります（ホワイトボードの数式とキャラクター、折り紙の折り目、op のレンズなど）。もう一方は、ほとんどの動画で必要となる要素をカバーします。動画にネイティブ側だけの機能（切り抜き解説動画の数式、riso プロモーション動画の折りたたみアニメーションなど）が必要な場合は、その旨を伝え、その部分にはネイティブスタイルを提案してください。

動画の種類：リクエストから判断する

どちらを選ぶかはユーザーが決めるのではなく、依頼内容から判断します。

ユーザーの要望…	ワークフロー	ガイド
現象、問題、言葉、概念、ストーリー、チュートリアル、ニュースなどを、ナレーション付きで解説する	解説動画（ナレーション主導：ナレーション → タイムライン → 各セリフに合わせたビジュアル。字幕と BGM あり）	explainer/GUIDE.md
ウェブサイト、アプリ、ソフトウェア、ローンチなどの製品を、ナレーションなしで宣伝する	プロモーション動画（ビート主導：リサーチとファクトシート → ビートに合わせたビジュアル。合成スコアと効果音。16:9 ＋ 9:16）	promo/GUIDE.md

どちらのワークフローも単一のエンジン（core/）で動作します。同じクロックとランタイムのコア、単一のレンダラーとサウンドパイプラインを使い、ナレーション、音楽、効果音をミックスし、ナレーション中は音楽を下げ、ラウドネスを正規化します。そのため、プロモーション動画に字幕付きのナレーションを加えることもでき（promo/GUIDE.md、ステップ 5）、解説動画をビートに合わせてカットすることもできます（EV.beats）。もう一方で生まれたスタイルを使う場合も、動画の種類に応じたワークフローに従います（解説動画なら解説動画の手順）。描画には、そのスタイルを生み出したエンジンのレンダラーを使います（プロモーション動画由来のスタイルでは promo/scripts/render.mjs）。

該当するガイドを読み、ステップ 1 から順に進めてください。各ガイド内では、ストーリーの語り方もユーザーに代わって選びます。解説動画のコンテンツモードは explainer/references/modes.md、プロモーション動画の語り方は promo/references/structure.md を参照してください。

ガイド内のパスは、そのガイドのフォルダーからの相対パスです。解説動画では node explainer/scripts/…／python3 explainer/scripts/tts.py … を、プロモーション動画では node promo/scripts/… を実行してください（このスキルのフォルダーから実行するか、フルパスを指定します）。

すべての動画に適用されるルール

• 事実を最優先します。 描画する前に事実、数値、引用を検証し、プロジェクトの brief.md に記載します。画面に表示されるすべてのテキストは、そこからたどれるようにします。
• アニメーションライブラリを使用できます（GSAP、Three.js、Matter.js、opentype.js など）。ただし、時間は常にこちらのクロックから取得します。ライブラリは t にシークし、独自のクロックやコールバックで動かさないでください（promo/references/motion.md の「Animation libraries」）。
• 納品前に自己レビューします。各ガイドに記載されている自動チェック、コンタクトシート／静止画、レンダリングした動画のフレームチェックを行います。
• 言語：特に指示がなければ、動画はユーザーが使用する言語にします。
• 調査するサイトにはログインせず、パスワードも入力しないでください。調査は読み取り専用で行います。

スタイルの追加

テンプレート、ランタイム、スターターファイル、サウンドから、実行するワークフローに合わせて styles/<name>/STYLE.md を作成します。プロモーション用のスタイルでは、promo/runtime/kit.js に共通インターフェースも登録します（promo/references/kit.md）。上の表にスタイルを追加します。