Glow
No library Beginner
Toggle that emits a soft halo glow from the track when active. Box-shadow transitions in on activation, fades out on deactivation.
Toggle that emits a soft halo glow from the track when active. Box-shadow transitions in on activation, fades out on deactivation.
Goal: Create a "Glow" toggle switch animation.
Visual behavior: A pill-shaped toggle. When switched on, the track lights up with a soft halo — a double-layered box-shadow (a tight ring + a diffuse glow). When switched off, the glow fades out smoothly. The thumb slides with a spring overshoot as in a standard toggle.
Technique:
- Track: transitions background-color and box-shadow together over 200–300ms
- Active box-shadow: "0 0 0 4px rgba(color, 0.25), 0 0 16px rgba(color, 0.4)"
- Inactive box-shadow: "0 0 0 0 transparent" (animates the spread radius to zero)
- Thumb: translateX with cubic-bezier(0.34, 1.56, 0.64, 1) spring easing
Accessibility: role="switch", aria-checked={on}. Under prefers-reduced-motion, disable transitions and box-shadow animation.
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.