# 火 — Style Reference > 黒い画面の下半分から炎が立ち、舌の先が揺れて消える。上 1/3 に白い細い見出し。 **Theme:** dark **Series:** PARTS 007 **World:** 庭に置ける家庭用の薪窯。薪の火そのものが商品。 ## Concept ヒーロー背景の1パーツ。主役は上昇するノイズを高さで冷却し、色温度の階調(黒→深紅→橙→黄→白)に写した全画面の炎。 炎は下 45% にとどめ、上は黒のまま残して見出しを置く。カーソルや指の x 位置で、その真上の炎が高くなる。火の粉は少量だけ。 ## Signature Technique 全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。 - ノイズ: 2D value noise(3次補間)、fbm 5オクターブ、回転行列 `mat2(1.6,1.2,-1.2,1.6)`。 - 乱流: `w = (fbm(q·2.2 + (0,-1.1t)), fbm(q·2.2 + (5.2,-1.35t)))`。y 方向に負の時間を足すと上昇する。 - 炎の場: `n = fbm((q + .35(w-.5))·(D, .7D) + (0,-1.9t))·.75 + fbm((q + .2(w-.5))·(2.1D, 1.3D) + (7,-3.1t))·.35`、D = DETAIL(desktop 2.8 / mobile 3.2)。 - 舌の形: `n = smoothstep(.18,.85,n)` でコントラストを上げる。 - 薪の量のむら: `fuel = .55 + .45·noise(2.4x + .15t, .3t)`。高い舌と低い舌ができる。 - 冷却: `base = 1 - y / ((HEIGHT + heat·.5)·(.7 + .6·fuel))`、`h = 1.45n + .95base - .78`。 - 色温度 ramp(h): 1を超える発光値で持ち、トーン圧縮で白飛びさせずに明るさを出す。0→.25 黒→深紅 (.6,.035,0)、.25→.5 → 橙 (1.5,.32,.015)、.5→.75 → 黄 (2.1,.95,.12)、.75→.92 → 淡黄 (2.6,1.75,.55)、.92→1.08 → 白に近い (3,2.5,1.4)。1.0 上限の値にすると圧縮後に灰色がかった乳白になる。 - カーソルの熱: `heat = HEAT·exp(-dx²·6)·smoothstep(0,.6,mouse.y)`。その列だけ base が高くなる。 - 根元: `col *= mix((.14,.035,.01), 1, smoothstep(.01,.17,y))`(薪の暗さ。掛ける色を暗い赤にして灰色に濁らせない。フッターの文字もここで読める)、残り火の赤 `(.25,.03,0)` を低い部分に加算。 - 下端の照り返し: `col += (.5,.12,.02)·pow(1-y,6)·.35`。 - 火の粉: 40分割セルを `y - .22t` で上へ流し、`sin` で横に揺らす。小さな点、上に行くほど消える。 - 舌の縁: `n3 = noise(q·(DETAIL·6, DETAIL·3) + (3,-5t))` を `(n3-.5)*.12` で加え、縁に細かい裂け目を入れる。 - 仕上げ: `1 - exp(-col·1.25)`、1/200 のディザ。 - 解像度: desktop `min(devicePixelRatio,1.5)`、mobile 0.6 倍。 ## Color Palette | Token | HEX | 役割 | |---|---|---| | --void | #000000 | 地 | | ember-dark | #870B00 | 炎の外側・残り火(ramp (.6,.035,0) のトーン圧縮後) | | flame-orange | #D85405 | 炎の中層((1.5,.32,.015)) | | flame-yellow | #EDB123 | 炎の芯((2.1,.95,.12)) | | flame-pale | #F5E27F | 芯の先((2.6,1.75,.55)) | | flame-white | #F9F4D3 | 最も熱い部分(わずか。(3,2.5,1.4)) | | spark | #C69742 | 火の粉(黒地の上。(1,.6,.2)×1.2) | | --star | #F0F0FA | 見出し・ボタン枠 | | lead | #C9C9D2 | 本文 | | --steel | #8A8A90 | ラベル | | footer | #B8B8C0 | フッター(炎の上でも読める明るさ) | ## Typography - 見出し: Noto Sans JP 300、`clamp(38px, 6vw, 84px)`、line-height 1.15、letter-spacing .01em、1行。 - 本文: Noto Sans JP 300、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 32em。 - ラベル(.lab): Barlow 500、12px(mobile 11px)、letter-spacing .1em、大文字。 - ボタン: Barlow 500、13px、letter-spacing .12em、大文字。 - 本文ブロックに `text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 24px rgba(0,0,0,.7)`。高い舌が見出しの高さまで届いても読める。 - フッターに `text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.9)`。 ## Spacing & Layout - 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文は上寄せ(`align-self:start`)、上余白 `clamp(40px, 12vh, 140px)`、最大幅 760px。 - 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。 - 炎の高さは HEIGHT(desktop .5 / mobile .38)。fuel のむらで高い舌は画面上 1/4 まで届くことがあるので、本文ブロックに text-shadow を敷く。 - breakpoint 640px: 見出し `clamp(34px, 9.4vw, 46px)`、フッター2行積み。フッターの背後に透明→黒80%の縦グラデーション(`.bot::before`、左右は余白分はみ出して画面端まで)を敷き、炎の上でも注記を読めるようにする。 ## Motion - 時間係数 SPEED 1.0(dt は 0〜0.05 秒にクランプ)。炎の上昇 1.9〜3.1 単位/秒、薪の量のむらは .15〜.3 でゆっくり。 - カーソル追従: 座標 lerp 0.08、熱 lerp 0.05。 - requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。 - `prefers-reduced-motion`: t=3 の静止フレームを1回描く。 - WebGL 非対応: 黒→深紅→橙→黄の linear-gradient。 ## Components - hero: 全画面。上に社名と分類、上 1/3 左に eyebrow / h1 / lead / CTA。 - button(.cta): 高さ46px、pill。1px の白枠に透明の地で、文字は大文字。hover で白地に黒文字。focus-visible は白いリング。 - footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 007 / 火`。 - section: このパーツには無い。 ## Do / Don't - Do: 炎は画面の半分まで。上の黒が炎を明るく見せる。 - Do: 根元を暗くする。薪があるように見え、文字も読める。 - Do: 色温度の階調で描く。単色の橙にしない。 - Don't: 白を広げない。白は舌の芯にわずかだけ。 - Don't: 火の粉を増やさない。粒子の演出に見える。 - Don't: 炎を青や緑にしない。 ## References - SpaceX: 黒地に星白1色、トラッキングした大文字ラベル、細枠のボタンという構成を抽象化。写真の代わりに炎のシェーダーを置いた。 - Agence K72: 黒の虚空に大きな白い見出しを1本だけ置き、アクセントは1点に絞る考え方を抽象化。蛍光色の線は使わず、炎がその1点を担う。 ## Usage 1. `` と `