# ゼリーのボタン — Style Reference
> 白い面に太い黒の見出し。その下に色の違うゼリーのボタンが3つ並び、押すとへこんで、ぷるんと戻る。

**Theme:** light  **Series:** PARTS 044  **World:** 朝に届いた果物をその日のうちに固めるゼリーの店。

## Concept
ボタンが並ぶ区画。主役は輪郭の質点とばねで、押した場所がへこみ、反対側が膨らみ、離すと減衰ばねで跳ねて戻る。
輪郭は SVG のパスで描き、ゴムのように滑らかに変形する。文字はへこんだ方へ少し引かれ、全体の大きさも一緒に跳ねる。
色は朱・藍・黒の3つ。背景は純白、見出しは太い黒。ボタンが商品(ゼリー)そのものに見える。
透明感は4つの層で出す。中から光る明るさ(サブサーフェス)、底に集まる光、厚みで濃くなる内縁、上面の鋭い照り。床の色付きの影の中には、ゼリーを通った明るい光が落ちる。

## Signature Technique
SVG + 自前の質点ばね。ライブラリなし、WebGL なし。

- 輪郭: 角丸矩形の周に沿って 36 点を等間隔に置く(`restShape`: 直線4本 + 円弧4つを周長で歩く)。角丸 28px。
- 各点の変位 `d_i = p_i - target_i`。目標 `target_i = c + (rest_i - c)*s + hover` (s は全体の大きさ、hover はカーソルへの寄り)。
- 力:
  ```js
  a_i = -K_REST*d_i                                 // 元の形へ(90)
      + K_NEIGHBOR*((d_{i-1}+d_{i+1})/2 - d_i)      // 隣と揃える = 輪郭の波を滑らかに(420)
      - DAMP*v_i;                                   // 減衰(7.5)
  ```
  半刻み2回の半陰的オイラー(dt ≤ 33ms)。
- 押下: 押した点から `exp(-(d/R)²)`(R = 高さ×1.1)の重みで、近い点は中心へ、反対側の点は外へ(×-.45)速度を足す(PRESS_IMPULSE 520)。押している間は `s` の目標を .93 に。
- 離す: 目標を 1 に戻し `vs += 1.6`。大きさのばね `vs += (-K_SCALE*(s-st) - DAMP_SCALE*vs)*dt`(260 / 9)で行き過ぎて戻る。
- 描画: Catmull-Rom を3次ベジェに変換して `<path d>`。同じ d を全レイヤーに配る。下から順に:
  1. 色付きの影: 同じ形を `--c` で塗り、blur 9、`translate(0 14) scale(1 .9)`、opacity .32。
  2. 床の透過光: 楕円(中心 x、y = 高さ+9、rx 幅×.3、ry 6)を `mix(c, 白, .62)`、blur 4、opacity `CAUSTIC×.75`。影の中に明るい色が落ちる。
  3. 本体: radialGradient(中心 50%/58%。0 で `mix(c,白,.34)`、.62 で c、1 で `mix(c,黒,.32)`)。
  4. 中身(clipPath で本体の形に切り抜く):
     - 内部の光: 同じ形を `mix(c,白,.5)` で塗り、`scale(.74 .42)` を中心から下へ高さ×.12 ずらして置き、blur 7、opacity `GLOW`(.6)。
     - 底に集まる光: 楕円(y = 高さ×.88、rx 幅×.3、ry 高さ×.1)を `mix(c,白,.72)`、blur 4、opacity `CAUSTIC`(.6)。
     - 厚みの内縁: 同じ形の stroke 6px を `mix(c,黒,.4)`、blur 3.5、opacity .38。切り抜きで内側の半分だけ残る。
  5. 下縁の透過光(linearGradient、86% に白 26%)と、左上の柔らかい照り(radialGradient 35%/18%、白 `SPEC×.6`)。
  6. 鋭い照り: 同じ形を上端基準で `scale(.86 .3)` に縮め、高さ×.09 下げて白の縦グラデ(.9 → .25 → 0)、blur .7。輪郭から作るので、へこむと照りも一緒に歪む。
  7. 縁の白い線 1.6px、opacity .42。
- 文字: `translate(平均変位×.25) scale(.5+.5*s)`。
- 停止: 全ボタンのエネルギーが小さくなったら rAF を止め、入力で起こす。
- 初回だけ 500ms 後に3つを順に小さく揺らす。
- 待機中は 1.4 秒後から `IDLE_EVERY`(1.5 秒)ごとに1つずつ順に、上辺の幅 30〜70% のどこかを `PRESS_IMPULSE×IDLE_POKE(.4)` で軽く押す(大きさに `vs += .7`)。いつ見ても1つは揺れていて、読み込み3秒後の静止画にもへこみが写る。ホバー中・押下中は休み、最初の pointerdown か keydown で止める。

