Animated Toggle Switches

Three opinionated toggle studies — a celestial sun-to-moon pill (rotating orb, twinkling stars, drifting clouds), a neumorphic dial that blooms into a glowing rose-gold gemstone with cascading indicator dots and a particle burst, and an industrial power button that boots a 12-LED ring in clockwise sequence — each built around a real input[type=checkbox] with appearance: none so keyboard, focus-visible, and assistive-tech state all come from the native element.

toggleswitchcheckboxappearance-nonecelestialneumorphicled-boot

Native checkbox · appearance: none track + thumb

Animated Toggle Switches

Three opinionated toggle studies — Day / Night (a celestial pill with sun, moon, stars, clouds, and rays), Neumorphic Bloom (a tactile pressed-in dial that transforms into a glowing pink gemstone), and Power Glow (an industrial terminal that boots up its 12-LED ring in sequence). Each one is built around a real <input type="checkbox"> with appearance: none so keyboard, screen reader, and focus semantics still come from the native element.

Celestial · sun, moon, stars, clouds

Day / Night

A pill that holds an entire sky. The orb slides + rotates 360° from a glowing sun into a craterd moon, eight rays rotate behind it, two clouds drift across the day side, and ten stars twinkle on the night side. Tap to flip the whole composition; the surrounding stage tints in lockstep.

Tactile · pressed surface, dial transform

Neumorphic Bloom

A soft, pressed-in dial. The knob carries grip lines like a real rotary control — until it flips, when it transforms into a glowing pink gemstone with a centred LED ring and three indicator dots that bloom in sequence (0.4s / 0.5s / 0.6s).

Industrial · 12-LED boot sequence

Power Glow

A dormant terminal awakening. Twelve LEDs ignite in clockwise sequence (50ms staggered delays), the core flushes from charcoal to deep emerald, the icon turns into glowing green, and a soft aura ring pulses outward. A numeric readout counts 000 → 100 in tandem.

Celestial

/* A pill that flips an entire sky: orb translateX + 360° rotation, eight rays, ten stars, two drifting clouds, four moon craters. */
.dn {
  width: 220px; height: 92px;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #FEC57A 0%, #F59E0B 45%, #FB923C 100%);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.dn.on {
  background: linear-gradient(160deg, #1E1B4B 0%, #312E81 50%, #3730A3 100%);
}

/* Sun → moon orb: slides 128px AND rotates 360°. */
.dn .orb {
  position: absolute; width: 76px; height: 76px; top: 8px; left: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #FFF8DC 0%, #FBBF24 50%, #D97706 100%);
  transition: transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 1s ease;
}
.dn.on .orb {
  transform: translateX(128px) rotate(360deg);
  background: radial-gradient(circle at 32% 30%, #F8FAFC 0%, #E2E8F0 55%, #94A3B8 100%);
}

/* 8 rays rotate behind the sun, fade + scale-out on .on */
.dn .rays { animation: spin 60s linear infinite; transition: opacity 0.6s, transform 1s; }
.dn.on .rays { opacity: 0; transform: translateX(128px) scale(0.5); }

/* Stars only visible on .on, twinkle with staggered delays */
.dn .star { opacity: 0; transition: opacity 0.9s ease 0.4s; }
.dn.on .star { opacity: 1; animation: twinkle 2.6s infinite ease-in-out; }

/* Moon craters fade in 0.6s after the slide */
.dn .crater { opacity: 0; transition: opacity 0.7s ease 0.6s; }
.dn.on .crater { opacity: 1; }

@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@keyframes spin { to { transform: rotate(360deg); } }