Gradient Track
No library Intermediate
When active, the track background runs a drifting violet→indigo→blue→cyan gradient on a loop, making the track itself feel alive. The thumb glows on active state. No dependencies.
When active, the track background runs a drifting violet→indigo→blue→cyan gradient on a loop, making the track itself feel alive. The thumb glows on active state. No dependencies.
Goal: Create a "Gradient Track" toggle animation.
Visual behavior: A pill toggle (52×30px). Off: dark/muted track, standard white thumb. On: the track background runs a drifting left-to-right gradient (violet → indigo → blue → cyan, background-size 300% 100%) animated on a 2.5s loop via background-position keyframes, making the track feel alive. The white thumb also gains a soft white glow (box-shadow) in the active state.
Technique: CSS @keyframes on background-position (0% 50% ↔ 100% 50%). A data attribute (data-on) added to the button in the active state activates the animation via a CSS attribute selector. React useState controls the state. prefers-reduced-motion: animation stopped, solid indigo fallback applied.
Accessibility: role="switch", aria-checked. Gradient animation replaced with solid colour 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.