# 落ちていく — Style Reference
> 土の穴を落ちながら、クリームの札が通り過ぎる

**Theme:** dark(落下中)→ light(穴の底)  **Series:** FABLE 013  **World:** キャロル『不思議の国のアリス』第一章。うさぎの穴、「飲んで」で小さく、「食べて」で大きく

## Concept
開いた瞬間に伝えること: 「スクロールが落下そのもの」。ヒーローは 460vh の高さを持ち、sticky な全画面 canvas の中でカメラがうさぎの穴を下へ降りる。壁には懐中時計・チェスの駒・瓶・鍵・茶碗・腰掛け・トランプをクリーム地の札(ステッカー)として貼り、通り過ぎる。落下の途中で「飲んで」の文字が極小へ縮み、「食べて」の文字が画面を越えて巨大化する。底は市松の床。着地後のセクションはクリーム地で、市松の無限遠近(レイマーチ)と、ボタンで組版ごと縮む・育つデモを置く。色は赤・黒・クリームの 3 色だけ、紫は使わない。

## Signature Technique
- 落下(Three.js 0.170): CylinderGeometry(r 5.2, 長さ 380, 開口, BackSide)を −y 方向に伸ばし、カメラは `rotation.x = −π/2` で真下を向く。スクロール進捗 p = −rect.top / (sectionHeight − innerHeight) を `camera.position.y = −p·340` に写像、`dt·6` の lerp で追従。微小なスウェイ(x/z ±0.35、roll ±0.06 + p·0.4)で「落ちている」体感を足す。Fog(SOIL, 4〜46)と、カメラの 1.5m 下を追う PointLight(#ffe9c8, 78, 距離 30, decay 2)がランタンになる。壁の MeshStandardMaterial は土のテクスチャ自身を bumpMap(scale 3.2)に使い、ランタンの光で土の凹凸が出る。カメラの 40m 下に加算合成の Sprite(放射グラデーション #ffd696→#e69650→透明、9m 角、fog なし)を置き、穴の底がかすかに光って奥行きが出る。
- 壁テクスチャ: 1024² canvas。土色 #1c1713 に ±22 のノイズ、半透明クリームの地層帯、128px ごとの深さリング(4 本ごとに赤、他はクリーム 50%)。RepeatWrapping (3, 340/64+1)。
- 札: PlaneGeometry(1.2〜2.6 m)に CanvasTexture。写真 2 枚(懐中時計、チェスのナイト)は webp(448px、data URI)、他 6 種(瓶・鍵・茶碗・腰掛け・トランプ・渦巻)は 256px canvas に線幅 6 の黒線 + 赤面で手続き描画。同じ大きさの黒い板を (+0.1s, −0.1s, −0.02) にずらして重ね、MetaMusic 由来の「硬いオフセット影」を 3D でも再現。デスクトップ 80 枚 / モバイル 44 枚、決定論的 LCG(seed 7)で配置。最初の 7 枚は縁から 7.5〜24m の範囲に角度をずらして置き、開いた直後の静止画にも札が写る。
- 底の床: PlaneGeometry 400² に ShaderMaterial。`checker(p)` は幅 fwidth で積分したアンチエイリアス市松(iq の filtered checkers)。カメラ高さ差 d で `1−exp(−(d−6)·0.05)` のフォグ。
- 文字フェーズ: 進捗 p を smoothstep で 3 区間に割り(題 0〜0.22、飲んで 0.26〜0.56、食べて 0.6〜0.93)、opacity と `--fs` を JS から直接書く。飲んで: font-size = base·(1 − 0.78·s)、食べて: base·(0.35 + 4.2·s^1.6)、base = min(innerWidth·0.22, 190)。英語の副題は Fraunces(opsz 9〜144 の可変フォント)を `font-optical-sizing:auto` で置き、サイズに応じて光学サイズ軸が自動で動く。巨大化するとコントラストの高い字形に、極小ではずんぐりした字形になる。
- 市松の床(セクション01): WebGL2 の全画面フラグメントシェーダ。`ro = (1.5·sin(0.11t), 1.3, 1.6t)`、`rd` を pitch/yaw(ポインタ ±0.18 / ±0.35 rad)で回し、平面 y=0 との交点で同じ filtered checker。距離フォグ `1−exp(−0.028t)` でクリームへ溶け、地平線の上は赤→クリームの 0.012 幅のラインから、上へ向かって暗い土色(#211a14)の天井へ落ちる。pitch は −0.2 で床が画面の 2/3。カメラの 7m 先に穴から落ちる光だまり(`exp(−|Δ|²·0.035)`、床の明るさ ×0.72〜1.22)。ディザ ±1/200。
- 組版スケール(セクション02): `.scale{--s}` の 1 変数で font-size・padding・gap・hr の太さ・margin すべてを `calc(値·var(--s))`。ボタンで 0.55 / 1 / 1.9 に切り替え、`transition .7s cubic-bezier(.4,0,.2,1)` で font-size と余白が同時に動く。見出し Fraunces は opsz が font-size に連動(44px→24px→84px)。読み出し(scale / opsz / font-size)は実値をそのまま表示。
- 深さ計: 右上固定。カメラの y 座標(m)をそのまま表示、`mix-blend-mode:difference` で土の上では白、クリームの上では黒になる。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --cream | #efe7d6 | ページ地、札、落下中の文字 |
| --paper | #f6f1e6 | カード・ボタンの面 |
| --ink | #15120f | 本文、線、硬いオフセット影、市松の黒 |
| --soil | #1c1713 | 穴の壁、フォグ、落下セクションの地 |
| --red | #d7262c | ラベル、押下中のボタン、深さリング、地平線、札の差し色 |
| --line | #c9bfa9 | セクション間ヘアライン |
| --muted | #6f665a | 補足文 |
| lantern | #ffe9c8 | カメラに追従する PointLight |

## Typography
- 日本語: Zen Kaku Gothic New。落下中の見出しは 900、h2 は 700、本文 400 / 15px / 1.9 / 字間 0.02em。題「落ちていく」は clamp(56px, 13vw, 180px)、字間 0.02em、1 行固定。
- 欧文: Fraunces 可変(opsz 9〜144, wght 300〜900)。`font-optical-sizing:auto` を全箇所で有効化。ラベルは 500 / 12px / 字間 0.2em / 大文字、落下中の副題は 300 italic、カード見出しは 600 / 字間 −0.02em、深さ計の数字は 400 / clamp(26px, 3vw, 40px) / tabular-nums。
- 階層は太さ(900 / 700 / 400)と色(ink / muted / red)で作る。斜体は副題だけ。

## Spacing & Layout
- 最大幅 1200px、左右ガター clamp(20px, 4vw, 56px)。セクション上下 clamp(96px, 14vh, 160px)、上端にガター内側のヘアライン。
- 2 カラム grid 5fr/7fr、gap clamp(32px, 6vw, 96px)。860px 以下で 1 カラム。
- 落下セクション: 高さ 460vh、内側 sticky 100svh(最小 560px)。左下に SCROLL ヒント、右下に穴の名前と深さ。
- カード・札: 1px 黒枠 + `4px 4px 0 0 #15120f` の硬い影、角丸なし。ボタンだけ 999px のピル。
- 札グリッド: 3 列、gap 14px、正方形、中身は 72%。
- breakpoints: 860px(グリッド)、640px(モバイル判定: 札の数とピクセル比を落とす)。

## Motion
- 落下: スクロールに従属。lerp 係数 dt·6。自律的な動きはスウェイとランタンだけ。
- 文字: opacity と font-size を毎フレーム直接更新(transition なし)。巨大化は s^1.6 で終盤に加速。
- 市松: 前進 1.6 m/s、横揺れ 1.5·sin(0.11t)、ポインタ追従 lerp 0.06。
- 組版スケール: .7s cubic-bezier(.4,0,.2,1)。影とボタンの hover は translate(2px,2px) + 影を 2px に縮める(押し込み)。
- rAF は 1 本。落下と市松は IntersectionObserver で画面内の時だけ描画、`document.hidden` で停止、初期化時に 1 フレームだけ必ず描く。リサイズは 120ms デバウンス。
- prefers-reduced-motion: カメラは lerp なしで進捗に一致、スウェイ 0、市松は time 固定でポインタ移動時のみ描画、組版の transition なし、SCROLL ヒントの動きなし。
- WebGL 不可: `.no-webgl` で落下セクションを通常の高さに戻し、題と本文だけを表示。市松は WebGL2 がなければ CSS の repeating-conic-gradient に置き換える。

## Components
- fall: 全画面 canvas + 3 つの `.phase`(題 / 飲んで / 食べて)+ 下部のヒント行。
- meter: 右上固定、`深さ` ラベルと数字 + m。
- section: ヘアライン + 赤ラベル(番号 / 英語)+ h2 + 1〜2 文。右に技術 1 つ。
- checker: 16/10(モバイル 4/5)、黒枠 + 硬い影。
- scale card: kicker / h3 / 本文 / hr / ピル 2 個。すべて `--s` 連動。
- pill: 1px 黒枠、硬い影、押下中は赤地にクリーム文字。02 の 3 つ(飲んで・そのまま・食べて)は padding 10px 15px、間隔 10px で 1 行に収める。
- footer: ヘアライン上、左に `VALE / FABLE 013`、右に作品名。

## Do / Don't
Do
- 色は赤・黒・クリームの 3 色に収める。赤は 1 画面に 1 役。
- 影は硬いオフセット 1 種類だけ。ぼかしは使わない。
- 文字の大きさを変えるときは余白・線・影も同じ比率で変える。
- スクロール量と落下距離を 1 対 1 に保つ(進捗の加速をしない)。
- 札の絵は線幅 6 の黒線 + 赤 1 面で描く。

Don't
- 紫やグラデーションを足さない。
- 落下中に本文を増やさない(題 1 本 + 1 文まで)。
- 札に文字を入れない。
- 影をぼかさない、角丸をカードに付けない。
- 深さ計に演出用の数字を入れない(表示はカメラ座標の実値)。

## References
- MetaMusic(editorial cream broadsheet with sticker-flat accents): 「クリームの紙地に硬い 4px の黒オフセット影」「装飾を巨大な見出しと影だけで済ませる」考え方を取り入れた。青とインディゴは赤と黒に置き換え、Maison Neue は Zen Kaku Gothic New + Fraunces に。影の表現を 3D の札(黒い板をずらして重ねる)にも持ち込んだ。
- Enviar Dinero(Electric Sky Wallet): 「ウェイト 900 の見出しを画面から溢れさせる」「ボタンは枠線のピル」という手法を取り入れた。空色と紺の二温度リズムは使わず、土の黒とクリームの明暗で穴の中と底を分けた。