# 金箔 — Style Reference
> 消灯した工房の黒の中に、箔を貼った円盤がひとつ。継ぎ目と割れから赤土がのぞく
**Theme:** dark **Series:** PARTS 028 **World:** 架空の箔押し工房「Haku」のトップ。箔の薄さと、貼った跡を残す仕上げを、円盤ひとつで見せる。
## Concept
黒い画面の右に、金箔を貼った円盤を置く。箔は 1 枚ごとの正方形で、わずかに傾いた格子に沿って継ぎ目が走り、重なった所は二重で明るく、隙間と割れからは下地の赤土(ボーレ)が見える。金の色はフレネルと環境反射から出す。カーソルの位置に光源があり、しわの法線で箔が光る場所が変わる。クリックで乱数の種を替えて貼り直す。
## Signature Technique
全画面1枚のフラグメントシェーダー(WebGL1)。金属反射 + 継ぎ目マスク + 剥がれマスク + しわ法線。
- **円盤**: `dd = |px − C| − R`。縁は `dd + leaf·0.18·(noise(px·0.07) − .5)·2` で箔のはみ出しを作る。
- **箔の格子**: 座標を 0.105 rad 回して `g = px / leaf`(leaf = 104px、モバイル 64px)。`cell`、`f` と、箔ごとの乱数 h1, h2, h3。
- **継ぎ目**: 近い辺までの距離 `e`(px)。隙間(`gap`)の幅は全辺 0.25px、辺ごとの乱数で 30% の辺だけ 1.25px にし、`1 − smoothstep(w/2, w/2 + 0.9, e)` でぼかす。辺から 1.5–6.5px は `overlap = (1 − smoothstep(1.5, 6.5, e))·0.5` とし、`gold ×= 1 + 0.35·overlap`(最大 +17.5%)で重なりを明るくする。隙間は 30% 暗くする。
- **剥がれ**: `n = fbm(px·0.03 + cell·0.37)`、しきい値 `thr = 0.80 − 0.22·tear − 0.20·edgeF·(0.4 + 0.6·tear) − 0.10·h3·tear`。`edgeF` は円盤の縁から 22% の帯で 1。`torn = smoothstep(thr, thr + .035, n)`、めくれた縁 `tearEdge = smoothstep(thr − .06, thr, n)·(1 − torn)` に `F0·0.5` を足す。
- **しわ法線**: `h = (fbm(px·0.04 + cell·1.9) − .5)·amp + (fbm(px·0.01 + cell·0.7) − .5)·0.9`、amp = 0.9·(0.5 + 0.9·h1)。1.5px の差分から `N = normalize(−∇h·3.2 − tilt, 1)`、tilt は箔ごとの傾き ±0.05。
- **金の反射**: `F0 = (1.0, 0.78, 0.38)`、Schlick `F = F0 + (1 − F0)(1 − N·V)^5`。環境 `env(R)` は上が明るい暖色のグラデーション + 窓の光 + 床の照り返し + 細い筋。`gold = F·env(R)·(1 + 0.2·h1)·(0.75 + 0.5·att) + F·(N·H)^(160→40 by roughness)·(1.4 − rough)·att + F0·0.08·N·L`。
- **ボーレ**: `(0.30, 0.12, 0.07)·(0.45 + 0.55·N·L·att·2) + (0.02, 0.01, 0.005)`。つや消し。
- **光源**: `Lp = (cursor, 0.6·W)`、減衰 `att = 1/(1 + 2.5·(dist/W)²)`。粗さは箔ごとに `rough = 0.35 + 0.4·h2`。
- 背景は #0f0f11 に中心からの距離で最大 25% 落とすビネット、円盤の外 R/2 までに金の照り返し `(0.06, 0.045, 0.02)·0.6` を足す。ハッシュの粒 ±0.004。最後に `pow(col, 1/1.1)`。
```glsl
float n=fbm(px*.03+cell*.37);
float thr=.80-.22*uTear-.20*edgeF*(.4+.6*uTear)-.10*h3*uTear;
float torn=smoothstep(thr,thr+.035,n);
vec3 F=F0+(1.-F0)*pow(1.-nv,5.);
vec3 gold=F*env(reflect(-V,N))*(1.+.2*h1)*(.75+.5*att)+spec;
col=mix(bole,gold,(1.-torn)*(1.-gap));
```
## Color Palette
| Token | HEX | Role |
|---|---|---|
| --studio | #0f0f11 | 地。シェーダーの背景も同じ値 |
| --anvil | #17171a | 予備の面 |
| --cream | #f7f4ef | 見出し、工房名、クレジット |
| --smoke | #b9b7b3 | 本文 |
| --ash | #7d7b77 | ヘッダー補助とメタ情報と操作説明の灰色 |
| --gold | #d9b25a | メタ情報の1語だけ。円盤の金は計算値 |
| F0 (shader) | #ffc761 相当 | 金の反射率。環境との積で #f3d98a〜#6b4a12 に広がる |
| bole (shader) | #4d1f12 相当 | 下地の赤土 |
## Typography
- 日本語見出し: Noto Serif JP 500、`clamp(22px, 2.6vw, 40px)`、line-height 1.45、letter-spacing 0.02em、`word-break: keep-all`(モバイルは normal)。
- 本文: Noto Sans JP 300、`clamp(13px, 1.05vw, 15px)`、最大幅 26em。2文を `
` で分ける。見出しとの間 18px(モバイル 12px)。
- ラベル: JetBrains Mono 400、11–12px、letter-spacing 0.06em。
## Spacing & Layout
- hero `min-height: 100svh`、3行グリッド。中央行は `minmax(0, 30em) 1fr`。
- 円盤: 中心 (72%, 50%)、半径 `min(W, H)·0.36`。モバイルは中心 (50%, 36%)、半径 0.42、文字は下。
- 余白: 横 `clamp(20px, 5vw, 72px)`、上 `clamp(20px, 3vw, 40px)`、下 `clamp(18px, 2.6vw, 32px)`。モバイル左右 18px、文字ブロックの下に 3vh。
- 1440px 幅で見出しの句点と円盤の縁の間に 40px 以上空ける。見出しを大きくするときは円盤の中心を右へずらす。
- breakpoint 760px: ヘッダー右とメタ情報を消し、フッターを縦積み。
## Motion
- 光源はカーソルへ 7%/フレームで追従。カーソル無し・タッチ端末では円盤中心より 0.3R 上を中心に、横 ±0.9R・縦 ±0.8R の楕円を周期約30秒 / 39秒で回る。
- 貼り直し(クリック/タップ): 乱数の種を替え、剥がれ量を 5% から既定の 25% へ 5%/フレームで戻す。左下の `tears` に現在値。
- rAF 1本。IntersectionObserver と visibilitychange で画面外停止。
- `prefers-reduced-motion: reduce`: 光源を円盤の左上(中心から −0.5R, +0.6R)に固定して1フレームだけ描く。カーソル移動と貼り直しのときだけ再描画。
## Components
- hero: 背面 canvas(`aria-hidden`)+前面テキスト。WebGL 不可時は CSS の radial-gradient の円。
- header: 左に工房名、右に技法名。
- copy: 見出し2行+本文2文。
- meta: 左下に箔の寸法と下地と剥がれ率。
- footer tag: `VALE / PARTS 028 / 金箔` と操作説明1行(タッチ端末では差し替え)。
## Do / Don't
- Do: 剥がれは 15–35%。多いと焦げた面に見える。
- Do: 金は F0 と環境反射の積で出す。固定の黄色で塗らない。
- Do: 継ぎ目の格子はわずかに傾ける。真っ直ぐだとタイルに見える。
- Don't: 円盤を複数置かない。
- Don't: 金以外の色を足さない。赤土は下地として見える分だけ。
- Don't: しわを強くしすぎない(法線の係数 3 前後)。強いとアルミ箔に見える。
## References
- Suno: 消灯したスタジオの黒とクリーム色の文字、暖色の残光という空気を借りた。コーラルの点は置かず、暖色は金の反射に集約した。
- Atlas Card: 純黒の空間に深い色をひとつだけ置く構成を借りた。サファイアの光を金の円盤に置き換え、それ以外を無彩色にした。
## Usage
1. `