# メッシュグラデーション — Style Reference
> 紙のような白地の右半分に、珊瑚・藤・空の色がにじんで漂う。左に墨色の大見出し。
**Theme:** light **Series:** PARTS 004 **World:** 今日使える額だけを見せる家計アプリ。朝の明るい画面。
## Concept
ヒーロー背景の1パーツ。主役は制御点のガウス混合を全画面シェーダーで描いたメッシュグラデーション。点は時間でゆっくり漂い、カーソルや指に最も近い点だけが寄ってくる。
色は右上〜右下に寄せ、左側に白を残して見出しを置く。見出しは墨色の太いサンセリフ、ラベルは等幅、CTA は紫1つ。
## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。点の位置は JS で毎フレーム計算して uniform 配列で渡す。
- 制御点: desktop 7個 / mobile 6個。各点は `{x, y, r, c}`(x,y は画面比、r はにじみ半径(画面高さ比)、c は sRGB)。
- 襞: 重みを取る前に座標をゆがめる。`w = (sin(p.y*3.1 + t*.9 + sin(p.x*2.3 - t*.5)*1.4), cos(p.x*2.6 - t*.7 + sin(p.y*1.9 + t*.4)*1.2))`、`p += w·WARP`(WARP 0.14)。円いにじみが布のように流れる形になる。稜線には `cover·.09·pow(.5+.5w.x, 8)` の白をごく弱く足す。
- 重み: `w_i = exp(-|p - c_i|² / r_i²)`(p は aspect 補正した座標、r_i は点の r × RADIUS。RADIUS は desktop 0.78 / mobile 0.85)。
- 混合: `mix = Σ lin(c_i)·w_i / Σ w_i`(リニア光で混ぜ、最後に 1/2.2 で戻す。混色が濁らない)。
- 紙との合成: `cover = 1 - exp(-Σw · COVER)`、`col = mix(lin(PAPER), mix, cover)`。COVER 1.25。
- 漂い: `x = x0 + DRIFT·sin(t(.7+.13i) + 1.9i)/aspect`、`y = y0 + DRIFT·cos(t(.5+.11i) + 2.7i)`。DRIFT 0.16。
- カーソル: 毎フレーム最も近い点を探し、`pos += (mouse - pos)·PULL·f`(PULL 0.22、f はホバー強度の lerp 0.04)。
- 粒子: 1.5/255 のディザでバンディングを消す。
- 解像度: desktop `min(devicePixelRatio,1.25)`、mobile 0.5 倍。にじみ主体なので低くてよい。
## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --paper | #FBFAF8 | 紙・html背景・シェーダーの地 |
| coral | #FFAB78 | 制御点1(右上) |
| wisteria | #9985FF | 制御点2(右) |
| lilac | #C7BDFF | 制御点3(上端中央)。暖色と寒色の間をつなぐ薄紫 |
| sky | #78D1EB | 制御点4(右下寄り) |
| apricot | #FFCC85 | 制御点5(右下隅) |
| orchid | #EDB3F5 | 制御点6(下端中央) |
| rose | #FF949E | 制御点7(中央、desktopのみ) |
| --ink | #0B0C10 | 見出し・本文強調・ghost リンク |
| --iris | #5B4BD6 | CTA・eyebrow |
| --mute | #6B6E78 | ラベル・フッター |
## Typography
- 見出し: Zen Kaku Gothic New 700、`clamp(40px, 6.8vw, 96px)`、line-height 1.1、letter-spacing -.03em、`
` で2行固定。
- 本文: Zen Kaku Gothic New 400、`clamp(15px, 1.2vw, 18px)`、line-height 1.85、色 #2B2D35、最大 32em。mobile は `
` で読点の後ろで折る。
- ラベル(.mono): DM Mono 400/500、12px(mobile 11px)、letter-spacing .08em、大文字。eyebrow は紫、フッターは灰。
- ボタン: 500、14px、letter-spacing .04em。ghost リンクは 14px、下線1px。
## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文ブロックは左寄せ・垂直中央、最大幅 860px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- eyebrow → h1 24px、h1 → lead 24px、lead → ボタン列 34px。ボタン列の間隔 22px。
- 色の点は x ≥ .42 に置き、左 40% を白く残す。mobile は上下に散らす。
- breakpoint 640px: 見出し `clamp(38px, 10.6vw, 52px)`、フッター2行積み。
## Motion
- 時間係数 SPEED 0.12(dt は 0〜0.05 秒にクランプ)。点ごとに周期が違い、1周 35〜105 秒。
- カーソル追従: 座標 lerp 0.06、強度 lerp 0.04。離れると元の軌道に戻る。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=7 の静止フレームを1回描く。フッター文言を差し替える。
- WebGL 非対応: radial-gradient 4枚の静止背景。
## Components
- hero: 全画面。上にサービス名と分類(等幅)、中央左に eyebrow / h1 / lead / CTA + ghost。
- button(.cta): 高さ46px、角丸12px、紫地に白文字、上縁の白いハイライト1px と紫の落ち影。hover で濃くなり1px浮く。
- ghost link: 墨色、下線 1px(35% → hover で 100%)。
- footer(.bot): 等幅 12px、左に操作説明、右に `VALE / PARTS 004 / メッシュグラデーション`。
- section: このパーツには無い。
## Do / Don't
- Do: 点は 6〜7個。色相は4〜5種にとどめる。
- Do: 白を 4割残す。全面を色で埋めると安い壁紙に見える。
- Do: リニア光で混ぜる。sRGB のまま混ぜると中間が灰色に濁る。
- Don't: 黒地に紫の点を置かない。
- Don't: 点を小さく・多くして粒に見せない。面としてにじませる。
- Don't: 見出しに色を付けない。色は背景だけ、文字は墨色。
## References
- Tailwind CSS: 白地に墨色 96px の見出しを置き、サイズ差だけで見せる考え方を抽象化。書体は Inter から Zen Kaku Gothic New に替え、色は背景に移した。
- Tuple: 白い面に紫の CTA 1つ、等幅のラベル、複数色のアクセントという構成を抽象化。アクセント色をアイコンでなくグラデーションの点として使った。
## Usage
1. `