# 真珠 — Style Reference > 白いギャラリーの壁の前に、真珠がひとつ。縁にだけ淡い桃と緑の干渉色 **Theme:** light **Series:** PARTS 030 **World:** 架空の真珠工房「Shinju」のトップ。色は層の厚さで決まる、という事実を球ひとつで示す。 ## Concept 白い画面の右に真珠を置き、左に細い明朝調の見出しを置く。真珠層の色は固定の桃色で塗らず、厚みの違う3枚の薄膜干渉を平均して出す。中心は乳白で、縁(視線が斜めになる所)ほど干渉色が強くなる。表面には微細な凹凸があり、鋭い映り込みが少し崩れる。カーソルで光源が動き、上下に動かすと板の厚みが変わって色相が寄る。 ## Signature Technique 全画面1枚のフラグメントシェーダー(WebGL1)。解析的な球 + 3層薄膜の近似 + 微細凹凸の法線 + 柔らかい光沢。 - **球**: `q = (px − C)/R`、`z = sqrt(1 − r²)`、`N0 = (q, z)`。経度 `lon = atan(x, z) + t·spin`、緯度 `lat = asin(y)` を表面座標 `sc = (2·lon, 2·lat)` にする。 - **微細凹凸**: `fbm(sc·9)` の差分(e = 0.004)を接線 `tx = cross(up, N0)`、`ty = cross(N0, tx)` に沿って足し、`N = normalize(N0 + ∇b·bump·0.08)`。bump = 0.035。 - **多層干渉**: 板の厚み `d1 = platelet(430 nm) + 28·(fbm(0.7·sc) − .5)·2`。n = 1.68(アラゴナイト)。`F = (film(d1) + 0.8·film(1.55·d1) + 0.6·film(0.72·d1)) / 2.4`。`film(d, cosθ)` は `0.5 − 0.5·cos(4π n d cosθt / λ)` を λ = 650/550/450 nm で計算。彩度は 55% 落とす。 - **合成**: 地色 `(0.94, 0.92, 0.89)` × wrap diffuse `(N·L + 0.6)/1.6`。干渉色は `mix(col, col·F·1.9, orient·(0.25 + 0.75·rim))`、rim = `(1 − N·V)^2.5`。 - **光沢**: 柔らかい `pow(N·H, 10)·0.22`、鋭い `pow(N·H, 320)·0.9`、右下からの副光源 `pow(·, 40)·0.18`。縁の透け `rim·0.22`、影側を `(1 − wrap)·(1 − rim)` で 9% 沈める。 - **肩(トーンカーブ)**: 鋭い映り込みを除いた色に対し、0.82 を超えた分を `k + (1−k)(1 − exp(−(c−k)/(1−k)))`(k = 0.82)で寄せる。光沢の中心が白飛びせず階調が残る。そのあとで鋭い映り込みを足し、小さな白点だけが白まで届く。 - **光**: `L = normalize(uL, 0.85)`。uL はカーソル位置を真珠中心からの画面比で x ×2.6、y ×2.2 + 0.3 に写した値。 - **床の影**: 真珠の真下に楕円(半径 1.15 × 0.38、中心 y = −0.98、光の x に応じて 0.12 だけ反対側へずらす)を 11%、下半分の接地部を 7%。背景は #fbfbfa から中心距離で 0.6% 落とすビネット。 - 被覆は `1 − smoothstep(1 − aa, 1 + aa, r)`、aa = 1.5px。最後にハッシュの粒 ±0.003。 ```glsl float d1=uPlate+uPlateVar*(fbm(sc*.7+2.)-.5)*2.; vec3 F=(film(d1,nv,1.68)+film(d1*1.55,nv,1.68)*.8+film(d1*.72,nv,1.68)*.6)/2.4; F=mix(F,vec3(dot(F,vec3(.333))),.55); col=mix(base*(.55+.45*wrap), base*F*1.9, uOrient*(.25+.75*rim)); col+=pow(nh,10.)*.22; col=shoulder(col,.82); // 白飛びを止める肩 col+=pow(nh,320.)*.9; // 映り込みは肩の後 ``` ## Color Palette | Token | HEX | Role | |---|---|---| | --white | #fbfbfa | 地。シェーダー側は #fbfbfa に弱いビネット | | --ink | #0d1717 | 見出し、工房名、クレジット | | --steel | #6c6b6b | 本文 | | --fog | #b3b3b3 | ヘッダー補助とメタ情報と操作説明 | | --apricot | #ff8562 | メタ情報の数値1つだけ | | 真珠の地色 | #f0ebe3 相当 | シェーダーの base | | 干渉色 | 計算値 | 板の厚み 430 nm 前後で桃と緑が縁に出る | | --mist | #eeeeee | 予備の罫線色 | ## Typography - 日本語見出し: Noto Sans JP 200、`clamp(30px, 3.6vw, 54px)`、line-height 1.35、letter-spacing 0.02em、`word-break: keep-all`(モバイルは normal、26px から)。細いウェイトで真珠の軽さに合わせる。 - 本文: Noto Sans JP 300、`clamp(13px, 1.05vw, 15px)`、最大幅 27em(761px以上は 32em。1文目の「色が出る」が行をまたがないよう、1文目の後で改行する `br.d` をデスクトップだけ表示)。 - ラベル: JetBrains Mono 400、11–12px、letter-spacing 0.06em。 ## Spacing & Layout - hero `min-height: 100svh`、3行グリッド。中央行は `minmax(0, 32em) 1fr`。 - 真珠: 中心 (71%, 50%)、半径 `min(W, H)·0.27`。モバイルは (50%, 36%)、0.36。 - 余白: 横 `clamp(20px, 5vw, 72px)`、上 `clamp(20px, 3vw, 40px)`、下 `clamp(18px, 2.6vw, 32px)`。見出しと本文の間 18px(モバイル 12px)。モバイル左右 18px、文字ブロックの下に 3vh。 - breakpoint 760px: ヘッダー右とメタ情報を消し、フッターを縦積み。 ## Motion - 光源はカーソルへ 7%/フレームで追従。カーソルの上下で板の厚み目標値を ±110 nm 動かし、6%/フレームで追従。左下に現在の nm。 - カーソル無し・タッチ端末では光が `(−0.5 + 0.45 sin 0.21t, 0.65 + 0.3 cos 0.17t)` の楕円(周期約30秒 / 37秒)で自走し、厚みは周期約57秒で ±40 nm。左下の `luster` は光の高さから `0.6 + 0.4·clamp(y)` を表示。 - 表面は 0.05 rad/s で自転(凹凸が流れる)。 - rAF 1本。IntersectionObserver と visibilitychange で画面外停止。 - `prefers-reduced-motion: reduce`: 自転 0、固定光で1フレームだけ描く。カーソル移動のときだけ再描画。 ## Components - hero: 背面 canvas(`aria-hidden`)+前面テキスト。WebGL 不可時は CSS の radial-gradient の球。 - header: 左に工房名、右に技法名。 - copy: 見出し2行+本文2文。 - meta: 左下に板の厚み(nm)と屈折率と光沢値。 - footer tag: `VALE / PARTS 030 / 真珠` と操作説明1行(タッチ端末では差し替え)。 ## Do / Don't - Do: 干渉色は縁に寄せ、中心は乳白のままにする。 - Do: 厚みの揺らぎは 30 nm 以下。大きいと斑模様になる。 - Do: 影は真下の楕円と接地だけ。 - Don't: 真珠を桃色のグラデーションで塗らない。 - Don't: 球を複数置かない。ネックレスにしない。 - Don't: 背景に色を足さない。白の階調だけ。 ## References - Arsenijs Fabrica: 純白のギャラリーの壁と、細いウェイトの大きな見出し、暖色の小さな1点という構成を借りた。写真の代わりに計算した真珠を置いた。 - Krepling: 静かな白いアトリエに単一ウェイトの文字、強い色を1点だけという考え方を借りた。紫の火花は使わず、点は暖色の数値にした。 ## Usage 1. `` を hero の背面に置き、`