## Color Palette
| Token | HEX | 役割 |
|---|---|---|
| --paper | #FFFFFF | 背景 |
| --ink | #0B0B0C | 見出し・ロゴ・黒のボタン |
| lead | #3A3A3C | 本文 |
| --slate | #666666 | eyebrow・フッター |
| --vermillion | #E21715 | 第一のボタン(注文) |
| --cobalt | #086392 | 第二のボタン |
| label | #FFFFFF | ボタン文字 |
| gloss | rgba(255,255,255,.9) → 0 | 上面の鋭い照り(縦グラデ) |
| glow | mix(--c, #FFF, .5) | 内部の光(各色から計算) |
| caustic | mix(--c, #FFF, .72) | 底と床に集まる光 |

## Typography
- 見出し: Noto Sans JP 800、`clamp(38px, 5.8vw, 80px)`、line-height 1.12、letter-spacing -.03em、中央揃え2行。mobile `clamp(36px, 10vw, 50px)`。
- 本文: Noto Sans JP 400、`clamp(14px, 1.15vw, 17px)`、line-height 1.9、最大 30em(mobile 24em、2行)。
- eyebrow / ロゴ / フッター: Inter。eyebrow 500 / 12px / .24em、ロゴ 800 / 12px / .22em、フッター 11px / .08em。
- ボタン文字: Noto Sans JP 800 / 17px / letter-spacing .06em、白。

## Spacing & Layout
- 1画面 = `100svh`、`grid-template-rows: auto 1fr auto`。本文ブロックは中央、最大幅 980px。
- 左右余白 `clamp(20px, 5vw, 72px)`、上 26px、下 22px(+safe-area)。
- eyebrow → h1 24px、h1 → lead 22px、lead → ボタン列 46px(mobile 34px)。
- ボタン: 高さ 76px、最小幅 236px、左右 padding 40px、間隔 28px(見出しより目に入る大きさにする)。SVG は四辺 40px ずつはみ出して描く(変形の余白)。mobile は縦積み、幅 `min(100%, 280px)`、高さ 58px、間隔 16px。

## Motion
- 押下 → へこみは即時。離した後の揺れはおよそ 0.8 秒で収まる(DAMP 7.5、DAMP_SCALE 9)。
- hover: カーソルの方へ最大 10% 寄る(HOVER_PULL .10)。
- キーボード: Space / Enter で上辺の中央を押したことにする(軽め)。
- rAF は揺れている間だけ動く。`visibilitychange` で停止。
- `prefers-reduced-motion`: `.static` に切り替え、CSS の `scale(.96)` だけ(揺れない)。フッター文言を差し替える。

## Components
- hero: 全画面。上に店名と業種、中央に eyebrow / h1 / lead / ボタン列。
- button(.jelly): `<button data-color="vermillion|cobalt|ink"><span>文言</span></button>`。SVG は JS が prepend する。`:focus-visible` は黒のリング(角丸 30px)。
- footer(.bot): 11px、左に操作説明、右に `VALE / PARTS 044 / ゼリーのボタン`。

## Do / Don't
- Do: ボタンは2〜4個。色は朱・藍・黒のような濁りのない3色まで。
- Do: 鋭い照りは上面に1本。輪郭を縮めた形で作り、変形に追従させる。
- Do: 内部の光は文字より下に置く。中央に置くと白い文字が沈む。文字には薄い text-shadow を付ける。
- Do: K_NEIGHBOR は K_REST の4倍以上。輪郭がギザギザにならない。
- Don't: DAMP を 4 以下にしない。いつまでも揺れて操作を邪魔する。
- Don't: 角丸を高さの半分(pill)にしない。角の変形が見えなくなる。
- Don't: 影を灰色にしない。色付きの影と、その中の明るい透過光で半透明が伝わる。
- Don't: GLOW を .8 以上、内縁の opacity を .5 以上にしない。乳白色に濁るか、浮き輪のように見える。

## References
- Agencja brandingowa: 白と黒だけの面に太いグロテスクという骨格を抽象化。ボタンにだけ色を置いた。
- Photographer: 朱・藍・緑のクロマティックな縁取りの考え方を抽象化。色は塗りに使い、緑は使わず朱と藍の2色にした。

## Usage
1. `.jelly` の CSS と `<script>` を切り出す。HTML は `<button class="jelly" data-color="ink"><span>文言</span></button>`。ライブラリ不要。
2. 色は CSS の `.jelly[data-color=...]{--c:#...}` に追加する。JS は `--c` を読んで塗る。
3. 親要素に `overflow:hidden` を付けない(変形が四辺 40px はみ出す)。
4. パラメータは JS 冒頭の `P`:
   - `POINTS` 質点の数(36)、`RADIUS` 角丸(28。CSS の focus リングの角丸と合わせる)
   - `K_REST` / `K_NEIGHBOR` / `DAMP` 輪郭のばねと減衰
   - `PRESS_IMPULSE` / `PRESS_RADIUS` / `PRESS_SCALE` 押下のへこみと縮み
   - `K_SCALE` / `DAMP_SCALE` 全体の大きさのばね
   - `HOVER_PULL` カーソルへの寄り、`LABEL_FOLLOW` 文字の追従、`SPEC` 柔らかい照りの強さ、`GLOW` 内部の光、`CAUSTIC` 底と床に集まる光
   - `IDLE_EVERY` 待機中に揺らす間隔(秒、0 で無効)、`IDLE_POKE` その強さ
5. 揺れを硬くするなら `K_REST 160 / DAMP 10`、やわらかくするなら `K_REST 60 / DAMP 6`。
6. 初回の揺れが不要なら末尾の `setTimeout` を消す。