Squish
No library Intermediate
The thumb stretches horizontally as it slides, peaking at 1.5× width mid-travel before snapping back to a circle at the destination.
LLM Prompt
Goal: Create a "Squish" toggle switch animation.
Visual behavior: A pill-shaped toggle. When clicked, the white thumb stretches horizontally as it travels — reaching ~1.5× its width at the midpoint — then snaps back to a circle when it lands. The squish peaks at the halfway point, giving it a satisfying elastic feel.
Technique:
- Two @keyframe animations: toggle-squish-on (left → stretch mid → right) and toggle-squish-off (right → stretch mid → left)
- Both use scaleX on the thumb: 1 → 1.5 → 1, while translateX covers the full travel distance
- The thumb has transformOrigin: "center" so the stretch expands equally on both sides
- Re-mount the span with a React key change on each click to restart the animation
- Track the direction (on/off) to select the correct keyframe
- Border-radius ~30% makes the stretched shape look more like a pill than an oval
Accessibility: role="switch", aria-checked={on}. Animation disabled under prefers-reduced-motion.
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.