motion-design

モーションデザイン

Remotion は API を教えてくれます。このファイルは、デザインの感覚を伝えるものです。以下の数値はすべて、リリース済みの作品（src/EffortVideo.tsx）に基づいています。偶然ではなく、意図的に変更するデフォルト値として扱ってください。

1. 時間は timeline.json で管理します

• すべてのビートは、timeline.json に秒単位の名前付きタイムスタンプとして定義され、シーンごと（s1、s2 など）にグループ化されています。コンポーネントは src/lib.ts の TL を通じて読み込みます。sfx/cues/ にある動画のキューシートも同じファイルを参照します。これによって映像と音声のタイミングが同期します。
• コンポーネント内に開始時刻をハードコードしないでください。ビートからの相対オフセット（s1.exit + 0.05）は問題ありません。
• タイミングの変更は timeline.json を編集し、その後 npm run sfx を実行して音声も追従させます。
• すべてを frame の純粋関数にしてください。CSS トランジションやキーフレーム、Math.random()（rand(n) を使用）、Date は使わないでください。それ以外の方法では、レンダリング時にちらつきやずれが生じます。

2. イージング

カーブ	用途	定義元
easeOut = bezier(0.16, 1, 0.3, 1)	登場、表示、到着するあらゆる動き	lib.ts
easeIn = bezier(0.6, 0, 0.9, 0.35)	退場 — 素早く消え、引きずりません	lib.ts
easeInOut = bezier(0.65, 0, 0.35, 1)	2つの状態間の移動（反転、ドック、モーフ）	lib.ts
オーバーシュート bezier(0.55, 0, 0.2, 1.12)	「着地」する値（スライダーが目標値まで上がるなど）	effortAt

リニアは、回転、ドリフト、グレイン、時計の針のような連続的な動きに限って使います。

トゥイーンには prog(t, t0, t1, ease) を使い、別の値からアニメーションを導き出す場合（たとえば、スライダーの位置からキャプションを動かす場合）は、独自のクロックを設けるのではなく band(x, a, b) を使います。

3. スプリング（sp(frame, startSec, config) を使用）

動きの印象	damping / stiffness / mass	用途
標準的な収まり	14 / 140 / 0.8	一般的な UI の登場
重く、落ち着いた動き	15–20 / 140–240 / 0.6–1	大きなパネル、巻き戻し
ノブ／ノッチ	12 / 190 / 0.75	コントロールが段階にスナップする動き
ポップ	9–11 / 200–230 / 0.7	コールアウト、バッジ、成功を示すドット
弾むアクセント	8 / 200	動画ごとに1度だけ使う主役級の演出

物理的に感じられるもの（UI、オブジェクト）にはスプリングを使います。文字やカメラのような動きにはベジェトゥイーンを使います。

4. タイミング

• スタガーは、単語ごとに約 0.09 秒、リスト項目／チップごとに約 0.2〜0.25 秒、リング／ドットごとに約 0.06 秒ずらします。
• 単語の表示は Mask を使って約 0.8 秒にします（クリップから上方向にスライドさせ、わずかに傾けます）。
• 退場は登場の約半分の長さにします（0.35〜0.55 秒に対して、0.7〜1.25 秒）。退場には easeIn を使います。
• **シーンを重ねます。**前のシーンが完全に消える前に、次のシーンの描画を開始します（s2.drawOn は 4.02 秒で、s1.flipEnd の 4.4 秒より前です）。大きな隙間は「読み込み中」のように見えます。
• タイピングは1文字あたり約 0.035 秒にし、入力待ちの間はキャレットを約 2.4 Hz で点滅させます。
• **読める状態を維持します。**読み取れる状態になった後は、必ず止まって見せる時間を設けます。短いフレーズなら 1 秒以上、3単語を超える場合は1単語ごとに約 0.25 秒追加し、最後のフックは 2 秒以上です。effort video の 22 秒版が存在するのは、15 秒版ではテキストの表示が速すぎたためです。迷ったら、表示時間を長くし、アニメーションを減らしてください。

5. タイポグラフィ

• フォントファミリーは最大3つです。ディスプレイ用セリフ体（Instrument Serif）、UI 用サンセリフ体（Inter）、ラベル、プロンプト、数値用の等幅フォント（JetBrains Mono）を使います。
• ディスプレイ用文字は大きく（1080 のキャンバスで約 138 px）、文字間隔を詰めます（-0.02em）。lineHeight: 1 にします。
• 1行につきアクセントは1つだけです。アクセントカラーのイタリック体の単語を1つ使って要点を伝えます（Same *prompt.*）。
• 等幅フォントのラベルは大文字にし、letterSpacing: 0.2–0.24em、控えめな色にします。ラベルは装飾です。視聴者に読ませる内容は大きく表示します。
• スマートフォンで確認します。幅 360 px（X のフィードで表示される幅）でも、重要なメッセージが読める必要があります。コンタクトシートで確認してください。

6. 色

• パレットのトークンは C（lib.ts）にあります。コンポーネントに新しい16進数カラー値を追加しないでください。
• アクセントカラーはコーラル1色で、意味を持たせます。変化したもの、答え、勝者に使います。すべてをコーラルにすると、何も目立たなくなります。
• グローは時間ではなく状態から導き出します（glow = effort）。光によってストーリーが伝わるようにします。

7. テクスチャ — 何も完全には静止しない

• フィルムグレインのオーバーレイ（Grain、不透明度 ≈ 0.09、2 フレームごとにシードを再設定）。
• ビネットと、数 px/s で漂うドットグリッド（Background）。
• スケッチ風／低忠実度の状態に手描きの「ラインボイル」（WobbleFilter）を適用し、品質が上がるにつれてフェードアウトさせます。
• アイドル状態の要素には呼吸するような動きを加えます。時計の秒針、点滅するキャレット、ゆっくりとした回転などです。

8. 連続性とトランジション

• カットよりも、オブジェクトを持続させることを優先します。プロンプトバー、光の粒、スライダーはシーンを移動しながら役割を変えます。それによって、寄せ集めではなく、デザインされた映像に感じられます。
• すべてのトランジションに画面上のオブジェクトを動機として使います（結果を示す 5 つのドットが 1 つに合わさり、それが虹彩になります）。汎用的なワイプは使いません。
• 速度を活用します。動きをごまかすのではなく、value(frame) - value(frame - 1) からモーショントレイルやスクワッシュを導きます。
• 動画ごとに見せ場は 1 つ（虹彩とインパクト）にします。そこに向けて構成し、早い段階で使ってしまわないようにします。

9. アンチパターン

• すべてを一度にフェードインさせる、またはすべてに同じ時間を使う。
• 動き出しや停止のある要素にリニアなイージングを使う。
• 読むことを想定している間に動くテキスト。
• 1 フレームに複数の焦点を置く。
• 意図的にクロップする場合を除き、フレーム端から約 60 px 以内（セーフエリア）にコンテンツを配置する。
• 0 フレーム目が空白または黒のフレームであること — X ではミュート状態で自動再生され、最初のフレームがサムネイルになります。

ワークフロー

1. まず timeline.json にビートを書き込みます（数値で表すストーリーボードです）。
2. シーンは src/scenes/ にコンポーネントとして、共通要素は src/components/ に作成します。
3. 意味のある変更を加えるたびに review-loop スキルを実行します。
4. 映像のタイミングが確定したら、sound-design スキルを実行します。