Power
No library Intermediate
A standalone 56px circular power button with no track. Off: dark neumorphic inset. On: radial green gradient with a multi-layer glow. Every click spins the power icon 360° and fires an outward ripple ring.
A standalone 56px circular power button with no track. Off: dark neumorphic inset. On: radial green gradient with a multi-layer glow. Every click spins the power icon 360° and fires an outward ripple ring.
Goal: Create a "Power" toggle animation.
Visual behavior: A single 56×56px circular power button — no pill track. Off state: dark charcoal (#1a1a1a) with heavy inset box-shadow (neumorphic depth). On state: radial gradient from bright green center (#4ade80) to deep green (#16a34a) with a multi-layer outward glow. The SVG power icon (circle arc + vertical stem) is always visible but dim when off and bright white when on. Every click triggers: (1) a 360° spin of the icon via CSS keyframe, (2) an outward ripple ring that scales from 1 to 1.9 and fades.
Technique: React useState tracks on/off. useEffect injects CSS keyframes for spin and ripple. animKey and rippleKey state vars force re-mounting of animated spans to restart animations on each click. No library dependencies.
Accessibility: role="switch" + aria-checked + aria-label="Power". Animations skipped 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.