Switch Part 1

A toggle whose knob moves like a drop of liquid, on a 470×240 stage with a dark #13131C background. 4s loop that plays by itself: it switches on at 1.0s and off at 3.0s (times are seconds from the loop start). The loop is seamless: whatever is still settling from the 3.0s switch carries on into 0–1s of the next loop, so it is simply a switch every 2s.
- Track: 236×118px, fully rounded, centered. Off color #262534; on top, a horizontal gradient violet #6E5BFF → cyan #38C6FF whose opacity = the on-amount (clamped 0–1). Under the track, the same gradient with a Gaussian blur of 10.6px (filter blur(10.6px)) at 75% × on-amount as a glow. 1px inner border, white 9%.
- Motion: on-amount p follows a damped spring (ω₀ = 16 rad/s, ζ = 0.5, settles in about 0.6s with a small overshoot): p = x(time since the switch) when switching on, 1 − x(...) when switching off, where x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²).
- Knob: white circle, radius 45px, fill radial gradient #FFFFFF (12px up-left of the knob center) → #DCDCF0 (at radius 60px), soft drop shadow (black 35%, canvas shadowBlur 10, 3px down). Its center moves from 59px to 177px from the track's left edge (x = 59 + 118·p), vertically centered.
- Stretch: while moving, the knob stretches along the track: scaleX = 1 + s, scaleY = 1/√(1 + s), with s = min(|dp/dt| × 0.055, 0.55).
- Droplets: two smaller circles (radius 27px and 18px) follow the same spring but 0.045s and 0.095s behind, so they trail the knob. They do not stretch, but follow the same end rules as the knob. Draw order: smallest droplet, middle droplet, knob.
- Gooey merge: draw the knob and droplets in white on an offscreen canvas with blur(7.7px), then threshold the alpha (alpha on a 0–1 scale: new alpha = clamp(alpha × 26 − 11, 0, 1)) and fill with the knob gradient, so the three blobs melt together like liquid.
- Squish at the ends: when p overshoots past 1 (or below 0) by "over", the knob squashes against the end: scaleX × (1 − 1.6·over), scaleY × (1 + 1.1·over). At all times (also while stretched), clamp the center so the knob's edge never comes closer than 14px to either end of the track: x = clamp(59 + 118·clamp(p, 0, 1), 14 + 45·scaleX, 222 − 45·scaleX).
- Tap indicator (draw it on top): a 23px-radius circle, fill white 38%, 3.5px white border, soft dark shadow (black 35%, canvas shadowBlur 10). Time a = seconds relative to each switch (negative = before). From a = −0.42 to −0.1 it scales 125% → 100% (ease-out cubic) while fading in over the first 0.18s; from −0.1 to 0 it presses down to 80% (linear); from 0 to 0.2 it grows back to 100% (ease-out cubic); its opacity stays 1 until a = 0.12 and fades to 0 by a = 0.37. Ripple: from a = 0 to 0.4 a 3px white ring grows from radius 23px to 52px, opacity 0.7 → 0. It sits over the center of the track.