Jelly Button

【対象要素】
- サイト内のボタン1点（CTA・リンクボタン・フォームの送信ボタン等）に適用する

【演出内容】
- ホバーした瞬間、ボタンがぷるんと弾性のある振動を起こし、揺れが減衰しながら元の形に戻る
- 縦横の伸縮を交互に繰り返し、ゼリーのような質感を出す

【品質要件】
- 一連の振動は0.6秒前後で収める。長引かせるとしつこく見える
- 振幅は最初が最大で、以降は必ず小さくなるよう減衰させる
- prefers-reduced-motion 時は演出を無効化し、状態変化だけが分かる静的表示にフォールバックする
- ラベルの可読性を落とさない。文字が読めなくなる瞬間を作らない

[Target element]
- Apply to a single button on your site (a CTA, a link button, a form submit button, etc.)

[Motion]
- The moment it is hovered the button wobbles with an elastic, jelly-like bounce that decays back to its resting shape
- It stretches alternately along the vertical and horizontal axes to suggest a soft, gelatinous material

[Quality requirements]
- Contain the whole wobble to about 0.6s; dragging it out feels fussy
- The first oscillation is the largest and every one after it must be smaller
- When prefers-reduced-motion is set, disable the animation and fall back to a static state change
- Never reduce the legibility of the label; do not create a moment where the text cannot be read