Lights

No dependencies
Code format
React + Tailwind
import type { CSSProperties } from 'react';

const css = `
  @keyframes toggle-lights-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
  .toggle-lights { display: inline-flex; align-items: center; gap: 14px; color: light-dark(#42454c, #e5e6e9); font-size: 15px; cursor: pointer; user-select: none; }
  .toggle-lights__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
  .toggle-lights__art { display: block; width: 152px; height: 52px; overflow: visible; border-radius: 8px; }
  .toggle-lights__input:focus-visible + .toggle-lights__art { outline: 2px solid light-dark(#5f626a, #a7abb2); outline-offset: 4px; }
  .toggle-lights__plug { fill: light-dark(#6d7179, #7d8087); }
  .toggle-lights__prong { stroke: light-dark(#5f626a, #a7abb2); stroke-width: 1.4; }
  .toggle-lights__wire { fill: none; stroke: light-dark(#cbced3, #393c41); stroke-width: 1.4; }
  .toggle-lights__cap { fill: light-dark(#cbced3, #393c41); }
  /* Lit in order from the plug end and put out from the far end, so the current seems to travel. */
  .toggle-lights__bulb { fill: light-dark(#dbdde1, #2e3035); transition: fill 0.2s calc((7 - var(--i)) * 55ms), filter 0.2s calc((7 - var(--i)) * 55ms); }
  .toggle-lights__halo { fill: light-dark(#373a40, #f1f2f3); opacity: 0; filter: blur(3px); transition: opacity 0.2s calc((7 - var(--i)) * 55ms); }
  .toggle-lights__input:checked + .toggle-lights__art .toggle-lights__bulb { fill: light-dark(#373a40, #f1f2f3); filter: drop-shadow(0 0 2px light-dark(#373a40, #f1f2f3)); transition-delay: calc(var(--i) * 90ms); }
  .toggle-lights__input:checked + .toggle-lights__art .toggle-lights__halo { opacity: 0.35; transition-delay: calc(var(--i) * 90ms); }
  .toggle-lights__input:checked + .toggle-lights__art .toggle-lights__twinkle { animation: toggle-lights-twinkle var(--t) ease-in-out calc(0.9s + var(--i) * 0.13s) infinite; }
  @media (prefers-reduced-motion: reduce) {
    .toggle-lights__bulb, .toggle-lights__halo { transition: none; }
    .toggle-lights__input:checked + .toggle-lights__art .toggle-lights__twinkle { animation: none; }
  }
`;

// The wire sags between the plug and the hook; each bulb hangs from it at its own angle.
const WIRE = 'M14 20Q46 44 78 26Q110 10 146 22';
const BULBS = [
  { x: 26, y: 26.6, a: 22 },
  { x: 40, y: 31, a: 12 },
  { x: 54, y: 31.6, a: -4 },
  { x: 68, y: 28.4, a: -18 },
  { x: 82, y: 24.2, a: -22 },
  { x: 96, y: 20.4, a: -16 },
  { x: 110, y: 18.4, a: -4 },
  { x: 124, y: 18.6, a: 8 },
];

export function LightsToggle() {
  return (
    <>
      <style>
        {css}
      </style>
      <label className="toggle-lights">
        <input className="toggle-lights__input" type="checkbox" role="switch" />
        <svg className="toggle-lights__art" viewBox="0 0 150 52" aria-hidden="true">
          <path className="toggle-lights__wire" d={WIRE} />
          <path className="toggle-lights__prong" d="M2 18H6M2 22H6" />
          <rect className="toggle-lights__plug" x="5" y="15" width="10" height="10" rx="2.5" />
          <circle className="toggle-lights__cap" cx="146" cy="22" r="2.5" />
          {BULBS.map((b, i) => (
            <g key={b.x} transform={`translate(${b.x} ${b.y}) rotate(${b.a})`} style={{ '--i': i, '--t': `${1.3 + ((i * 5) % 7) * 0.17}s` } as CSSProperties}>
              <g className="toggle-lights__twinkle">
                <circle className="toggle-lights__halo" cx="0" cy="8" r="7" />
                <path className="toggle-lights__bulb" d="M0 3C3 3 4 7 3.4 9.5C3 11.5 1.5 13 0 13C-1.5 13-3 11.5-3.4 9.5C-4 7-3 3 0 3Z" />
              </g>
              <rect className="toggle-lights__cap" x="-2" y="-0.5" width="4" height="4" rx="1" />
            </g>
          ))}
        </svg>
        <span>Lights</span>
      </label>
    </>
  );
}

Free to use in any project, commercial included. MIT-0, no attribution required. Licence

Install with shadcn

npx shadcn@latest add @movin/toggle-lights
Source on GitHub

About this component

A string of fairy lights: switching on lights the bulbs one after another from the plug, then they twinkle; off puts them out from the far end, so the current seems to travel.

Dependencies
None
Difficulty
Beginner
Triggers
click, state change, glow, delay stagger, loop
Techniques
keyframes, stagger, css variables, svg
Reduced motion
Respected
Theme
Light and dark (follows your page's color-scheme)

A native checkbox with role="switch" inside a <label>, so Space toggles it and the visible text names it; :focus-visible on the input outlines the drawing, which is aria-hidden. Under prefers-reduced-motion the bulbs light together and do not twinkle.

More toggles

See all
Periscope
Puffer
Sail
Shades