# 伸びるカーソル — Style Reference
> 灰緑の紙の上で、黒い点のカーソルが速く動くと進行方向に楕円に伸び、ボタンの上では輪になる。見出しは太い黒、強調だけ群青。

**Theme:** light  **Series:** PARTS 057  **World:** 動画配信の API。3回呼ぶだけで動く速さ。

## Concept
カーソルのパーツ。主役は速度ベクトルで変形する自作カーソルで、速さで長径が伸び(面積は保つ)、向きで回転し、リンクやボタンの上では輪に変わる。
`mix-blend-mode: difference` の白い円なので、灰緑の地では黒、群青の上では黄、黒の上では白に見え、どこでも消えない。無操作が続くとボタンとリンクを順に巡り、静止画でも伸びた形が写る。ポインタのない端末でも表示し、自動巡回と指の追従で見せる(ネイティブカーソルは消さない)。

## Signature Technique
DOM 2要素(.cur と .tail)の transform を JS で更新。外部ライブラリなし。

- 追従: `x += (tx - x)·FOLLOW`(FOLLOW .18)。速度は追従後の差分 / dt を lerp .3 で平滑化。
- 伸び: `target = min(MAX_STRETCH 2.6, 1 + speed·STRETCH)`(STRETCH .003 /px/s)。`str` は lerp .25。長径 `sx = str`、短径 `sy = 1/√str`(面積一定)。
- 向き: `speed > 40` のときだけ `ang = atan2(vy, vx)`(止まったときに向きが暴れない)。
- 輪: `pointerover` で `closest('a, button, [data-cursor]')` に当たると `tring = 1`、lerp .15。`ring = 1 + (RING_SCALE 2.2 - 1)·ring` を scale に掛け、`.ring` クラスで塗りを輪に、中心に 5px の点。
- 合成: `.cur{mix-blend-mode:difference}`、blob は白 24px。
- 尾: `.tail`(10px)が lerp .08 で遅れて追い、不透明度は `min(1, speed/600)·.4`。
- 自動: `idle > AUTO_IDLE(2s)` で `stops`(HOVER に一致する要素)を順に巡る。1 停留 2.4 秒、前半 45% が移動(smoothstep で上に 170px の弧)、後半は輪になって止まる。初期の出発点は画面の (60%, 30%)。起動直後は自動で始まる。
- `cursor:none` は `@media (pointer:fine)` かつ `body.custom` のときだけ。`(pointer:coarse)` でも .cur/.tail は表示し、自動巡回でボタンを順に回る。指でなぞると追従し、2秒触れなければ自動に戻る。文言はタッチ向けに差し替える。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --sage | #E2E4DD | 地 |
| --ink | #121314 | 見出し・本文強調・黒 pill |
| --blue | #1A1FE6 | 見出しの強調・青 pill・フォーカスリング |
| --mute | #6B6E66 | ラベル・フッター |
| lead | #3C3F38 | 本文 |
| cursor | #FFFFFF(difference) | カーソル(地の上で #1D1B22、青の上で黄、黒の上で白に見える) |
| ghost-border | rgba(18,19,20,.35) | 枠だけのボタン |

## Typography
- 単一ファミリー: Zen Kaku Gothic New。
- 見出し: 700、`clamp(40px, 7.2vw, 108px)`、line-height 1.05、letter-spacing -.03em、`<br>` で2行固定、`<em>` は群青。
- 本文: 400、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 32em。mobile は `<br class="m">` で読点の後ろで折る。
- ラベル: ヘッダー 12px(mobile 11px)・letter-spacing .14em、eyebrow 12px・.22em、大文字。ロゴ 700 / .2em。フッター 11px・.1em。
- ボタン: 500、14px、letter-spacing .04em。補足リンク 14px、下線 1px rgba(18,19,20,.3)(hover で --ink)。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文は左寄せ・垂直中央、最大幅 980px。
- eyebrow の下 22px、見出しの下 26px、本文の下 36px。ボタン列 gap 14px / 22px、補足リンク gap 8px / 28px、上 40px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 28px、下 22px(+safe-area)。
- breakpoint 640px: ヘッダー 11px、見出し `clamp(40px, 11.4vw, 56px)`、ボタン高さ 46px・左右 22px(通常は 50px・左右 28px)、フッター2行積み(間隔 6px、左揃え)。

## Motion
- 追従 lerp .18、伸び lerp .25、輪 lerp .15、尾 lerp .08。
- 自動の巡回は 1 停留 2.4 秒。操作すると即止まり、2 秒後に再開。
- requestAnimationFrame 1本。`visibilitychange` で停止。
- `prefers-reduced-motion`: 見出しの横に伸びた状態(str 2.2、-.5rad)で静止。
- WebGL を使わないためフォールバック不要。

## Components
- hero: 全画面。上に社名と分類、中央左に eyebrow / h1 / lead / ボタン3つ / 補足リンク4つ。
- button(.btn): 高さ50px の pill。青(primary)、黒(secondary)、枠だけ(ghost)の3種。hover で1px浮く。focus-visible は群青のリング。
- cursor(.cur): 24px の白い円(difference)。移動で楕円、リンク上で 2.2 倍の輪+中心の点。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 057 / 伸びるカーソル`。

## Do / Don't
- Do: 面積を保つ(短径 1/√str)。伸びるほど細くなるのが弾性に見える。
- Do: difference 合成にする。色を決め打ちすると青いボタンの上で消える。
- Do: タッチ端末では自動巡回を主にし、ネイティブカーソルを消さない。
- Don't: 伸びを 3 倍以上にしない。線になって読めない。
- Don't: 尾を長く連ねない(点1つまで)。
- Don't: ネイティブカーソルを消すのは `pointer:fine` のときだけ。

## References
- Mux: 灰緑の紙に白と黒の pill、太い見出しという構成を抽象化。橙の CTA は使わず、群青1色にした。
- Contractbook: 紙の地に群青1色を句読点のように置く考え方を抽象化。黄の CTA は使わない。

## Usage
1. `<div class="tail">` と `<div class="cur">` の2要素、`.cur` `.tail` の CSS、`<script>` ブロックを切り出す。`body.custom` と `@media (pointer:fine)` の `cursor:none` も一緒に。
2. パラメータは JS 冒頭の `P`:
   - `FOLLOW` 追従(1 で遅れなし)
   - `STRETCH` 速度に対する伸び、`MAX_STRETCH` 上限
   - `RING_SCALE` リンク上の輪の大きさ
   - `TAIL_FOLLOW` 尾の追従
   - `AUTO_IDLE` 自動で巡り始めるまでの秒数(大きな値で自動なし)
   - `HOVER` 輪になる要素のセレクタ(`data-cursor` 属性で任意の要素を追加)
3. 色は `.cur .blob` の `background`(difference のまま白を推奨)。
4. 自動の巡回を止めるときは `AUTO_IDLE` を 1e9 に。初期の出発点は `autoTarget()` の `innerWidth*.6, innerHeight*.3`。
5. iframe や `overflow:hidden` の中では `position:fixed` が効かない場合があるため、最上位の body 直下に置く。