# 大理石 — Style Reference
> 白い石の面に、灰色の筋が1本ゆっくり流れる。中央に太い見出し1本、他は何も置かない。
**Theme:** light **Series:** PARTS 003 **World:** 石の天板を図面どおりに切る工房。
## Concept
ヒーロー背景の1パーツ。主役は全画面シェーダーで描く大理石の面で、FBM ノイズをドメインワープで歪めた乱流を `abs(sin())` の帯に足して筋を作る。
筋は数本だけにして、面の大半を白く残す。見出しは画面中央に太いサンセリフ1本、その下に短文と小さな黒い pill。斜めに差す窓の光が面に映り込み、ゆっくり横へ移る。カーソルや指の位置にも磨いた面の光が映る。
## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。
- 座標: `p = (uv.x*aspect, uv.y) * 1.5 * ZOOM` を 25度回転し、y を 1.7 倍に伸ばす(筋に方向をつける)。
- ノイズ: 2D value noise、fbm 5オクターブ、回転行列 `mat2(1.6,1.2,-1.2,1.6)`。
- ドメインワープ(2段): `q = (fbm(p + t*.05), fbm(p + (5.2,1.3) - t*.04))`、`r = (fbm(p + WARP*q + (1.7,9.2) + t*.02), fbm(p + WARP*q + (8.3,2.8) - t*.03))`、`f = fbm(p + WARP*r)`。WARP = 3.2。
- 雲: `cloud = smoothstep(.38,.85,f)`、石の色と雲の色を 40% まで混ぜる。
- 主筋: `turb = fbm(p*.9 + .6*WARP*r)`、`s1 = (p.x*.9 + p.y*.35)*FREQ + turb*3.4`、`b1 = abs(sin(s1))`。
- 芯 `core1 = pow(1-b1, 42)`、濁り `body1 = pow(1-b1, 3.5) * (.35 + .65*smoothstep(.3,.7,r.y))`。
- 副筋: `f2 = fbm(p*1.7 + .8*WARP*r + (3.1,7.7))`、`s2 = (p.y*1.1 - p.x*.3)*FREQ + f2*4.2 + 1.3`、芯 `pow(1-b2, 70)`、濁り `pow(1-b2, 6)*.5`。q.x でマスクして途切れさせる。
- 金筋: `pow(1-abs(sin(s1*2+1.6)), 60) * smoothstep(.55,.75,f2) * .7`。ごく細く、まれに。
- 濃さのムラ: `fade = .55 + .45*noise(p*3)` を芯に掛ける。
- 合成順: 地 `mix(STONE, CLOUD, cloud*.4)` → 濁り `(body1*.5+body2)*VEIN` → 芯 `(core1*.95+core2*.6)*fade*VEIN` → 金 `gold*VEIN`。
- 光: カーソル位置 m に対し `sheen = exp(-|p-m|²*7) * SHEEN * (.6 + .4*noise(p*6+t))`。白を 18% 足し、12% 白へ寄せる。
- 見出しの背後: 中心 (0.5, 0.52) のガウス `exp(-|tc|²*5.5)` で石の白へ 38% 寄せ、文字の上を通る筋を薄める。
- 窓の映り込み: `lb = x*aspect*.55 + y*.9 - (.35 + .35*sin(t*.6))` の斜め帯。`smoothstep(-.15,-.11,lb)*smoothstep(.15,.11,lb)` で縁をやや硬くした窓形を 5%、`exp(-lb²*10)` のにじみを 3.5% 加算。カーソルを動かさない静止画でも磨いた面に見える。
- 仕上げ: 2% の粒子ノイズ、周辺減光 6%。
- 解像度: desktop `min(devicePixelRatio,1.5)`、mobile 0.6 倍。mobile は FREQ 1.9 で筋が必ず画面に入る。
## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --stone | #F2EFEA | 石の地・html背景 |
| CLOUD | #D6D4D1 | 雲(薄い濃淡) |
| VEIN_COL | #5C5C66 | 筋の芯 |
| vein-soft | #B2B0B1 | 筋のまわりの濁り(CLOUD と VEIN_COL の 30% 混合) |
| GOLD | #C7A86B | 金筋 |
| --ink | #141417 | 見出し・ボタン地 |
| --mute | #7E7D80 | ラベル・フッター |
| lead | #3A3A40 | 本文 |
| cta-text | #F7F5F1 | ボタン文字 |
## Typography
- 単一ファミリー: Zen Kaku Gothic New。
- 見出し: 700、`clamp(40px, 7.4vw, 108px)`、line-height 1.08、letter-spacing -.025em、中央揃え、`
` で2行固定。
- 本文: 400、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 30em、中央揃え。mobile は `
` で読点の後ろで折る。
- ラベル: 12px(mobile 11px)、letter-spacing .14〜.26em、英字大文字。ロゴは 700 / .22em。
- ボタン: 500、13px、letter-spacing .1em。
## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文ブロックは中央(`align-self:center; justify-self:center`)、最大幅 980px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- eyebrow → h1 26px、h1 → lead 26px、lead → CTA 36px。
- breakpoint 640px: 見出し `clamp(38px, 11vw, 54px)`、本文最大 24em、フッター2行積み。
## Motion
- 時間係数 SPEED 0.06(dt は 0〜0.05 秒にクランプ)。窓の映り込みは `sin(t*.6)` で、実時間では約3分で1往復。ワープの各項が .02〜.05 の速さで流れ、筋の形が数十秒かけて変わる。
- 光: 座標 lerp 0.07、強さ lerp 0.04。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=30 の静止フレームを1回描く。フッター文言を差し替える。
- WebGL 非対応: linear-gradient 2本の筋 + radial-gradient の静止背景。
## Components
- hero: 全画面。上に社名と業種、中央に eyebrow / h1 / lead / CTA。
- button(.cta): 高さ44px、pill、墨色地に白文字。hover で黒くなり1px浮く。focus-visible は墨色のリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 003 / 大理石`。
- section: このパーツには無い。
## Do / Don't
- Do: 筋は画面に2〜4本。面の 7割は白のまま。
- Do: 芯の pow は 40 以上。細い線に濁りを添えるのが石らしさ。
- Do: 見出しは墨色の太いサンセリフ。石に彫った文字のように読める。
- Don't: 等高線のように筋を増やさない。石に見えなくなる。
- Don't: セリフ体+テラコッタの組み合わせにしない。
- Don't: 雲を濃くしない。墨流しに見える。
## References
- Metamask: 淡い暖色のキャンバスに巨大な見出しと小さな黒い pill という構成を抽象化。紫の圧縮書体は使わず、墨色の Zen Kaku Gothic New 700 に替え、地は石の白にした。
- Le Puzz: ポスターのように中央へ寄せた字組みと、黒い輪郭の UI の考え方を抽象化。黄色と黒の2色構成は使わない。
## Usage
1. `