# 空力 KUURIKI — Style Reference
> 黒い風洞。白い煙の線がカーボンの車体を撫でて流れ、スクロールすると風が速くなる。

**Theme:** dark  **Series:** EDGE 006  **World:** スーパーカーの風洞とカーボンと速度。架空のクーペ『空力』の公式サイト。

## Concept
ページ全体が風洞。hero は黒地に白い煙の線だけで、線の曲がり方で車体の形を見せる。車体はカーボンの綾織りで覆い、カーソルの光で繊維が返る。カーソルで風が乱れ、hero を 2.3 画面分スクロールする間に風速が上がって線が引き伸ばされる(速度の表現はモーションブラー)。色は黒と白と炭素の灰だけ。区画は「カーボン → 後流(渦) → 積層 → 試乗」で、車体の素材と空気の挙動を順に見せる。

## Signature Technique
### 1. 風洞(hero, GPU ナビエ・ストークス + 障害物マスク, demos/flow 転用)
- 速度場 256²(mobile 128²)、染料 1024²(mobile 512²)、圧力反復 22(mobile 14)、渦度 4。速度減衰 0.08/s、染料減衰 0.30/s(+速度×0.4)。
- **障害物**: クーペの側面シルエットを 63 点の正規化ポリゴンとして HTML に埋め込み(生成画像から一度だけトレース、縦横比 3.66)、Chaikin 細分を 5 回かけて丸め、canvas に `blur(車幅×0.6%)` をかけて白で塗り、`R` テクスチャにする。全シェーダーで 0.5 を境に固体と判定するので、ぼかし→しきい値でトレースの小さな凹凸が消え、表示側は `smoothstep(0.40,0.60)` で 1px の滑らかな縁になる(画像ファイルは使わない。`file://` で canvas が汚染されるため)。横画面では幅 60% を `(0.54, 0.53)` に、縦画面では幅 94% を `(0.5, 0.40)` に置く。
- 発散・圧力・勾配の各シェーダーで固体セルを扱う: 発散は固体側の速度を 0、圧力は固体側を中心値(Neumann)、勾配減算では固体側の成分を 0 にして固体内の速度を 0 に固定する。
- **渦列**: 車体後端の少し後ろ `(tail.x+0.03, tail.y)` に、`sin(t·(5.5+5·speed))` で上下に向きを変える速度 `±(240+420·speed)` を風のシェーダーの中で毎ステップ足す(追加のパスは無い)。上下の剥離点には同じ位相で煙を 0.9 足す(煙の線のシェーダーの中)。交互の渦が後流に巻き、静止画でも渦巻きが 1〜2 個見える。渦度は 4 のまま(上げると全部の線が細かく震える)。
- **風**: 左端 8% の帯で速度を `(wind, 0)` に 60% 引き寄せ、全域でも `dt·0.9` の割合で緩和して流れを保つ。`wind = 150 + 470·speed` texel/s。curl noise `6 + 40·speed` を帯の外で加える。
- **煙の線**: 左端 1.4% の帯に `rows` 本(17、mobile 16)の水平線を毎フレーム注入。`line = exp(-(fract(y·rows+0.5)-0.5)² / (0.0011·rows)²)`、強さ `11 + 9·speed`。線はゆっくり上下に揺れる(`0.03·sin(0.7t + 9y)`)。
- **速度演出**: `speed` は hero の track(230svh)のスクロール進捗。表示前に `acc = max(blur8(dye, stretch=0.05·speed), acc_prev · 0.86·speed)` で 8 タップの横ブラー + 時間方向の残像を合成し、線が引き伸ばされる。右下のメーターに `Wind / low|mid|high`。
- **車体**: マスク内は `carbon()`(§2)を 300 倍の細かさで描き、織り目の重みを 1/3 に落とす(縦糸と横糸の山で取った同じ平均色の滑らかな塗装面に 33% だけ混ぜる。縦画面は 20%)。マスクの 5×5 ぼかしから擬似法線 `nb` を取って上面光(-0.3, 1, 0.6)とカーソルのランプで陰影を付ける。ぼかしマスクの縁 `smoothstep(0.55,0.95,bl)` が上縁のリムライト。
- **カーソル**: 移動差分 ×1400 の速度スプラット(染料なし)。ランプは `dt·5` で追従、無操作時は `(0.6+0.08 sin 0.3t, 0.62)`。
- 初回 3 フレームで `dt 0.05`(mobile 0.035)× 12 ステップの先行計算を行い、最初の表示で線が画面を横断している。
- 文字の背後: 画面下 42% に `smoothstep` の暗い幕(左で 0.75、右で 0.4)を煙だけに掛け、車体には掛けない。

