# わら・木・れんが — Style Reference
> 紙白の上に三つの家。カーソルの息で、わらは飛び、木はきしみ、れんがは動かない。

**Theme:** light  **Series:** FABLE 009  **World:** 三匹の子豚(英国民話)。わらと木とれんがの家に、狼の息が当たる。

## Concept
三つの家が三つのセクション。狼の息はカーソル(スマホでは指)で、GPUの2D流体として画面全体に広がる。同じ風を受けても素材ごとに反応が違う、という一点だけを見せる。わらは家から束が飛び散り見出しの文字も飛ぶ。木は家がたわんで傾き屋根が遅れてついてくる。れんがは何も動かず、息のほうが壁で止まる。
ヒーローのタイトル「わら・木・れんが」も同じ三つの挙動を持つ。わらの二文字だけ軽く飛び、木は揺れ、れんがは動かない。
配色は装飾を足さず、素材の色をそのまま文字色と色見本に使う。紙は中性の白で、構造は黒のヘアライン1本。

## Signature Technique
- 風: demos/flow の GPU ナビエ・ストークスを転用。速度場 128×(縦) / スマホ 80、染料 512 / 320、圧力反復 20 / 12、渦度 8、速度減衰 0.9、染料減衰 1.4。カーソル移動量 × 2600 を速度に splat。染料は息の色(#9FB4C2)として紙に重ねる(`mix(paper, breath, (1-exp(-d*1.6))*0.6)`)。
- CPU への受け渡し: 速度場を 96×(縦) の RGBA8 に `v/400*0.5+0.5` で符号化して毎フレーム `readPixels`。`sample(px,py)` が CSS px/秒 の風速を返す。文字・わらの束・木の傾きはすべてこの関数から風を得る。
- れんがの障害物: 家の外接矩形(投影したスクリーン座標)を uv の矩形として渡し、矩形内の速度を 0 にするパスを圧力計算の前に入れる。息は壁で止まり、周りへ流れる。
- 待機時のつむじ風: 2.6 秒ポインタが止まると、画面中央に最も近い区画(無ければヒーローのタイトル)の左端から右へ 0.55 秒の突風を splat し、3.2〜5 秒おきに繰り返す。
- 家: three.js 0.170、1枚の fixed canvas に `setScissor` / `setViewport` で三つのシーンを区画ごとに描く。カメラ fov 30、位置 (2.9, 2.1, 7.6)、注視 (0, 0.85, 0)。RoomEnvironment を PMREM で環境光に、DirectionalLight(2048 shadow map, PCFSoft)で影を落とし、地面は ShadowMaterial 0.16。
- わら: MeshPhysicalMaterial。map = わらテクスチャ、roughness 0.85、anisotropy 0.9(回転 90°)、sheen 0.6。束は InstancedMesh(480 本 / スマホ 260、0.16×0.014×0.014 の箱)で、風の強さ(px/秒 ÷ 区画高さ)が 0.25 を超えると屋根と壁から発生し、各束のスクリーン位置で風をサンプリングして追従、重力 2.2、寿命 2.5〜4.5 秒。家は `Matrix4.makeShear` で x を y に比例してずらし、屋根は別の量で揺れる。
- 木: MeshStandardMaterial。map と bumpMap に板材テクスチャ、roughness 0.6、bumpScale 1.1(屋根と煙突)。壁は1面7枚の重ね張り板(各板の下端を 0.1rad 外へ倒す。板ごとに map を複製してオフセットをずらし、roughness 0.62、bumpScale 0.9、四隅に 0.09 角の柱)。板の上端 24% を頂点カラーで 0.2 まで暗くし、上の板の下に落ちる継ぎ目の影を作る。シャドウマップの影と重なって板の段差が読める。窓は焦げ茶の枠と十字の桟。傾きはバネ減衰(k 0.08、減衰 0.12)で目標 `clamp(wx*0.35, ±0.22)` に追従、屋根は 1.4 倍の目標に遅れて追従(k 0.05)。傾きの速度に比例した 9Hz の微振動を「きしみ」として足す。
- れんが: MeshStandardMaterial。map = れんがテクスチャ、roughness 0.92、normalMap は画像の赤み `(r-(g+b)/2)/110` を高さとして Sobel で生成(れんがが盛り上がり目地が沈む)、normalScale 1.1。動かさない。
- 文字: `.fly` の見出しを 1 文字ずつ span に分け、毎フレーム風速をサンプリング。わら: 速度追従 + 原点へのバネ + 回転(ゲイン属性で強さを変える。ヒーローは 0.3)。木: 回転 ±0.12rad と小さな横ずれだけ。れんが: 変形しない。
- テクスチャは 256px の WebP を data URI で埋め込み(file:// でも WebGL に読める)。

## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #F3F2EE | 紙地。流体キャンバスの地色も同じ |
| --ink | #141412 | 見出し・本文・ヘアライン・CTA 塗り |
| --mute | #6F6C66 | ラベルとキャプションとヒント |
| --straw | #D9AE3F | わら。タイトルの文字色と色見本 |
| --wood | #A86B33 | 木。同上 |
| --brick | #B5432B | れんが。同上と CTA hover |
| --breath | #9FB4C2 | 狼の息(染料)。紙に 60% まで重なる |
| window | #CFE0EA | 家の窓 |
| door | #2A2521 | 家の扉 |
| frame | #3B2C20 | 窓の枠と十字の桟(三軒共通) |
| seam | 頂点カラー ×0.2 | 木の板の継ぎ目の影 |

## Typography
- 全体: Zen Maru Gothic(丸ゴシック)。ポップで可愛い方向に寄せ、セリフは使わない。
- h1: 900、`clamp(56px,9.2vw,138px)`、行間 1.08、字間 .01em。中黒は 500 で --mute。
- h2: 900、`clamp(34px,4.2vw,60px)`、行間 1.25。文字ごとに inline-block。
- 本文: 500、`clamp(15px,1.2vw,18px)`、行間 1.9、最大 26〜34 字。
- ラベル: 700、11px、字間 .16em、欧文は大文字。日本語ラベルは .14em。
- 860px 以下: h1 `clamp(48px,13vw,84px)` で「わら・木 / れんが」の2行に組む(2つ目の中黒を隠して改行)。リードは句点で改行。h2 `clamp(30px,8vw,40px)`。語の途中で折れないよう `.fly{white-space:nowrap}`。

## Spacing & Layout
- ヒーロー: 100svh、左寄せ、余白 `18vh 7vw 10vh`。下に黒ヘアライン。
- 家のセクション: 5fr / 7fr の 2 カラム、100svh。左が文章(余白 `16vh 4vw 10vh 7vw`、右罫線)、右が家の区画(最小 70vh、左下にキャプション)。
- 締め: 72vh、左寄せ。h2 は「どの家に住むかは、/風が吹く前に決める。」と読点で改行を固定。CTA は丸い黒ボタンで内容幅(`align-self:flex-start`)。
- 罫線はすべて 1px #141412。角丸はボタンだけ。
- breakpoint 860px 以下: 1 カラム、家の区画(48vh)が先、文章が後。

## Motion
- RAF 1 本で流体 step → 表示 → 文字 → three.js の順。タブ非表示で停止。
- 風の減衰は速度 0.9 / 染料 1.4 で、息は 2〜3 秒で消える。
- 木の傾きはバネ減衰で 1 秒ほど揺り戻す。わらの束は 2.5〜4.5 秒で落ちて消える。
- `prefers-reduced-motion`: 流体の step を止め(スクロール時だけ再描画)、突風を出さず、束を発生させない。家は傾きゼロの静止で描く。文字は風が無いので動かない。
- WebGL 不可: 両 canvas を隠し、紙地と文章だけを表示。本文末尾に 1 行で案内。

## Components
- header: 固定、左 VALE、右 Fable 009 — Three Little Pigs。`mix-blend-mode: multiply` で息の上でも沈む。
- hero: 日本語ラベル + h1(三色) + 一文 + 操作ヒント(カーソルが動くと消える)。
- house section: 色見本 + 番号ラベル(01 — Straw)+ h2(1 文)+ 本文(1〜2 文)。右に家。キャプション `STRAW / 異方性の質感` 等。
- button: 黒塗り、999px 角丸、`16px 26px`、14px 字間 .12em、右に 22px の罫。hover でれんが色。focus-visible はわら色 3px の outline。
- footer: 左 `VALE / FABLE 009`、右 `Straw, Wood, Brick`。

## Do / Don't
Do
- 色は素材の色だけ。地は中性の白、構造は黒 1 色。
- 1 セクション 1 素材 1 反応。見出しも同じ反応をする。
- 息は淡く。紙の上に 60% までしか重ねない。
- 家は小さめに置き、周りの余白で風の通り道を見せる。
Don't
- クリーム地にセリフとテラコッタを組まない。
- 家の周りに雲や草や太陽などの飾りを足さない。
- れんがを少しでも動かさない。動かないことが意味。
- 文字を増やさない。1 画面に見出し 1 本と 1〜2 文。

## References
- Basha-Franklin: 淡い地に黒ヘアラインで区画を切り、作品(写真)に大きな面を与える構造を抽象化した。プラスター色の地は中性の紙白に、セリフの見出しは丸ゴシックに置き換え、写真の位置に 3D の家を置いた。
- destroytoday.com: 文字先行の「文書のような」ページで、色は意味のある場所(図版と小さな印)だけに置く考え方を抽象化した。青い印は三色の色見本に、図版の「全幅の瞬間」は家のセクションに置き換えた。