# 極光 — Style Reference
> 夜空の地に、緑から青へ抜けるオーロラの帯が揺れる。文字は下 1/3 に小さく置き、上 2/3 を帯に渡す。
**Theme:** dark **Series:** PARTS 001 **World:** ノルウェー北部の宿。天窓の下で夜空を待つ時間。
## Concept
ヒーロー背景の1パーツ。主役は全画面のフラグメントシェーダーで描くオーロラの帯で、見出し・短文・ボタンはその上に静かに載せる。
何のサイトか一瞬で分かるよう、帯の色(緑→青→上端だけ薄い紫)と「宿」の見出しだけで世界を伝える。カーソルや指を動かすと、その位置に帯の裾が引き寄せられる。
## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。
- ノイズ: 2D value noise(hash → smoothstep補間)。fbm は4オクターブ、回転行列 `mat2(1.6,1.2,-1.2,1.6)` で重ねる。
- 帯: 3レイヤー(`for i in 0..2`)。各レイヤーで
- `x = uv.x*aspect*1.35 + i*5.17 - shift`(shift はカーソルの引き)
- 裾の高さ `base = .24 + .09*i + (fbm(x*.65 + t*.045, i*3.1 + t*.05) - .5)*.5 - down`
- 高さ方向の包絡 `env = smoothstep(0,.025,h) * exp(-h*(3.4+1.2*i)) * (1 + 1.6*exp(-h*16))`(裾の輝線を強める)
- 縦の筋 `ray = pow(smoothstep(.26,.92, fbm(x*2.6 + t*.12, i*7 + uv.y*.5)), 1.6) * (.55 + .9*noise(x*10, uv.y*.9))`
- 襞 `ray *= .62 + .7*pow(noise(x*46 + t*.6, i*5 + uv.y*.35), 1.4)`(細い縦の筋。カーテンの解像感を出す)
- 下縁の芯 `rim = exp(-h*h*2600) * ray` を `vec3(.55,1,.82)*rim*.5` で加算
- 色 `mix(GREEN, TEAL, h*2.4)` → `mix(_, VIOLET, smoothstep(.28,.62,h))`
- カーソル: `g = exp(-dx*dx*5)` を重みに、模様を横に寄せる `shift = PULL*.45*dx*g`、裾を下げる `down = PULL*.22*g*(カーソル下側のみ)`。JS側でマウス座標と引き強度を lerp(0.08 / 0.05)して滑らかにする。
- 地面: `col *= smoothstep(-.05,.14,uv.y)` で画面下端を暗く落とし、帯の裾が地平線の上で切れて見えるようにする。
- 仕上げ: `col = 1 - exp(-col*1.5)`(トーン圧縮)、1/128 のディザで帯のバンディングを消す。
- 星: 70分割のセル内に hash で位置を散らし、`smoothstep(1.6px, .2px, dist)` の小さな点。上空のみ。
- 解像度: desktop は `min(devicePixelRatio, 1.5)`、mobile は 0.6 倍。
## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --night | #070B10 | 地(html背景・フォールバック) |
| sky-low | #05060A | シェーダー下端の空 |
| sky-high | #090D14 | シェーダー上端の空 |
| GREEN | rgb(46,242,148) | 帯の裾(最も明るい) |
| TEAL | rgb(26,158,219) | 帯の中段 |
| VIOLET | rgb(133,92,224) | 帯の上端。薄くだけ |
| --cream | #F1EDE0 | 見出し・本文・ボタン地 |
| --fog | #8C9398 | ラベル・フッター |
| --glow | #5BE3A6 | フォーカスリングのみ |
## Typography
- 見出し: Shippori Mincho 500、`clamp(34px, 5.2vw, 72px)`、line-height 1.2、letter-spacing .02em。改行は `
` で固定。
- 本文: Zen Kaku Gothic New 300、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 34em。
- ラベル: Zen Kaku Gothic New 400/500、12px(mobile 11px)、letter-spacing .14〜.22em、英字は大文字。
- ボタン: 500、14px、letter-spacing .08em。
- 本文ブロックに `text-shadow: 0 1px 28px rgba(7,11,16,.55)` を敷き、明るい帯の上でも読める。
## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`(上ラベル / 空き / 本文+フッター)。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- 本文は下寄せ、最大幅 760px。本文の下余白 `clamp(24px, 6vh, 72px)`。
- breakpoint 640px: 見出し `clamp(32px, 9.4vw, 44px)`、フッター2行積み。
## Motion
- 時間係数 SPEED 0.55。フレーム間隔 dt は 0〜0.05 秒にクランプしてから加算する(タブ復帰時の飛びを防ぐ)。帯の揺れは fbm の時間項(0.045〜0.12)で、1周期が十数秒の遅さ。
- カーソル追従: 座標 lerp 0.08、引き強度 lerp 0.05。離れると1秒ほどで戻る。
- requestAnimationFrame 1本。`visibilitychange` と IntersectionObserver で画面外は停止。
- `prefers-reduced-motion`: t=12 の静止フレームを1回描いて終了。フッターの説明文を「静止しています」に差し替える。
- WebGL 非対応: CSS の radial-gradient 2枚を重ねた静止背景を表示。
## Components
- hero: 全画面。上に社名と地名、下に eyebrow / h1 / lead / CTA。
- lead: 文節ごとに ``(white-space:nowrap)で包み、行末に1〜2字だけ落ちる折り返しを防ぐ。
- button(.cta): 高さ48px、pill、クリーム地に濃紺文字、右に22pxの横線。hover で1px浮く。focus-visible は緑のリング。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 001 / 極光`。
- section: このパーツには無い。移植先では hero 直下に通常セクションが続く想定。
## Do / Don't
- Do: 上 2/3 を空けて帯を見せる。文字は下 1/3。
- Do: 裾の輝線(env の `exp(-h*16)` 項)を残す。これがオーロラらしさの要。
- Do: 紫は上端だけ。全体の印象は緑と青。
- Don't: 紫を強めて「黒地に紫グラデ」に寄せない。
- Don't: 星を増やしたり大きくしたりしない。帯の邪魔になる。
- Don't: 見出しを白い太ゴシックにしない。明朝の細さが夜の静けさを作る。
## References
- Dennis Snellenberg: 近黒1色のキャンバスに文字だけで語る構成を抽象化。216pxの名前の代わりに、面積の主役をシェーダーに譲り、文字は小さく下に置いた。
- Moxie: セリフ見出し+クリーム文字+単一アクセントの考え方を抽象化。アクセント色は UI に置かず、背景の緑に任せた。書体は IBM Plex Serif から Shippori Mincho に替えた。
## Usage
1. `