On hover, the button squishes and stretches with a decaying scaleX/scaleY oscillation that simulates rubber or jello physics — starting with a large deformation and settling back to rest over 600ms. Re-triggers cleanly on every mouseenter. No dependencies.
Goal: Create a "Jello Wobble" button animation.
Visual behavior: On each hover, the button squishes and stretches like rubber — scaleX and scaleY alternate between wide/short and narrow/tall with decreasing amplitude, settling back to normal in ~600ms. The effect looks like the button has elastic physics. It fires once per mouseenter and re-triggers if you hover again.
Technique: Inject a @keyframes btn-jello rule with 9 keyframe steps that alternate scaleX and scaleY (e.g. 0% scale(1) → 10% scaleX(1.18) scaleY(0.82) → 22% scaleX(0.88) scaleY(1.12) ... decaying toward scale(1)). Apply the animation via a data attribute: on mouseenter, call btn.removeAttribute('data-wobbling'), force a reflow (void btn.offsetWidth), then btn.setAttribute('data-wobbling', ''). The CSS rule [data-btn="jello"][data-wobbling] applies the 600ms animation with forwards fill. Use a useRef for the button. Set transformOrigin: 'center'.
Accessibility: Under prefers-reduced-motion, the animation is not applied.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.