A pill toggle where the knob stretches to fill the entire track mid-transit like a blob of mercury, then snaps back to a circle at the other end. Keyframe animates left + width + border-radius simultaneously for the liquid effect.
Goal: Create a "Liquid" toggle animation.
Visual behavior: A 52×30px pill toggle. The knob is absolutely positioned (not in flexbox). On toggle, a CSS keyframe simultaneously animates left, width, and border-radius — the knob stretches from a 22px circle at one end to a 44px pill that fills the track at 40%, then snaps back to a 22px circle at the other end. This creates a mercury/liquid blob effect. The track uses a sky-blue tinted border when on. The knob is a sky-blue gradient when on, translucent white when off.
Technique: React useState for on/off. animKey re-mounts the knob span to restart animation. direction state picks the keyframe name. No library dependencies.
Accessibility: role="switch" + aria-checked. Animation skipped 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.