Switch Part 2

A toggle whose knob flips like a coin while it slides, on a 470×240 stage with a dark #13131C background. 4s loop that plays by itself: on at 1.0s, 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.
- Motion: p follows a damped spring (ω₀ = 14 rad/s, ζ = 0.6): p = x(time since the switch) when switching on, 1 − x(...) when switching off, x(t) = 1 − e^(−ζω₀t)·(cos ω_d t + (ζω₀/ω_d)·sin ω_d t), ω_d = ω₀√(1−ζ²). q = p clamped to 0–1.
- Track: 236×118px, fully rounded, centered. Color mixes from #262534 (off) to deep violet #2A2366 (on) by q. 2px border rgba(160,150,255, 0.1 + 0.35·q). Behind it, a violet #6E5BFF copy blurred with filter blur(14px), 6px lower, opacity 0.55·q.
- Knob: radius 51px, vertically centered, center at x = 59 + 118·q px from the track's left edge. Overshoot: the knob never leaves the track. Use q = p clamped to 0–1 for its position; when p overshoots by o = |p − q|, squash the knob instead (scaleX = 1 − 0.9·o, scaleY = 1 + 0.6·o) and move its center toward that end by 51px × (1 − scaleX), so it presses against the end and bounces back.
- Flip: angle a = π·q. Scale the knob by scaleX = max(|cos a|, 0.03) × lift and scaleY = lift, where lift = 1 + 0.14·sin a (it rises toward you mid-flip). While a < π/2 show the front face, after that the back face. Over either face, draw a dark overlay rgba(10,8,30, 0.45 × (1 − |cos a|)) so it darkens when edge-on.
- Front (off) face: radial gradient #F4F3FB (light point 15px up-left of center) → #C9C7DC, drop shadow black 40% (canvas shadowBlur 12, 3px down). Symbol "O": a ring of radius 18px, 9.7px stroke, #8C8AA8.
- Back (on) face: diagonal gradient violet #6E5BFF (top-left) → cyan #38C6FF (bottom-right), cyan glow rgba(56,198,255,0.7) (canvas shadowBlur 26). Symbol "I": a white vertical line from 20px above to 20px below the center, 10.75px wide, round caps.
- 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.