faizalmy/brand-film

ブランドフィルム

一つのブランドのアイデンティティ（マーク、サイト、製品、名前）についての60秒のフィルム。認可済み初回フィルム：ReUI「Refreshed」。template/ がそのコードです。コピーして適応するための動作する参考実装であり、汎用ライブラリではありません。

• brands/<brand>.md：ブランド固有のすべて（パレット、書体、テキストソース、ロゴ、製品、音楽、ルール、設定）。最初に読んでください。新しいブランドの場合は、brands/_new-brand.md から作成します。
• references/example-reui-refreshed.md：認可済みフィルムのショットマップ（フレームとヒット付き）。適応のための形状です。
• references/reui-frames/：ビジュアルテンプレート。認可済みフィルムの38枚の静止画と sheet.jpg。デザイン前にシートを見て、確認時に静止画を対応するフレームと比較してください。
• references/review.md：弱点チェックリストとサブエージェントレビューのブリーフ。

前提条件（最初に確認、不足しているものをインストール）

マシンでの初回ビルド前にこれらのチェックを実行してください。失敗したものだけをインストールし、何をインストールしたかをユーザーに伝えてください。

必要なもの	確認方法	インストール方法
Node 20.19+	node -v	brew install node（または nvm）
Remotion とそのレンダラー	プロジェクト内で npx remotion versions	プロジェクト内で npm i（バージョンは template/package.json に固定）；既存プロジェクトの場合：npm i remotion @remotion/cli @remotion/renderer @remotion/fonts @remotion/media（同じバージョンで）
Remotion 用 Chrome	npx remotion browser ensure	同じコマンド；Chrome Headless Shell をダウンロード
ffmpeg / ffprobe（最終ファイルチェック）	ffprobe -version	brew install ffmpeg
Python 3 + Pillow（コンタクトシート）	python3 -c "import PIL"	pip3 install pillow
librosa + numpy（beat.py、新規トラックのみ）	python3 -c "import librosa"	pip3 install librosa numpy
Playwright + Chromium（キャプチャ）	プロジェクト内で node -e "require('playwright')"	npm i -D playwright && npx playwright install chromium
音楽ファイル	public/audio/ 内のファイル	ブランドプロファイルが指定するソースから；決して自分で作成しない

Remotionのライセンス：個人および小規模チームは無料；規模制限を超える企業は会社ライセンスが必要です（https://remotion.dev/license）。ブランドが企業の場合に一度言及してください。

言語（すべてのブランドで共通）

• ブランド自身のニュートラルカラーから、1つのキャンバスと1つのインク。色はブランドが実際に持っている場所、または実際のUI内部のみ。ガラス、ゴールド、3D、グローは、ブランドがそれらで構成されていない限り使用しない。
• 1つの要素が導く。 細い線で飛び、カットを運び、最終ロゴで着地する。すべてのショットは、同じ画面位置で次のショットに要素を渡す。ReUIのマークでは、これはドット。新しいマークでこの要素を見つける：ドット、角、ストロークの端。
• すべての線は本物。 構築ガイドはロゴ自身のパスから来る。画面上のすべての数字は測定されている（ロゴ単位、DOMボックスはpx）。装飾は一切なし。
• ブランド自身の書体（サイトで使用しているもの）。測定のみにモノスペースを使用。
• 製品UI上にロゴやテキストを配置しない。ラベルはUIの外、クリアスペースに配置。
• 長い静止画の保持も含まれる。落ち着いているのは良いが、死んでいるのはダメ。

ストーリー構成（盲目的にコピーせず、適応させる）

パート	ビート（60中）	役割
ライン	0-8	リード要素がキャレットになり、ブランド自身のラインをタイプする
マーク	8-20	要素がマークに展開；マークはその構築から描画される
サイト	20-32	ロゴがズームアウトし、サイト自身のナブロゴになる；クイックツアー；ヒットで実際のサイトインタラクション
名前	32-36	ワードマーク、1ビートに1文字
製品	36-49	3-4の実際の製品ビュー、実際のドラッグ、測定された寸法、ハードカット、各約3ビート
ルックス	49-52	マークが各ビートで異なる描画；リード要素は動かない
エンド	52-60	ロゴが着地、文字が最後のヒットで落ち着き、次にブランドのラインとドメイン

ブランドが誇りに思っているものに時間を割く。構築や製品の前にルックスをトリミングする。

厳格なルール

• ブランドテキストはコピーし、決して書かない。 タグライン、ライン、名前はブランド自身のサイトまたはドキュメントからそのまま取得する。決して発明、結合、短縮しない。
• 製品UI内のデモデータは決してコンテンツにしない：その名前、数字、人物を特集しない。
• 実際のUIのみ、実在のマウスでキャプチャする。製品を決してモックしない。
• オーディオ：
  • 音楽はブランドプロファイルが指定するソースから取得し、プロファイルが許可しない限り決して新規生成しない。
  • ヒットは同期ポイントでの数回のインパクトとスラム。
  • プロファイルが要求しない限り、クリックやタイピングのSEFXは使用しない。
• そのターンで要求されない限り、決してレンダリングまたはエクスポートしない。 編集後はStudioプレビューを渡し、レンダリングは申し出ない。要求された場合：4K、同じファイル名、上書き。
• 試案は複製コンポジションで行う。承認済みのものが変わっていないことを静止画比較で証明する。「すべて修正」または「Xを削除」は直接メインに行う。
• ユーザーがフレームを指定した場合（「3150を削除」）、そのフレームをレンダリングし、何かを変更する前にショットに名前を付ける。

