# 蝋 — Style Reference
> ベラム紙の上に、押したばかりの深紅の封蝋がひとつ
**Theme:** light **Series:** PARTS 025 **World:** 架空の手紙サービス「Fūin」のトップ。開封できるのは宛先の人だけ、という約束を封蝋ひとつで示す。
## Concept
画面の右に封蝋をひとつ置き、左に見出しを置く。蝋はシェーダーで描き、カーソルの位置に光源が付いてくるので、動かすと縁の盛り上がりと彫りの陰影が変わる。薄い所ほど赤く透ける厚み透過と、柔らかい法線で蝋に見せる。クリックで押し直すと彫りの深さが戻る。
## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。高さ場 → 柔らかい法線 → wrap diffuse + 厚み透過。
- 座標 `q = (px - center) / R`(封蝋の半径 = 1)。
- **外形**: `edge = 0.97 + 0.09·(noise(ca·2.2) − .5) + 0.05·(noise(ca·5.1) − .5)`、`ca = (cos a, sin a)` で周期的に揺らす。`d = |q| − edge`。
- **高さ場 h(q)**:
- ドーム: `t = clamp(−d/0.17)`、`h = (1 − (1−t)^2.2)·0.72`
- はみ出した縁の盛り上がり: `+0.17·exp(−((d+0.11)/0.075)²)`
- 押印面: `r < 0.70–0.77` で `−0.15·press`
- 彫り(リング r=0.60、6弁の花形 `R6 = 0.40 + 0.085·cos 6a` の輪郭帯、中心の点)を `+0.11·relief·press`
- 蝋の微細な凹凸: `+0.014·(fbm(q·9) − .5)`
- **柔らかい法線**: 差分幅 e = 3px(`softness`)で h を3回評価し、`N = normalize(−∇h·0.13, 1)`。差分幅を広く取ることで角が丸く、蝋らしく見える。
- **光**: `L = normalize(uL, 0.9)`。uL はカーソル位置(封蝋座標系、長さ 1.6 で制限)に 8%/フレームで追従。カーソルが無いときは楕円軌道で自走。
- **陰影**: wrap diffuse `clamp((N·L + 0.45)/1.45)` で `waxDeep → wax` を補間。
- **厚み透過(サブサーフェスの近似)**: `thin = (1 − clamp(h/0.62))^2.2`、`back = 0.55 + 0.45·clamp(−N.xy·L.xy·2)` で、薄く光の反対側にある縁ほど `glow`(#ff6b42 相当)へ寄せる。彫りの縁にも `0.18·relief·(1−wrap)` 分の透けを足す。
- **ハイライト**: `pow(N·H, 26)·0.42 + pow(N·H, 120)·0.25`、縁のフレネル `pow(1 − N·V, 3)·0.18`。
- **溝の遮蔽**: `×(1 − 0.25·relief·(1−wrap))`。
- **紙**: #f6f6f4 に2段の値ノイズで粒を足す。影は光と反対側に `q + L.xy·0.07` ずらした円の外側 0.22 の減光、接地部に 0.12 の減光。
- 被覆は `1 − smoothstep(−aa, aa, d)`、aa = 1.2px。最後に `pow(col, 1/1.05)`。
```glsl
float t=clamp(-d/.17,0.,1.); float h=(1.-pow(1.-t,2.2))*.72;
h+=.17*exp(-pow((d+.11)/.075,2.)); // 縁の盛り上がり
h-=.15*stamp*uPress; h+=.11*relief*uPress; // 押印面と彫り
vec3 N=normalize(vec3(-(hx-h)/e*S,-(hy-h)/e*S,1.));
float thin=pow(1.-clamp(h/.62,0.,1.),2.2);
col=mix(mix(waxDeep,wax,wrap),glow,thin*back*.85);
```
## Color Palette
| Token | HEX | Role |
|---|---|---|
| --vellum | #f6f6f4 | 紙。シェーダー側も同じ値に粒を足して描く |
| --ink | #141412 | 見出し、ヘッダーの製品名、クレジット |
| --lichen | #6d6e5e | 本文 |
| --sage | #979886 | ヘッダー補助とメタ情報と操作説明の灰緑 |
| --marker | #f7e36b | 見出しの1語に引く蛍光マーカー。画面で唯一の黄 |
| wax (shader) | #8f1a2c | 蝋の中間色。暗部 #4d0814、透過光 #ff6b42 |
| --carbon | #2c2c26 | 予備の濃色(現状未使用) |
| --ash | #d0d0c8 | 予備の罫線色(現状未使用) |
## Typography
- 日本語見出し: Noto Serif JP 600、`clamp(27px, 3.1vw, 46px)`、line-height 1.35、`word-break: keep-all` と `
` で行を制御。
- 見出しのマーカー: `` に `linear-gradient(transparent 58%, var(--marker) 58% 92%, transparent 92%)`。
- 本文: Noto Sans JP 400、`clamp(13px, 1.05vw, 15px)`、最大幅 28em。
- ラベル: JetBrains Mono 400、11–12px、letter-spacing 0.06em。
- Instrument Serif は欧文見出し用に読み込んでいる(差し替え時に使う)。
## Spacing & Layout
- hero `min-height: 100svh`、3行グリッド。中央行は `grid-template-columns: minmax(0, 34em) 1fr`。
- 封蝋: 中心 (72%, 50%)、半径 `min(W, H)·0.26`。モバイルは中心 (50%, 36%)、半径 0.36 で、文字は下に積む。
- 余白: 横 `clamp(20px, 5vw, 72px)`、上 `clamp(20px, 3vw, 40px)`、下 `clamp(18px, 2.6vw, 32px)`。見出しと本文の間 18px(モバイル 12px)。モバイル左右 18px、文字ブロックの下に 4vh。
- breakpoint 760px: ヘッダー右とメタ情報を消し、フッターを縦積み。
## Motion
- 光はカーソルへ 8%/フレームで追従。カーソル無し・タッチ端末では周期約27秒 / 37秒の楕円で自走。
- 押印: 0→1 を 0.9秒(ease-in-out quad)。開始時刻を `pressT = −0.5`(ページ時刻0の0.5秒前)に置くので、読み込み直後は途中から始まり約0.4秒で押し終わる。クリック/タップで `press − 0.75` から 1 へ再び。左下の `relief depth` に現在値を表示。
- rAF 1本。IntersectionObserver と visibilitychange で画面外停止。
- `prefers-reduced-motion: reduce`: 押印済み・固定光で1フレームだけ描く。カーソル移動時のみ再描画。
## Components
- hero: 背面 canvas(`aria-hidden`)+前面テキスト。
- header: 左に製品名、右に技法名。
- copy: 見出し2行(1語にマーカー)+本文2文。
- meta: 左下に蝋の品番と彫り深さ。
- footer tag: `VALE / PARTS 025 / 蝋` と操作説明1行(タッチ端末では差し替え)。
- fallback: WebGL 不可時は CSS の radial-gradient の円(`min(56vw, 420px)`、#c23a4a → #8f1a2c → #5a0d1a)。
## Do / Don't
- Do: 封蝋は1つ。紙の余白を広く残す。
- Do: 光は画面の上側から当てる範囲にとどめる(ty > 0.2)。下から当てると彫りが反転して見える。
- Do: 法線の差分幅は 2.5–4px。狭いと硬く、広いと溶けて見える。
- Don't: 蝋に文字や実在の紋章を彫らない。
- Don't: 紙にグラデーションや罫線を敷かない。粒だけでよい。
- Don't: 蝋の色を2色以上にしない。
## References
- Visual: 温かいベラム紙、セリフの見出し、モノスペースの欄外注記、蛍光マーカー1本という構成を借りた。ポスター的な欧文セリフの代わりに日本語明朝を主役にし、マーカーは1語だけに絞った。
- Artboard: 白い紙と黒いインクの上に、強い色を1点だけ置く考え方を借りた。電気的な緑の代わりに、深紅の蝋そのものを唯一の色にした。
## Usage
1. `