cinematic-motion

cinematic-motion

ひとつのアイデンティティ：スタジオ印刷に映し出されるオープニングクレジット。スクロールが映写機であり、紙がスクリーンであり、ひとつのエレクトリックブルーが光です。

1. パレット（固定）

• キャンバス：#F7F5E7（温かみのあるスタジオ用紙。白でもグレーでもありません）。カード：#FCFBF4。極細の罫線：rgba(18,18,18,0.14)。
• インク：#121212（すべての主要テキスト）。ミュート：rgba(18,18,18,0.55)（ラベル、セカンダリ）。暗いシーンでは反転します。キャンバスはインク、テキストは紙色、罫線はrgba(247,245,231,0.16)。
• アクセント — ちょうどひとつ：#0F4BFD（エレクトリックブルー）。アクセントワード、ひとつの極細罫線、統計値、ひとつの塗りに使用します。これが上限です。
• キャンバスの切り替えがリズムを生みます： 紙のシーンとインクのシーンを交互にし、全面ブルーのシーンをひとつ入れます。シーンの切り替えが特徴です。ページあたりインクのシーンは最大2つ（インデックスとロードマップに使用）、ブルーのセクションはひとつにします。
• グラデーションは禁止（紙がテクスチャなので、クリーンでフラットにし、粒子やブレンドは使いません）。2つ目のアクセントは禁止。純粋な黒（#000）は禁止。白いセクションは禁止。

2. タイポグラフィ（固定）

• ディスプレイ： タイトなグロテスク体（Inter Tight）、ウェイト500～700、センテンスケース。セリフ体は禁止、イタリックは禁止。アクセントワードは色だけで注目を集めます。
• 見出し：clamp(3rem, 9vw, 8rem)、ウェイト600、行高0.94、トラッキング−0.04em。見出しごとにブルーのアクセントワードはひとつ。2つは使いません。
• シーンのh2：同じファミリー、ウェイト600、clamp(1.6rem, 3.4vw, 2.6rem)、トラッキング−0.02em。モノスペースのキッカーを添えます。
• ラベル／メタデータ： モノスペースの大文字（ui-monospace／IBM Plex Mono）、letter-spacing: 0.14em、10～11px、ミュート。番号付きキッカー：01 — THE LEAK、02 — THE INDEX。
• 本文テキストは14.5px未満にしません。本文はグロテスク体、ウェイト400、行高1.65～1.7とし、セカンダリテキストはミュートにします。
• CTAはピル型です（このパックでは使用可能）。インク色のピルにし、ホバー時にはブルーの塗りが上に広がります（::before＋transform: translateYのトランジション）。ナビゲーション以外では、ビューポートあたり最大1つのピルにします。

3. 構成（固定）

• フィルムの構成： ライブのプロダクト画面を備えたヒーロー（紙）→ ステートメントブリーフ（紙）→ ピン留めされたインデックス（インク）→ マーキー（紙、アウトライン文字）→ ステートメントブリーフ（全面ブルー）→ ドラッグカルーセル（紙）→ 詳細アコーディオン（紙）→ ピン留めされたロードマップ（インク）→ エビデンス（紙）→ クロージング（ブルー）→ フッター（インク）。
• ピン留めはインデックスひとつ＋ロードマップひとつ、合計2つ — これが上限です（taste-gsapを参照：デスクトップのみ、+=で終了）。
• 巨大なインデックス数字（63%のビート）はピン留めされ、スクラブに合わせてカウントします。ロードマップのピン留めでは、4つのステップが青い塗りの伸びるレール上をスクラブで進みます（ステップは順に表示され、クロスフェードで切り替わることはありません）。
• 動画なしでヒーローの存在感を出す： ライブのプロダクト画面 — CSSで構築したダッシュボード（増加するライブカウンター、ファネルバー、再生中の波形、統計セル）により、動画フレームを一切使わずにプロダクト映像のように見せます。ループはすべてCSSキーフレームで実装し、視差効果を減らす設定では停止します。カウント更新にはゲート付きのJSインターバルを使います。
• アコーディオンはネイティブの<details>/<summary>です — 最初の項目はデフォルトでopenにし、+のメダリオンを回転させます。動作にJSは不要で、設計上JSなしでも完全に機能します。
• ヒーローの雰囲気：ブルーのパーティクルフィールド（canvas、約60個のドット、上向きに漂い、アルファ値は≤ 0.16）と、破線の軌道リングをひとつ配置し、ゆっくり回転させます。どちらもJSで制御し、視差効果を減らす設定では停止します。
• インデックスの数字：巨大でウェイト600。キッチンシンク型キットなら画像を置くような、シーンの隅に配置します。

4. コンテンツの扱い

