# 星の加速 — Style Reference
> 黒い宇宙の消失点から星が筋になって流れる。スクロールで船が加速し、文字が消えて筋だけになる。
**Theme:** dark **Series:** PARTS 005 **World:** 入力したそばから集計が返るデータ基盤。待たない速さ。
## Concept
ヒーロー背景の1パーツ。主役は極座標で星を筋に引き伸ばす全画面シェーダー。停止時はほぼ点、スクロール位置に応じて速度が上がり、最下部で長い光の筋になる。
見出しは細い明朝を左下に小さく置き、加速が始まると消える。白い pill が画面内で唯一の明るい物体。最下部に「到着。」の短い区画が現れる。
## Signature Technique
全画面1枚の三角形に対するフラグメントシェーダー(WebGL1)。外部ライブラリなし。速度と移動距離は JS からの uniform。
- 座標: `p = ((uv.x - cx)*aspect, uv.y - cy)`、`r = |p|`、`a = atan(p.y,p.x)/2π + .5`。消失点 CENTER = (.55, .58)。
- 角度セル: レイヤーごとに `rows`(160 / 230 / 320 / 90)で角度を分割し、`cellA = floor(a*rows + seed)`。セルの hash が DENSITY(desktop .16 / mobile .12)未満のセルだけ星を持つ。
- 星の線: セル中央 ± .3 セルの角度 `ang` に単位ベクトル dir を置き、`along = p·dir`(中心からの距離)、`side = |p·perp|`(線からの横ずれ)。
- 奥行き: `lr = log(along + .02) * 2.2`。対数にすると手前ほど速く流れる。`v = fract(lr - dist - phase)`、v=0 が先頭。
- 尾: `tail = exp(-v / len)`、`len = .02 + speed*.4`。速度で尾が伸びる。先頭は `tail *= 1 + 2.2*exp(-v/.008)` で星本体を明るくし、尾との差で速度を読ませる。
- 色: `mix(TINT, white, smoothstep(.6,1.6,s)*.6)`。明るい先頭ほど白、尾は青み。
- 消失点の光: `vec3(.035,.05,.11) * exp(-r²*14) * (.6 + .6*speed)` を加算。輪郭のない淡い青で奥行きの芯を作る。
- 太さ: `w = 1 - smoothstep(0, 1.1px*(1 + 1.2*along), side)`。中心側は細く、手前は太い。
- 明るさ: `depth = smoothstep(.04,.45,along)`(消失点付近は暗い)、`size = (.2 + .8*hash)²`。4レイヤーを 1 / .8 / .6 / 1.2 で加算。
- 奥の静かな星: 90分割セルに小さな点。速度が上がると消える `(1 - smoothstep(0,.6,speed))`。
- 仕上げ: `col = 1 - exp(-col*1.4)`、1/255 のディザ。
- JS: `target = BASE + progress*(MAX-BASE) + min(1.2, kick)`。progress はスクロール比、kick はスクロール量 × KICK で加わり 1秒でほぼ減衰。`speed` は target へ dt*3 で追従、`dist += speed*dt*1.2`。
- 解像度: desktop `min(devicePixelRatio,1.5)`、mobile 0.6 倍。
## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --void | #000000 | 地 |
| space | #010204→#05060E | 地の僅かな青み(外周→消失点まわり、トーン圧縮後) |
| TINT | rgb(199,219,255) | 星の筋の色 |
| dots | #B3BFE6 | 奥の点の色(60%) |
| --star | #F0F0FA | 見出し・本文強調・pill 地 |
| --ash | #8E9098 | 本文・ラベル |
| --mute | #5A5C64 | フッター・メーター |
| cta-text | #06070C | pill の文字 |
## Typography
- 見出し: Noto Serif JP 300、`clamp(32px, 4.8vw, 66px)`、line-height 1.3、letter-spacing .02em、`
` で2行固定。
- 本文: Noto Serif JP 300、`clamp(14px, 1.1vw, 16px)`、line-height 2、最大 34em、色 --ash。
- ラベル・ボタン・メーター(.mono): DM Mono 400/500、12px(mobile 11px)、letter-spacing .1em、大文字。
- 本文ブロックに `text-shadow: 0 1px 18px rgba(0,0,0,.9), 0 0 40px rgba(0,0,0,.8)`。
- 到着区画の h2: 300、`clamp(30px, 4vw, 56px)`、letter-spacing .06em、中央揃え。
## Spacing & Layout
- ページ高さ `320svh`(.track)。canvas と UI は `position:fixed`。
- UI は `grid-template-rows: auto 1fr auto`、左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- 本文は左下、最大幅 720px、下余白 `clamp(24px, 7vh, 80px)`。
- メーター `WARP 0.00` は下中央(mobile では非表示)。
- breakpoint 640px: 見出し `clamp(28px, 7.6vw, 38px)`、フッター2行積み。
## Motion
- 停止時 BASE 0.05、最下部 MAX 1.6。dt は 0〜0.05 秒にクランプ。スクロール速度による KICK 2.5(上限 1.2)。
- 本文の不透明度 `1 - progress*2.2`(`transition: opacity .2s linear`)、到着区画は progress .78→1 で現れる。
- requestAnimationFrame 1本。`visibilitychange` で停止。
- `prefers-reduced-motion`: speed .9 / dist 3 の静止フレームを1回描く。スクロールしても加速しない。
- WebGL 非対応: radial-gradient の静止背景。
## Components
- hero: 全画面固定。上に社名と分類、左下に eyebrow / h1 / lead / pill。
- lead: 文節ごとに ``(white-space:nowrap)で包み、1〜2字だけ次行に落ちる折り返しを防ぐ。
- button(.cta): 高さ46px、pill、白地に黒い等幅文字。hover で1px浮く。focus-visible は白いリング。
- meter: 等幅 12px、現在の速度を小数2桁で表示。
- arrive: 全画面中央、`到着。` + 等幅ラベル + pill。
- footer(.bot): 等幅、左に操作説明、右に `VALE / PARTS 005 / 星の加速`。
## Do / Don't
- Do: 停止時は点に近い短さにする。差があるから加速が効く。
- Do: 消失点を画面中央から少しずらす。文字の側が空く。
- Do: 加速中は文字を消す。筋だけの画面を1枚つくる。
- Don't: 星に色を散らさない。白〜淡い青だけ。
- Don't: 密度を上げない。DENSITY .3 を超えると放射線の模様になる。
- Don't: 消失点に輪郭のある光の玉を置かない。淡い青のにじみまでに留める。
## References
- Basedash: 黒地に細いセリフ見出し、白い pill が唯一の明るい物体という構成を抽象化。紫と緑のアクセントは使わず、星の青白だけにした。
- Rarible: 無彩色の端末感と等幅ラベルの考え方を抽象化。蛍光色のハイライトは置かず、速度メーターを等幅で小さく置いた。
## Usage
1. `