motion-reel（モーションリール）

motion-reel（モーションリール） は何をしますか？

エディトリアルモーションリールスタイルで1920×1080、30fpsのMP4を作成します。template/ 内に既製エンジンがあります。それをコピーし、設定ファイル（src/reel.config.ts）を1つ書き、レンダリングし、フレームを確認してから動画を送信します。

引数: $ARGUMENTS

1. リクエストを読み取る

引数と会話の内容から以下を把握します:

• 主題: どの製品または機能か。そのコードベース内にいる場合は、実際のコピー（i18nファイル、ページコンポーネント、README）を読み込んで、動画が製品の実際の動作を示すようにします。
• 色:
  • プリセット名: lime（基準ルック）、coral、ocean、sunset、violet、night（ダーク）
  • または16進数の値を、accent（蛍光ペン、目立つ色）、secondary（セカンドブランドカラー）、必要に応じて paper（背景）と ink（テキスト）にマッピングします。
  • 色が1つだけ指定された場合、それがアクセント色になります。
  • プロジェクトにブランドトークンがある場合（例: globals.css）は、それらを secondary として提供します。
  • 何も指定されていない場合: lime を使用し、最終メッセージでその旨を伝えます。
• コピーの言語: ユーザーの言語に合わせます（ユーザーがインドネシア語で書いた場合はデフォルトでインドネシア語）。
• 出力フォルダ: ユーザーがフォルダ名を指定しない限り、セッションのスクラッチパッドを使用します。ユーザーが依頼しない限り、プロダクトリポジトリ内に置かないでください。

主題が不明確な場合のみ質問します。色と長さにはデフォルト値があります。

2. スキャフォールド

cp -r "<this skill dir>/template" "<out>/reel"
cd "<out>/reel" && npm install && npm run sfx

• npm install には約2分かかります。他の作業がある場合はバックグラウンドで実行してください。
• 製品にロゴがある場合は、それを public/ にコピーし、brand.logo にファイル名を設定します。それ以外の場合は brand.initials を設定します。

3. src/reel.config.ts を書く

• theme: makeTheme(presets.coral) または makeTheme({ accent, secondary, paper, ink }) を設定します。その他のトークンはすべて自動的に導出されます。
• シーンを選択します。フィールドリスト、デフォルトの長さ、およびコピーの長さ制限は references/config.md にあります。コピーを書く前にこれを読んでください。
• 推奨アーク（約45秒）: spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo。製品に合わないシーンは削除してください。短いカット（約20秒）: spark → word → tagline → kinetic → logo。
• 事実: 製品が実際に主張するクレームのみを表示します。「10,000ユーザー」や「99%アップタイム」などのメトリクスを決して作成しないでください。サンプルコンテンツ（アカウント名、サンプル投稿）は架空のもので、明らかに汎用的であり、実際の顧客データを使用しないでください。
• 見出し: title.sans は主張文、title.serif はイタリックのひねりです。mark はセリフ部分の1単語で、蛍光ペンで強調されます。

4. チェックとレンダリング

npx tsc --noEmit
npm run render        # → out/reel.mp4, uses --port=3917
npm run frames        # → out/frames/sheet*.jpg, 1.5秒ごとに1フレーム

すべてのコンタクトシートを確認してください。以下を確認:

• カードやフレームからテキストがあふれていないか
• 要素が重なっていないか
• 空っぽに見えるシーンがないか
• 蛍光ペンが間違った単語に付いていないか
• カスタム色によるコントラスト低下（例: 明るい背景に明るいアクセント）

設定を修正し、必要に応じてエンジンを修正してから、もう一度レンダリングします。レンダリングをループさせないでください。

5. 配送

• out/reel.mp4 を SendUserFile（display: "render"）で送信します。
• 長さ、サイズ、シーンごとの1行サマリー、使用した色、後で編集するための設定ファイルのパスを報告します。
• オーディオは聞いていないことを明示します。タイミングとレベルだけを確認したと述べます。

スタイルルール（エンジンを拡張する場合）

• パレットの役割: paper 背景、ink テキストとダークピル、accent はハイライトとライブ状態のみ（紙の上の大きなテキストには使わない）、secondary はカラーブロックとロゴのアクセント単語。
• タイポグラフィ:
  • Inter Tight 800: 主張文用
  • Instrument Serif Italic: ひねり用
  • Archivo Black: キネティック単語のみ
  • JetBrains Mono 13–20px（文字間隔あり）: ラベルとHUD用
• モーション:
  • 登場: bezier(0.16,1,0.3,1) の Expo-out、移動: bezier(0.65,0,0.35,1) の in-out
  • 退出: 方向ブラー（Smear）で加速
  • テキスト: マスクから上昇（overflow: hidden + translateY）
  • 数字: 垂直ブラー（Roll）で回転
• トランジション: スミアアウト/イン、タグライン後のインクへのディップ、ズームブラーThrough、キネティックブロック前にアクセントカードが全画面に拡大、キネティック単語間のハードカット。シェイク、白フラッシュなし。
• HUD: 左上にラベル、右上にタイムコード、左下にセクションラベル＋プログレスヘアライン、右下に解像度、コーナーブラケット。暗いカラーブロックの上では明るいテキストに切り替わります。
• 各シーンは少なくとも1.5秒間読めるテキストを保持します。

Remotionの落とし穴（苦労して学んだこと）

• すべてのモーションは useCurrentFrame() から来ます。CSSトランジションとアニメーションはレンダリングされません。
• ポート3000は開発サーバーでよく使われています。常に --port を渡してください。
• Remotionにバンドルされたffmpegには fps フィルターと tile フィルターがありません。フレームを取得するには -ss で1つずつ取得します（scripts/frames.mjs がこれを行います）。
• React.useId() にはコロンが含まれます。url(#id) で使用する前にサニタイズしてください。
• 方向ブラー: SVG feGaussianBlur stdDeviation="x y"。CSSの blur() は均一ブラーのみです。
• オーディオ: キューごとに1つの <Sequence from> + <Html5Audio> を使用し、durationInFrames をクリップ長に設定します。
• color-mix() と clip-path: circle() はRemotionのChromeで動作します。