• 番号付きキッカーで、フィルムらしいビートの構成を維持します：01 — THE LEAK → 05 — THE CLOSE。フッターは奥付です：A SKITTIE FILM — PRODUCED IN 60 FPS。
• コピーは控えめで、自信に満ち、映画的にします。短い行にし、感嘆符や最上級表現は使いません。見出しごとにひとつのブルーのアクセントワードで感情を伝えます。
• 絵文字は禁止。アイコンは禁止。タイポグラフィ上の記号（✳）とCSSで描画する小さなデータビジュアルのみを使います（ファネルバー、波形バー、コホートグリッド。インク色の形にブルーのセルをひとつ）。
• ビューポートごとに主要なCTAはひとつ。セカンダリアクションには、ブルーの下線を付けたモノスペースのテキストリンクを使います。

5. モーション（魂 — taste-gsapを参照）

• ページは gsap.context と matchMedia のシェルで動作します。アニメーションはすべて (prefers-reduced-motion: no-preference) の内側に配置し、負荷の高いエフェクトは (min-width: 768px) の内側に配置します。
• 印象的な演出の順番： プリローダー（パーセンテージカウンターは2秒以内、スライドして消え、JSとモーションが有効な場合のみ表示 — CSSではデフォルトで非表示）→ ヒーローのイントロタイムライン（expo.out、マスクされた行が上昇し、製品画面が右からスライドイン、1.4秒以内）→ インデックスのピン留め：巨大な数字がスナップしながらスクラブされて 0 → 63 とカウントし、行が段階的にフェードアウトし、細いプログレスラインが伸びる → マーキー（CSS、アウトライン表示）→ ドラッグ式カルーセル（Draggable と inertia、scrollWidth − offsetWidth に基づく bounds、JS が無効な場合はネイティブスクロールを強制スナップ、カーソルが青い「DRAG」メダリオンに切り替わる）→ ロードマップのピン留め：青い塗りが伸びるレールに沿って4つのステップが上昇し、スクラブされる → 表示時にメトリクスがカウントアップ。
• 雰囲気を演出するレイヤー： Lenis によるスムーズスクロール（taste-gsap §1を参照）、差のブレンドモードを使ったカスタムカーソル（quickTo で補間し、インタラクティブな要素にホバーすると大きくなり、カルーセル上ではDRAGラベルを表示し、粗いポインターでは非表示）、磁力を感じるプライマリCTA（引き寄せは最大5px）、ナビゲーション内のスクロール進捗を示す細いライン。ヒーローのライブカウンターは一定間隔で動きます — 「生きている」感じを手軽に演出し、モーションを減らす設定では他の演出とともに停止します。
• 再生時間は0.9〜1.6秒、イージングは power3.out / expo.out、スクラブのスムージングは 0.6–1 です。モーションにはすべて transform / opacity を使います（taste-gsap §3を参照）。最後の見出しでは、アクセントとなる単語を中抜きのアウトライン（ストローク、塗りは透明）で表示します — 動きのない静止画として印象に残る演出です。
• JS が無効な場合やモーションを減らす設定でも、ページ全体が完成度の高い美しい状態でなければなりません — ピン留めは積み上げ式のセクションに切り替わり、カルーセルはネイティブのスクロールスナップ式ストリップになり、インデックスには最終値が表示されます。静止画の状態が退屈なら、失敗です。

6. チェックリスト（以下に該当するページは不合格…）

• グラデーション、2つ目のアクセントカラー、純粋な黒、白いセクションのいずれかがある。
• アクセントブルーをセクション全体と最後のセクションの両方に使っている — 青一色のシーンは1つだけにします。
• インク（ダーク）なシーンが2つを超えている — インデックスとロードマップに限定します。
• 青いアクセントの単語がない見出し、またはアクセントの単語が2つある見出し。
• セリフ体またはイタリック体 — このアイデンティティではグロテスク体のみを使います。
• マーキーが複数ある、またはモーションを減らす設定でもマーキーが動く。
• 番号付きのキッカーがない、またはコピーに映画のメタファーがない。
• ピン留めが合計2つを超えている、768px未満でピン留めしている、またはアニメーションに matchMedia による制御がない。
• ネイティブのスクロールスナップによるフォールバックがないドラッグ式カルーセル（JS 無効時）、またはキーボードで操作できないカルーセル。
• ネイティブの <details>/<summary> 以外で作られたアコーディオン — JS が無効でも動作しなければなりません。
• モーションを減らす設定でもアニメーションし続けるヒーローの「動画」（またはライブ画面）。
• JS が無効でも表示される可能性がある、またはモーションを減らす設定でも動作するプリローダー。
• タッチデバイスで表示されるカスタムカーソル、またはカーソルの反応に依存するコンテンツ。
• アニメーションするレイアウトプロパティ、またはJSが失敗するとコンテンツが永久に隠れるリビール演出。
• ページの驚きがアニメーションに依存している — 静止画だけでも印象を伝えなければなりません。