# 陶器 — Style Reference
> 冷たい白の作業台に、青磁の壺がひとつ。釉のたまりと貫入まで見える
**Theme:** light **Series:** PARTS 029 **World:** 架空の陶房「Kama」のトップ。釉薬が窯の中で流れて溜まる、という工程を壺ひとつで示す。
## Concept
白い画面の右に壺を置き、左に見出しを置く。壺は SDF をレイマーチして描き、釉薬はクリアコートの反射、くぼみに溜まって深くなる色、冷却で入る貫入(細いひびの網)の3層で表現する。カーソルの位置に光源が付いてくるので、動かすと釉の照りと影が変わる。壺はゆっくり自転し、ドラッグで回せる。色は白・黒・青磁の緑と、小さな酸緑の点だけ。
## Signature Technique
全画面1枚のフラグメントシェーダー(WebGL1)。SDF レイマーチ + AO ベースの釉だまり + 3D ボロノイの貫入 + クリアコート。
- **形(SDF)**: 胴 = 楕円体 (0.90, 1.10, 0.90) 中心 y=−0.15、首 = カプセル高さ 0.75 半径 0.30、口縁 = トーラス (0.34, 0.075) y=1.32、高台 = 角丸円柱 高さ 0.12 半径 0.40 y=−1.36。`smin` k = 0.28 / 0.08 / 0.06 で結合。
- **レイマーチ**: カメラ (0, 0.25, 8.5)、`rd = normalize(uv, −2.1)`。包含球(半径 √2.9)との交差で早期終了し、球内だけ最大 72 歩(モバイル 56)。歩幅は d×0.9。
- **法線・AO・影**: 中心差分 0.0015。AO は法線方向 4 サンプル(0.06 刻み)。床と壺の影はソフトシャドウ(24 歩、k=10)。
- **釉だまり**: `thick = 0.45 + (1 − AO)·1.6 + fbm(角度·1.3, y·2.2)·0.9 + 口縁 0.5`。`thin (#dbe8db) → mid (#8cb8a1) → deep (#38706b)` を thick 0→1→2 で補間。鉄分の斑点は noise のしきい値で −0.11。
- **貫入**: 物体座標 ×15 の 3D ボロノイで `F2 − F1 < 0.04` を線とし、釉が厚い所ほど濃く(`×clamp(thick − 0.2, 0.2, 1)`)、色を 62% に落とす。コートの反射も線上で 35% 減らす。
- **光**: `L = normalize(uL, 0.9)`。uL はカーソル位置を画面比で x ∈ ±1.2、y ∈ −0.5…1.5 に写した値。
- **陰影**: `glaze·(0.35 + 0.65·wrap·shadow)·(0.6 + 0.4·AO)`、wrap = `(N·L + 0.35)/1.35`。
- **クリアコート**: Schlick `F = 0.04 + 0.96(1 − N·V)^5` × 環境 `env(R)`(上が明るい白、窓のハイライト、副光源)+ `pow(N·H, 180)·0.9` の鋭い点 + `pow(N·H, 24)·0.05` の広い照り。
- **床**: y = −1.52 の面。壺の影(ソフトシャドウ 22%、中心から距離 1–3.5 で薄れる)と接地影(12%、距離 0.5–1.6)だけを落とす。
- 背景は #f4f5f4 から `0.03·|uv|` のビネットとハッシュの粒 ±0.005。最後に `pow(col, 1/1.05)`。
```glsl
float d=smin(body,neck,.28); d=smin(d,lip,.08); d=smin(d,foot,.06);
float thick=.45+(1.-ao)*1.6+fbm(vec2(atan(q.z,q.x)*1.3,q.y*2.2))*.9;
vec3 glaze=mix(mix(thin,mid,clamp(thick,0.,1.)),deep,clamp(thick-1.,0.,1.));
float crack=(1.-smoothstep(0.,.04,craze(q*15.)))*uCraze*clamp(thick-.2,.2,1.);
vec3 coat=env(reflect(rd,n))*F*uCoat+pow(nh,180.)*.9*sh*uCoat;
```
## Color Palette
| Token | HEX | Role |
|---|---|---|
| --paper | #f4f5f4 | 地。シェーダーの背景は #f4f5f4 にわずかなビネット |
| --ink | #0c0c0c | 見出し、工房名、クレジット |
| --slate | #404040 | 本文 |
| --silver | #9a9a9a | ヘッダー補助とメタ情報と操作説明の灰色 |
| --acid | #b7e600 | メタ情報の 8px の点。画面で唯一の強い色 |
| glaze thin / mid / deep | #dbe8db / #8cb8a1 / #38706b | 釉の薄い所から中間を経てたまりまでの3段階 |
| --bone | #e5e7eb | 予備の罫線色 |
## Typography
- 日本語見出し: Noto Sans JP 500、`clamp(24px, 2.6vw, 38px)`、line-height 1.45、`word-break: keep-all`(モバイルは normal、21px から)。
- 本文: Noto Sans JP 300、`clamp(13px, 1.05vw, 15px)`、最大幅 27em。2文を `
` で分ける。見出しとの間 16px(モバイル 10px)。
- ラベル: JetBrains Mono 400、11–12px、letter-spacing 0.06em。
## Spacing & Layout
- hero `min-height: 100svh`、3行グリッド。中央行は `minmax(0, 30em) 1fr`。
- 壺は画面中心から横に +22% 幅、縦に +3% 高さの位置、スケール 0.92。モバイルは中央、上に 10%、スケール 0.78。
- 余白: 横 `clamp(20px, 5vw, 72px)`、上 `clamp(20px, 3vw, 40px)`、下 `clamp(18px, 2.6vw, 32px)`。モバイル左右 18px、文字ブロックの下に 3vh。
- breakpoint 760px: ヘッダー右とメタ情報を消し、フッターを縦積み。
## Motion
- 自転 0.12 rad/s(dt は 0.05 秒で上限)。ドラッグは横移動 1px = 0.008 rad で回し、離すと `rotV = dx·0.25` rad/s の慣性を足して毎フレーム 0.94 倍で減らす。左下に現在の角度。
- 光はカーソルへ 7%/フレームで追従。カーソル無し・タッチ端末では `(−0.6 + 0.5 sin 0.19t, 0.7 + 0.25 cos 0.23t)` の楕円(周期約33秒 / 27秒)で自走。
- rAF 1本。IntersectionObserver と visibilitychange で画面外停止。
- `prefers-reduced-motion: reduce`: 自転を止め、角度 0.4 rad・固定光で1フレームだけ描く。ドラッグとカーソル移動のときだけ再描画。
## Components
- hero: 背面 canvas(`aria-hidden`)+前面テキスト。WebGL 不可時は CSS の角丸グラデーションの壺型(`min(40vw, 260px)` × `min(60vw, 400px)`)。
- header: 左に工房名、右に技法名。
- copy: 見出し2行+本文2文。
- meta: 左下に焼成温度と釉の名前、回転角。
- footer tag: `VALE / PARTS 029 / 陶器` と操作説明1行(タッチ端末では差し替え)。
## Do / Don't
- Do: 壺は1つ。床は影以外描かない。
- Do: 釉の色は3段階の補間で出す。単色にすると樹脂に見える。
- Do: 貫入は釉が厚い所に集める。全面に均一だと網目模様に見える。
- Don't: 壺に文様や文字を描かない。
- Don't: 反射の環境に色を入れない。白い部屋の反射でよい。
- Don't: 自転を速くしない(0.2 rad/s 以下)。
## References
- Craftwork: 紙のように明るい作業場に、強い色を1点(酸緑のランプ)だけ置く構成を借りた。ランプを 8px の点に縮め、色の主役は青磁の釉にした。
- Runway: 冷たい白と無彩色だけの研究室の空気と、モノスペースの小さなラベルを借りた。写真の代わりにレイマーチの壺を置いた。
## Usage
1. `