タイミングシステム（壊れやすい）

すべて src/Refreshed.tsx 内：

• クロック。
  • 音楽の BPM。SLOW = 2：ストーリーは音楽の半分の速度で進行。ローカルの useCurrentFrame() はスローされたフレームを返す。
  • T = 1ストーリービート。b(n) = ビートn、半ビートにスナップ：b(0.25) は4分の1ではなく、T / 4 を使用。
  • real(n) = b(n) * SLOW = ビートnのフィルムフレーム。
• ramp(f, from, to, ease) はアニメーションの唯一の方法。from/toを T / 8 グリッドにスナップし、それらが揃うと1を返す。0-1の分数を渡さない；clamp01((x - a) / (b - a)) を使用。
• ショット。 SHOTS = [[fromBeat, toBeat, Component]]。境界を移動するときは、そのショット内のすべてのビート定数を一緒に移動する。
• サウンド。
  • HITS = ビート上の効果音。
  • BED_FROM = トラックへの開始オフセット。BED_VOL、ダック用の volume コールバック付き。
• キック。 KickBump はルックスまで各キックでフレームをパルス。STILL = パルスなしのビート範囲。
• 同期ポイント は背骨：各大きな変更はヒット上に配置。移動するということは、その周りのショットを再固定することを意味する。
• 新しいトラック： python3 scripts/beat.py <track.wav> でテンポ、ファーストビート位相、ドロップを取得。BPM と BED_FROM を設定し、同期ポイントをそのアクセントに配置する。

テンプレートのブランドへの適応

交換するもの	場所
マークパス（リング、内部形状、リード要素）、形状の中心線とストローク、ワードマークの文字と位置、viewBox	src/logo.tsx（RING_D、U_D、DOT、U_LINE、U_STROKE、LETTERS、LETTER_X、VB、uPoint）
パレット、フォント、トラッキング	src/Refreshed.tsx の先頭（INK、PAPER、LIGHT_INK、DIM、FONT、TRACK）と public/fonts
ブランドのラインとドメイン	LINE、DOMAIN
サイトキャプチャ	scripts/reui/site-object.mjs のようなキャプチャスクリプトで public/cap/site-object/ に書き込む
製品ビュー	scripts/reui/live.mjs、dash.mjs、block-live.mjs のようなキャプチャスクリプト。各マウスステップごとに1スクリーンショットと測定ボックスを public/cap/live/<dir>/ と meta.json に書き込む。その後、NAMES_UI/BLOCK_UI エントリと WITH_UI 内の dir ユニオンを編集する
ルックス	LOOKS：マークを描画する3-4の方法（パスデータ、ハーフトーン、構築線）
音楽とヒット	public/audio/、BPM、BED_FROM、HITS

構造が異なるマーク（ドットなし、リングなし）は、独自の Construct、Opening、Final が必要。アイデアを維持する：実際のジオメトリから描画し、1つの要素に導かれる。

ワークフロー

1. brands/<brand>.md を読む（または書く）。ロゴSVGとサイトを測定；ブランドの逐語的なラインを収集。
2. 新しいフィルム：
   • cp -R ~/.claude/skills/brand-film/template <project> して npm i。
   • 音楽を public/audio/ に配置。
   • キャプチャスクリプトはプロジェクトフォルダからPlaywrightをロード（npm i -D playwright）、または PLAYWRIGHT_FROM のフォルダからロード。
3. キャプチャ サイトと製品を実在のマウスで。再キャプチャ前に meta.json をバックアップ。互いに異なる製品ビューを選び、実際に何かをドラッグ；ホバーツアーは避ける。
4. 編集 ブランドが変更したもののみ（上の表）。ヘルパー（Flight、Wipe、Dim、Lead、Disc、Live、LiveRun）はそのままにする。
5. チェック。
   • npx tsc --noEmit。未使用インポートの TS6192 のみ許容。
   • プロジェクトフォルダから：~/.claude/skills/brand-film/scripts/qa.sh <scratch>/q1 0.4 <frames...>、次に sheet.jpg を読む。
   • すべてのショット、各結合の両フレーム、各同期フレーム、エンディングをサンプリング。
   • シートを references/reui-frames/sheet.jpg の隣に置く。テンプレートの該当ショットよりもまばら、うるさい、または混雑している場合は問題。
   • 単一静止画はちらつく可能性がある；修正前に再レンダリングする。
6. レビュー（常に、新しいカットの初回引き渡し前）：
   • references/review.md のブリーフで1つのサブエージェントを生成。コードを取得し、あなたの結論は取得しない。
   • 弱点をランク付けしてフレーム番号と「触らない」リストを返す。
   • フレームで上位の所見を自分で確認し、フレームに表示されないものを削除。
   • ユーザーに短いランクリストを表示し、何を修正するか尋ねる（「すべて修正」と言われた場合を除く）。
   • 修正されたフレームを再確認。ユーザーが気に入ったもの（ブランドプロファイル）を決して元に戻さない。
7. プレビュー Remotion Studioで（http://localhost:<port>/Refreshed）。レンダリングではなくプレビューを引き渡す。
8. レンダリング（要求された場合のみ）： npx remotion render src/index.ts Refreshed out/<name>.mp4 --scale=2 --codec=h264 --crf=16 --pixel-format=yuv420p --overwrite --log=error をバックグラウンドで実行。その後 ffprobe：3840x2160、60 fps、フレーム数、オーディオストリーム。

各ターンの終わりに

変更内容（フレーム単位）、確認されなかったもの（モーションとサウンドは静止画に表示されない）、レンダリングされたmp4が古いかどうかを報告する。