# 二色化 — Style Reference
> 白い面に写真が1枚。斜めの境界の左は白黒の元写真、右は紫と砂色の2色刷り。境界がゆっくり左右に動く。

**Theme:** light  **Series:** PARTS 092  **World:** 写真を2色のインクで刷るリソグラフの工房。

## Concept
画像パネルの効果。主役は輝度を2色の間の色に置き換えるシェーダーで、暗部が紫、明部が砂色になる。
境界をカーソルで動かして元の写真と見比べられる。触らなければ 50% の位置を数秒見せてから自動で往復する。
背景は純白、文字は黒。色は紫1つ(CTA と暗部)と砂色だけ。

## Signature Technique
WebGL1 フラグメントシェーダー。canvas はパネルの大きさだけ。画像は `assets/photo.webp`(1600×900、白黒)。

- 輝度: `l = dot(rgb, (.299, .587, .114))`。
- レベル: `l = clamp((l - BLACK)/(WHITE - BLACK))`、`pow(l, GAMMA)`(BLACK .06、WHITE .92、GAMMA 1.15)。
- インクの粒: `hash(floor(fc*.5) + fract(t*.1)) - .5` を `GRAIN(.035) * (1 - |2l-1|)` で中間調にだけ足す。
- 2色: `duo = mix(SHADOW, LIGHT, l) * .985`。SHADOW #2B146B、LIGHT #F2DCC0。
- 境界: `x = p + (uv.y - .5)*ANGLE`(ANGLE .12 の傾き)、`m = smoothstep(x-EDGE, x+EDGE, uv.x)`(EDGE .012)。`col = mix(src, duo, m)`。境界の上に白 85% の細い線。
- cover: 画像比とパネル比から `uCover` を作り、短い側を切る。
- 進み: カーソルの横位置へ lerp(.09)。無操作時は 3 秒後から `.5 + .42*sin(phase)`(周期 12 秒)。
- 解像度: `min(dpr, 2)`。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --paper | #FFFFFF | 背景 |
| --linen | #F6F5F9 | パネルの地(読み込み前) |
| --ink | #101114 | 見出し・ロゴ・タグ文字 |
| lead | #3C3D44 | 本文 |
| --steel | #6E6F76 | eyebrow・フッター |
| --violet | #4B22C9 | CTA |
| violet-hover | #3A17A6 | CTA hover |
| SHADOW | #2B146B | 2色刷りの暗部 |
| LIGHT(--sand) | #F2DCC0 | 2色刷りの明部 |
| tag-bg | rgba(255,255,255,.82) | ORIGINAL / DUOTONE のタグ |

## Typography
- 見出し: Noto Sans JP 700、`clamp(32px, 4.2vw, 60px)`、line-height 1.2、letter-spacing -.02em、中央揃え。mobile `clamp(28px, 7.6vw, 38px)`。
- 本文: Noto Sans JP 400、`clamp(14px, 1.1vw, 16px)`、line-height 1.9、最大 30em(mobile 24em)。2 文はそれぞれ `display: inline-block` の span に入れ、文の途中で折り返さない。
- eyebrow / ロゴ / タグ / フッター: Inter。eyebrow 500 / 12px / .24em、ロゴ 700 / 12px / .22em、タグ 11px / .18em(mobile 10px)。
- CTA: Noto Sans JP 700 / 13px / .08em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。中段は縦3段(文章 / パネル / CTA)、gap 26px、中央揃え。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 26px、下 22px(+safe-area)。
- eyebrow → h1 18px、h1 → lead 14px。
- パネル: 幅 `min(100%, 860px, (100svh - 430px)*2)`、`aspect-ratio 2/1`、角丸 8px。画面が低いときは幅が縮んで footer を押し出さない。mobile は 4:3、幅 100%。
- タグ: 左下に ORIGINAL、右下に色の丸2つ + DUOTONE。

## Motion
- 境界 lerp .09(無操作時 .054)。自動往復は 3 秒後から周期 12 秒、振幅 ±.42。
- 粒は `t*.1` で揺れ、刷りのムラに見える。
- 1 rAF、`visibilitychange` と IntersectionObserver(パネル)で停止。
- `prefers-reduced-motion`: 自動往復なし。50% で静止し、カーソルを動かした時だけ追従。
- WebGL 非対応・画像失敗: `.panel.nogl` で `<img>` を出し、右半分に CSS の `mix-blend-mode: multiply` のグラデーションを重ねる。

## Components
- hero: 全画面。上に工房名と業種、中央に eyebrow / h1 / lead → パネル → CTA の順。
- panel(.panel): canvas + 予備の img + タグ2つ。`cursor: col-resize`。
- button(.cta): 高さ44px の pill。紫地に白文字。hover で濃い紫になり1px浮く。focus-visible は黒のリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 092 / 二色化`。

## Do / Don't
- Do: 元写真は白黒か色の少ないもの。境界の左右で「色が足された」ことが伝わる。
- Do: SHADOW は十分暗く(輝度 .2 以下)。明るい紫だと塗り絵に見える。
- Do: 境界は少し傾ける。垂直だと UI のスライダーに見える。
- Don't: 3色目を足さない。duotone の意味が消える。
- Don't: GRAIN を .08 以上にしない。写真が荒れる。
- Don't: 境界を往復させる振幅を 1 にしない。両端で効果が見えない時間ができる。

## References
- Kraken: 白い面に紫1色という配分を抽象化。紫を CTA と暗部の2か所に限った。
- Bōjka Studio: 白黒の骨格に1色の帯を入れる構成を抽象化。蛍光色は使わず、帯の役を写真の右半分にした。

## Usage
1. `.panel` ブロック(canvas / img / tags)と `<script>`、`.panel` `.tags` の CSS を切り出す。外部ライブラリは不要。
2. `<img src>` と alt を差し替える。色付き写真でも動くが、白黒の方が左右の差が出る。
3. パラメータは JS 冒頭の `P`:
   - `DPR` 描画解像度
   - `SHADOW` / `LIGHT` 2色(0〜1 の RGB)
   - `BLACK` / `WHITE` / `GAMMA` 輝度のレベル
   - `GRAIN` 粒(.035)、`EDGE` 境界のにじみ(.012)、`ANGLE` 境界の傾き(.12)
   - `IDLE_PERIOD` / `IDLE_DELAY` 自動往復、`FOLLOW` 追従、`START` 初期位置
4. 境界なしで全面を2色にするなら `START:1`、`IDLE_PERIOD` を大きくするか `st.hover=true` に固定する。
5. 色の組を切り替える UI を足すなら `gl.uniform3fv(U('uShadow'), ...)` を呼ぶだけでよい。タグの丸の色も合わせて変える。