# 溶岩ランプ — Style Reference > 温かい暗がりの中で、琥珀色の蝋の塊がゆっくり昇って合体する。文字は左下に小さく。 **Theme:** dark **Series:** PARTS 002 **World:** 眠る前に流す音のアプリ。部屋の灯りを落とした時間。 ## Concept ヒーロー背景の1パーツ。主役は全画面シェーダーで描くメタボールで、SDF のスムース結合(smin)で塊が粘りながら溶け合う。 蝋の質感は高さ場から求めた法線で陰影・ハイライト・縁の透け(リム)を出す。右半分を塊に渡し、見出し・短文・ボタンは左下に置く。カーソルや指の位置に小さな塊が遅れてついてきて、他の塊と合体する。 ## Signature Technique 全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。 - 形: `map(p)` = 底の溜まり(半径 .32、y=-.3)+ 6個の塊 + カーソル塊を `smin(a,b,k)`(polynomial smooth min、k=0.16)で結合。 - 円の SDF は `ball(q,r) = sqrt(dot(q,q)+.64r²) - 1.28r`。中心で勾配が 0 になるため、ハイライトにとがりが出ない。 - 塊の動き: `y = Yc + Ya*sin(t*spd + i*1.7) + .03*sin(t*1.3+i)`、`x = cx + SPREAD*sin(t*.17+i*2.1)*cos(t*.07+i)`。spd は .19〜.33、半径 .075〜.11。 - 高さ場: `z(d) = 1 - exp(min(d,0)*12)`。法線は z の中心差分(±12px。広めに取って smin の継ぎ目の稜線をならす)から `n = normalize(vec3(-grad z * .3, 1))`。map は 1ピクセルあたり5回評価。 - 陰影: 光 `L = (-.45,.55,.7)`、diffuse `.42+.58*max(0,n·L)`、Blinn specular `pow(n·H, 90)*.75 + pow(n·H, 10)*.18`(鋭い点と蝋の鈍い艶の2層)、リム `pow(1-n.z, 2.2)`。 - 色: `base = mix(WAX_LO, WAX_HI, 下からの光*.55 + rim*.6 + 縁*.3)`。下ほど黄色く明るい(ランプの光源が下にある設定)。 - 縁の明るみ: `wax += WAX_HI * (1-z) * .18`。 - 透過光: `wax += vec3(1,.55,.2) * pow(1-z,3) * 下からの光 * .35`。縁ほど下の灯りが抜けて見える。 - 背景: `mix(#0C0806相当, #29130A相当, (1-uv.y)^2.2)`、塊の外側に `exp(-d*9)*.28` のハロー。周辺減光 35%。1/160 のディザ。 - 縁の AA: `smoothstep(px,-px,d)`、px = 1.5/描画高さ。 - 解像度: desktop `min(devicePixelRatio,1.5)`、mobile 0.6 倍。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | --void | #0C0806 | 地(html背景) | | bg-low | #29130A | 画面下端の灯り | | WAX_LO | #FF571F | 蝋の暗部(rgb 1,.34,.12) | | WAX_HI | #FFBD3D | 蝋の明部・縁(rgb 1,.74,.24) | | spec | #FFEBBF | ハイライト | | --warm | #FAF4EA | 見出し・本文・ボタン地 | | --smoke | #8A7F76 | ラベル・フッター | | --amber | #FFB347 | フォーカスリングのみ | | cta-text | #1A1210 | ボタン文字 | ## Typography - 単一ファミリー: Zen Kaku Gothic New。 - 見出し: 500、`clamp(36px, 5.4vw, 76px)`、line-height 1.16、letter-spacing -.01em。1行に収まる長さ(7〜9文字)にする。 - 本文: 300、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 36em。 - ラベル: 12px(mobile 11px)、letter-spacing .14〜.24em、英字大文字。ロゴは 700 / letter-spacing .24em。 - ボタン: 500、14px、letter-spacing .08em。 - 本文ブロックに `text-shadow: 0 2px 30px rgba(12,8,6,.6)`、上下ラベルに `0 1px 12px rgba(12,8,6,.8)`。 ## Spacing & Layout - 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。 - 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。 - 本文は下寄せ、最大幅 640px、下余白 `clamp(24px, 7vh, 80px)`。 - 塊の中心 x: desktop 72%、mobile 56%。mobile は塊を上側(y .38〜1.1)に寄せて文字と重ねすぎない。 - breakpoint 640px: 見出し `clamp(34px, 9.6vw, 46px)`、フッター2行積み。 ## Motion - 時間係数 SPEED 0.32。dt は 0〜0.05 秒にクランプしてから加算。1個の塊の上下1往復は 60〜100 秒。 - カーソル塊: 座標 lerp 0.02(かなり遅れてついてくる)、出現 lerp 0.03。離れると縮んで消える。 - requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。 - `prefers-reduced-motion`: t=20 の静止フレームを1回描く。フッターの説明文を差し替える。 - WebGL 非対応: radial-gradient 3枚の静止背景。 ## Components - hero: 全画面。上に社名とカテゴリ、下に eyebrow / h1 / lead / CTA。 - lead: 文節ごとに ``(nowrap)で包み、1〜2字だけ次行に落ちる折り返しを防ぐ。 - button(.cta): 高さ48px、pill、温白地に濃茶文字。`inset 0 0 0 1px rgba(255,255,255,.6)` の内側リングと、琥珀色の落ち影。hover で1px浮く。 - footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 002 / 溶岩ランプ`。 - section: このパーツには無い。 ## Do / Don't - Do: 塊は6個まで。少ないほど「溶岩ランプ」に見える。 - Do: 下からの光(bottomLight)を残す。塊が下で黄色く、上で赤く見えるのが要。 - Do: 文字は塊の反対側に置く。 - Don't: 色を青や紫に替えない。暗がりに紫の球は AI の既定に見える。 - Don't: smin の k を 0.3 以上にしない。形が溶けすぎて塊に見えなくなる。 - Don't: ハイライトを強めすぎない。鋭い specular は .75、鈍い艶は .2 まで。 ## References - RainbowKit: 黒い虚空に浮かぶ1つの発光体という構図を抽象化。青→紫の勾配は使わず、琥珀→珊瑚の暖色に替えた。pill ボタンの内側白リングは踏襲。 - Madebyon: 黒地+温かい白文字+大きな見出し+アクセント1色の構成を抽象化。アクセント色は UI に置かず、背景の蝋に任せた。 ## Usage 1. `` と `