LED knob

A knob with discrete steps: eleven LEDs, one per position, lit up to the current one, and a pointer that snaps between them.

Drag, scroll or use the arrow keys. The knob snaps to the nearest step.

How it's built

  • Eleven satellites on orbit-11 with range-290 from-215 fit-range: the first and last sit on the two ends of the sweep, the rest are spread evenly between them.
  • A lit LED is a class on its satellite. :nth-child(n + 9) and :nth-child(11) turn the top steps amber and coral.
  • The knob is a satellite on orbit-0 with a .gravity-spot inside: its cap is a centered satellite of that inner system, and its pointer a .vector on orbit-9.
  • The pointer's ring turns with rotate, 29° per step, the same spacing as the LEDs. A springy easing makes each step snap.

Related