### 2. カーボン(共通 GLSL `carbon(p, L, V, detail, gloss)`)
- 2×2 綾織り: セル `(i, j)` で `k = mod(i - j, 4)`、`k < 2` なら縦糸(経)、それ以外は横糸(緯)。糸の断面は `sin(across·π)` の丸み、法線は `cos(across·π)·1.1` の傾き + 繊維ノイズ `cnoise(across·16·detail, along·2.5)` を 0.6。
- 糸が隣の下に潜る端 `dive` と、糸の縁 `smoothstep(0, 0.16, across)` で AO。
- 光: 繊維方向 T の Kajiya-Kay `(1-(T·H)²)^20`、クリアコートは平面法線で `H.z^120 × 0.32`、フレネル `(1-N·V)^5`。ベース `#08080A`、繊維のハイライト `#80858F`。
- section 01 では画面高あたり 90 本(縦画面 54 本)の糸で 0.18 rad 傾け、パネルの端が丸まる擬似法線と、カーソルからの距離で `0.45 + 0.55·e^{-0.7d}` の減衰、最後に `1 - exp(-1.5·col)`。

### 3. 後流(section 02, 2D canvas, 解析的な流れ場に粒子)
- 粒子 1000(mobile 420)。流れ = 一様流 `(0.34, 0)` + 翼の押しのけ(翼の符号付き距離 `exp(-22d)` で上下に逸らす)+ 翼後方のダウンウォッシュ + **渦列**: 後縁から 0.42 秒ごとに符号を交互にした渦 `Γ = ±24` を放ち、`0.30/s` で下流へ流しながら寿命を `0.10/s` で減らす。渦の誘導速度は `Γ·e^{-4.5r²}/(220r²+1)·life`。軌跡は前フレームに `rgba(10,11,13,0.30)` を重ねる残像で描く。
- カーソルが 0.03 以上動くたびに渦を 1 つ置く(Γ ±18、符号はランダム)。
- 描画: 前フレームを `rgba(10,11,13,0.30)` で塗って残像にし、粒子は前位置→現位置の線分(`#DEE4EC` α0.42)。翼は黒塗り + 1px の白い輪郭。翼の厚みは弦長の 23%(縦画面でも比率を保つ)。

### 4. 積層(section 03, scroll 連動 CSS 3D)
- 7 枚の `.ply`(`rotateX(56deg)`、綾の疑似パターンは 45°/-45° の `repeating-linear-gradient`)。進捗 `p` で `translateZ((i-3)·54·(1-p) px)` と `rotateZ(±12°·(1-p))`、`p=1` で 1 枚に閉じる。`p = clamp((0.85·vh - rect.top)/(0.9·vh), 0, 1)`。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| `--bg` | `#08090A` | ページ地、風洞の黒 |
| `--surface` | `#141516` | 面の下地(予備) |
| 文字の床 | `rgba(8,9,11,.78〜.9)` | カーボン区画の下 62% に敷くグラデーション。説明文を織り目から切り離す |
| `--rule` | `#26282C` | 1px 罫線 |
| `--rule2` | `#34373C` | チップ枠、積層シートの枠、メーターの溝 |
| `--snow` | `#F2F3F5` | 見出し、ブランド、ボタン枠、メーターの針 |
| `--mist` | `#C9CDD3` | 説明文、チップ文字 |
| `--fog` | `#8A8F98` | ラベルとヒントとフッターの文字 |
| `--steel` | `#5C6168` | 低優先のラベル(予備) |
| 煙 | `#DBE5F5` | シェーダー内。白い線 |
| 繊維ハイライト | `#80858F` | シェーダー内。カーボンの返り |

