Left = OFF (grey track #EFEFEF, knob left). Right = ON (red track #CC0000, knob right). Click either — the knob glides on a spring (stiffness 500 · damping 32) while the track cross-fades. No Framer service. Motion (Framer Motion) via CDN.
// React + Motion (no Framer hosting) — the exact pattern
// npm i motion (motion.dev = Framer Motion's successor)
import { motion } from "motion/react";
const spring = { type: "spring", stiffness: 500, damping: 32 };
function Drams037({ on, onToggle }) {
return (
<motion.button role="switch" aria-checked={on} onClick={onToggle}
animate={{ backgroundColor: on ? "#e76a2e" : "#efefef" }}
transition={spring}
style={{ width: 132, height: 60, borderRadius: 999 }}
>
<motion.span
animate={{ x: on ? 72 : 0 }}
transition={spring}
style={{ width: 50, height: 50, borderRadius: "50%", background: "#fff" }}
/>
</motion.button>
);
}
// Track animates backgroundColor; knob animates x — same spring, one gesture.
// whileTap={{ scale: 0.97 }} adds press squish. Respect reduced motion:
// const reduce = useReducedMotion(); transition={reduce ? {duration:0} : spring}