ゼリーボタン

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「ゼリーボタン」の効果を追加してください。

# 追加してほしい効果
ゼリーボタン（遊べるUI）
クリックした位置に向かって押しつぶされ、ゼリーのようにぷるんと弾性で揺れ戻るボタン。押す場所によって歪む向きが変わり、連打しても弾みが破綻しません。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- ゼリーボタン: クリックした位置の方向へゼリーのように歪み、弾性で揺れ戻るボタン -->
<div class="stage">
  <button class="jelly-btn" type="button" aria-label="ゼリーボタンを押す">
    <span class="jelly-btn__shine" aria-hidden="true"></span>
    <span class="jelly-btn__label">つんつん</span>
  </button>
  <p class="hint">クリックした位置の方向にぷるんと潰れて戻ります</p>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 30%, #241a14 0%, #0d0e1a 72%);
  color: #f4f5fb;
}

.stage { display: grid; place-items: center; gap: 16px; padding: 20px; }

.jelly-btn {
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  padding: 18px 42px;
  border-radius: 999px;
  font: 700 16px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: .02em;
  color: #3a1505;
  background: linear-gradient(155deg, #ffc172 0%, #ff8a3d 55%, #ff6a1f 100%);
  box-shadow:
    0 12px 24px rgba(255, 122, 40, .35),
    inset 0 -7px 10px rgba(170, 55, 0, .3),
    inset 0 3px 4px rgba(255, 255, 255, .55);
  -webkit-tap-highlight-color: transparent;
  transform-origin: center;
  animation: jelly-idle 2.6s ease-in-out infinite;
}
.jelly-btn:focus-visible { outline: 2px solid #ffd39a; outline-offset: 4px; }

.jelly-btn__shine {
  position: absolute;
  top: 6px;
  left: 16%;
  width: 38%;
  height: 32%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  filter: blur(3px);
  pointer-events: none;
}

.jelly-btn__label { position: relative; }

@keyframes jelly-idle {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.015, .985); }
}

/* クリック位置に応じた歪み量は --tx / --sk にJSが設定し、弾性のオーバーシュートで揺れ戻す */
.jelly-btn.is-squish {
  animation: jelly-squish .62s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes jelly-squish {
  0%   { transform: translateX(0) scale(1, 1) skewX(0deg); }
  28%  { transform: translateX(var(--tx, 0px)) scale(.8, 1.22) skewX(var(--sk, 0deg)); }
  52%  { transform: translateX(calc(var(--tx, 0px) * -.4)) scale(1.1, .9) skewX(calc(var(--sk, 0deg) * -.45)); }
  75%  { transform: translateX(calc(var(--tx, 0px) * .12)) scale(.96, 1.03) skewX(calc(var(--sk, 0deg) * .15)); }
  100% { transform: translateX(0) scale(1, 1) skewX(0deg); }
}

.hint { margin: 0; font-size: 13px; color: rgba(244, 245, 251, .5); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .jelly-btn { animation: none; }
  .jelly-btn.is-squish { animation: none; }
}

【JavaScript】
// ゼリーボタン: クリックした位置に応じて押した方向へ潰れ、弾性で揺れ戻る
(() => {
  const btn = document.querySelector('.jelly-btn');
  if (!btn) return; // null安全

  const squishFrom = (clientX) => {
    const rect = btn.getBoundingClientRect();
    const rel = rect.width ? (clientX - rect.left) / rect.width - 0.5 : 0; // -0.5..0.5
    const clamped = Math.max(-0.5, Math.min(0.5, rel));
    btn.style.setProperty('--tx', `${(clamped * 18).toFixed(1)}px`);
    btn.style.setProperty('--sk', `${(clamped * 22).toFixed(1)}deg`);

    // 連打してもそのたび弾めるよう、一度クラスを外してreflowしてから再付与する
    btn.classList.remove('is-squish');
    void btn.offsetWidth; // reflow
    btn.classList.add('is-squish');
  };

  btn.addEventListener('pointerdown', (e) => {
    const cx = typeof e.clientX === 'number' && e.clientX !== 0
      ? e.clientX
      : btn.getBoundingClientRect().left + btn.getBoundingClientRect().width / 2;
    squishFrom(cx);
  });

  // キーボード操作(Enter/Space)は中央から潰れる
  btn.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
      const rect = btn.getBoundingClientRect();
      squishFrom(rect.left + rect.width / 2);
    }
  });
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。