## Typography
- 見出し: **Zen Kaku Gothic New** 900。h1「空力」`clamp(96px, 15vw, 220px)`、`line-height .95`、`letter-spacing -.03em`、左下。mobile `clamp(84px, 24vw, 140px)`。h2 `clamp(32px, 3.8vw, 52px)`、`line-height 1.1`、`max-width 16em`。
- 本文: **Zen Kaku Gothic New** 300。16px / 1.9 / `.02em`。説明文 `.lede` 17px(mobile 15px)、`--mist`、`max-width 30em`(hero は 40em)。
- ラベル: **Barlow** 600、11px、`letter-spacing .14em`、大文字。番号「01 / Carbon」とチップとヒントとメーターとフッターに使う。ブランド「KUURIKI」は Barlow 600 14px `.3em`。
- 英語は短いラベルだけ。本文は日本語。

## Spacing & Layout
- 基本単位 8px。横パディング `--pad: 48px`(mobile 20px)。最大幅 1440px。
- hero: `.track` 230svh(mobile 200svh)の中に `position: sticky` の 100svh。文字は左下、メーターは右下(mobile は縦積み)。
- カーボン / 後流は `100svh`(min 600px)、見出しブロックは画面下。積層は 2 カラム(`1fr 1fr`、gap 64px)、820px 以下で 1 カラム。試乗は `padding clamp(120px, 16vw, 220px) 0`。
- Breakpoint は 820px の 1 つ。

## Motion
- rAF 1 本、IntersectionObserver で可視区画のみ、`dt` 上限 1/30 秒(流体は 1/45 秒)。
- 風速は `speed += (target - speed)·min(1, 3dt)` で滑らかに追従。メーターの幅 `8 + 92·speed %`。
- カーボンの光は `dt·4` 追従、無操作時は `(0.6+0.22 sin 0.3t, 0.58+0.2 sin 0.23t)` を周回。
- reduced-motion: 風洞は速度 0.25 固定で 160 ステップ先に進めた静止画、カーボンは固定光、後流は 120 フレーム先に進めた静止画、積層は閉じた状態。リサイズ時のみ再描画。
- WebGL が無い端末: hero とカーボンに 1 行の注意書き、後流(2D canvas)と積層(CSS)は動く。

## Components
- **hero**: 全画面 canvas の上に、左上ブランド + 右上チップ「Wind tunnel」、左下に `EDGE 006` → h1 → 説明 → ヒント、右下に風速メーター(ラベル + 1px のバー)。`touch-action: pan-y`。
- **stage**: 全画面 canvas + 下部の見出しブロック。
- **plies**: `.stack`(perspective 1200px)に 7 枚の `.ply`。各シートの右下に Barlow 10px の「PLY 01」。
- **button**: ピル型、1px `--snow` 枠、`padding 16px 30px`、15px、ホバーで白塗り黒文字。矢印は 16px inline SVG。フォーカスは 2px `--snow` アウトライン。
- **footer**: 1px 上罫線、Barlow 11px 大文字、左「VALE / EDGE 006」右「KUURIKI」。

## Do / Don't
**Do**
- 画面の色は黒と白だけ。灰はカーボンの陰影として出す。
- 煙の線は細く、本数を絞る(17 本)。線の曲がりで形を語る。
- 文字の背後は幕で煙を薄くし、車体には幕を掛けない。
- 車体は常に画面の上半分に置き、文字と重ねない。
- 画面外の canvas は止める。

**Don't**
- 青や赤の流線、虹色の圧力分布を足さない。
- 背景にグリッド線やメーター風の装飾を敷かない。
- 車体にロゴやエンブレムを描かない。シルエットと素材だけ。
- 速度を数字で書かない(low / mid / high だけ)。
- 粒子を増やして画面を埋めない。

## References
- **SpaceX**(stock/refero/md/spacex.md): 純黒の上に白い技術的なラベルだけを置き、写真に画面を明け渡す構えを借りた。写真の代わりに風洞の煙の線(コード)に画面を渡し、D-DIN の代わりに Barlow 600 の大文字トラッキング(.14em)をラベルに使う。ボタンは同じく白の細枠。
- **Changelog / Linear**(stock/refero/md/changelog.md): `#08090a` の地に積み重ねる灰の階調と、1px の罫線だけで区画を分ける規律を借りた。Inter の代わりに Zen Kaku Gothic New、Berkeley Mono の代わりに Barlow。影は使わず、積層シートも 1px の縁と透明度だけで高さを出す。