# 網点 — Style Reference
> 生成りの紙色の面に、網点で刷ったコートの写真が1枚。点の粗さがカーソルで変わり、細かいと写真、粗いと新聞になる。

**Theme:** light  **Series:** PARTS 093  **World:** 新聞紙に刷る季刊のファッション誌。

## Concept
画像パネルの効果。主役は印刷の網点を再現するシェーダーで、45度に回した格子のセルごとに輝度を点の半径に変える。
カーソルの横位置で点の間隔が 3px から 16px まで変わる。触らなければ 50%(中くらいの粗さ)を数秒見せてから自動で往復する。
色はインクの黒と紙の生成りだけ。CTA に薄い紫を1つ。

## Signature Technique
WebGL1 フラグメントシェーダー。canvas はパネルの大きさだけ。画像は `assets/photo.webp`(1200×1600、3:4 のモノクロ)。

- 格子: ピクセル座標 `px`(左上原点)を `ANGLE`(45度)回し、`q = R*px / PITCH`、セル `cell = floor(q) + .5`、セル中心を逆回転してピクセルへ戻す。
- 輝度: セル中心と上下左右(PITCH×.25)の5点平均。`l = pow(clamp((l-BLACK)/(WHITE-BLACK)), GAMMA)`(BLACK .02、WHITE .70、GAMMA .72。暗い写真なので持ち上げる)。
- 点: 覆い率 `cov = (1-l)*GAIN`(GAIN .92)、半径 `r = sqrt(cov)*.5*1.128`(面積が覆い率に比例。1.128 ≈ 2/√π で 100% のとき正方セルを埋める)。`dot = 1 - smoothstep(r-aa, r+aa, |q-cell|)`、`aa = .9/PITCH`(1px のぼかし)。
- 隣接: 右(左)隣と上(下)隣のセルの点も計算し `max` で合成。濃い所で点がつながる。
- 色: `mix(PAPER, INK, dot)`。PAPER #FAF9F5 相当、INK #0D0D0D。
- 間隔: `PITCH = (PITCH_MIN + (PITCH_MAX - PITCH_MIN)*p²) * DPR`(3〜16px。二乗で細かい側を長く)。
- 進み: カーソルの横位置へ lerp(.09)。無操作時は 3 秒後から `.5 + .45*sin(phase)`(周期 12 秒)。
- 解像度: `min(dpr, 2)`。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --cream(PAPER) | #FAF9F5 | 背景・紙 |
| INK | #0D0D0D | 網点のインク |
| --ink | #000000 | 見出し・ロゴ・タグ |
| lead | #3A3935 | 本文 |
| --smoke | #7A7873 | eyebrow・フッター |
| --orchid | #B074CE | CTA |
| orchid-hover | #9A5CB9 | CTA hover |
| --rule | #E3E0D8 | パネルの枠線 |

## Typography
- 見出し: Noto Serif JP 500、`clamp(30px, 3.6vw, 52px)`、line-height 1.35、letter-spacing .02em、左揃え2行。mobile `clamp(24px, 6.4vw, 32px)`。
- 本文: Zen Kaku Gothic New 400、`clamp(14px, 1.1vw, 16px)`、line-height 1.95、最大 24em。`word-break: auto-phrase` と `text-wrap: pretty` で文節の途中で折り返さない。
- eyebrow / ロゴ / タグ / フッター: Inter。eyebrow 500 / 12px / .24em、ロゴ 700 / 12px / .22em、タグ 11px / .18em。
- CTA: Zen Kaku Gothic New 500 / 13px / .1em。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。中段は `7fr 5fr`(左に写真、右に文字)、gap `clamp(28px, 5vw, 80px)`、縦中央。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 26px、下 22px(+safe-area)。
- eyebrow → h1 20px、h1 → lead 18px、lead → CTA 28px。
- パネル: `aspect-ratio 3/4`、幅 `min(100%, (100svh - 190px)*.75)`、右寄せ、1px の枠線。タグは左下 FINE、右下 COARSE。
- breakpoint 760px: 1列、パネルが先(幅 `(100svh - 400px)*.75`)、文字は下。

## Motion
- 間隔の lerp .09(無操作時 .054)。自動往復は 3 秒後から周期 12 秒、振幅 ±.45。
- 1 rAF、`visibilitychange` と IntersectionObserver(パネル)で停止。
- `prefers-reduced-motion`: 自動往復なし。50% で静止し、カーソルを動かした時だけ追従。
- WebGL 非対応・画像失敗: `.panel.nogl` で `<img>` を `grayscale(1) contrast(1.2)` で出す。

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

## Do / Don't
- Do: 元写真はコントラストの高いモノクロ。網点の濃淡が出る。
- Do: 暗い写真は WHITE を下げて持ち上げる。網点は中間調で見せるもの。
- Do: 格子は 45 度。0 度だと画面のピクセルと干渉して縞が出る。
- Don't: PITCH_MIN を 2px 以下にしない。点がつぶれてグレーになる。
- Don't: インクに色を付けない。2色以上なら別パーツ(二色化)の仕事。
- Don't: 紙を純白にしない。生成りの方が刷り物に見える。

## References
- Equals: 生成りの紙色(#FAF9F5)に黒い文字、CTA だけ紫という配分を抽象化。黄色の帯は使わなかった。
- WGSN: 白い面に写真を大きく置く編集的な構成を抽象化。写真を網点に変え、文字を明朝にした。

## Usage
1. `.panel` ブロック(canvas / img / cap)と `<script>`、`.panel` `.cap` の CSS を切り出す。外部ライブラリは不要。
2. `<img src>` と alt を差し替える。縦横比は CSS の `aspect-ratio` を画像に合わせる。
3. パラメータは JS 冒頭の `P`:
   - `DPR` 描画解像度
   - `PITCH_MIN` / `PITCH_MAX` 点の間隔(3〜16px)
   - `ANGLE` 網の角度(45)、`GAIN` 点の太り(.92)
   - `BLACK` / `WHITE` / `GAMMA` 輝度のレベル
   - `INK` / `PAPER` 色
   - `IDLE_PERIOD` / `IDLE_DELAY` 自動往復、`FOLLOW` 追従、`START` 初期の進み
4. 粗さを固定するなら `START` を決めて `IDLE_PERIOD` を大きくし、pointermove のリスナーを外す。
5. CMYK 風にするなら program を4つ作り、角度 15 / 75 / 0 / 45 でシアン・マゼンタ・黄・黒を `multiply` 合成する(別パーツに向く)。