Layered status rings

Several channels on one radial object, stacked in depth: the one in front is the one you read, and an alert moves its channel to the front.

A home, a car or a server has channels that compete for attention: climate, lights, security. As separate widgets they split the user's focus. Here they share one object, and the order says what matters now.

How it's built

  • .depth on the .gravity-spot turns its rings into layers. Each ring gets a data-depth, and .layer-front marks the one in front.
  • All three channels use orbit-6. --o-depth-grow: .42 makes each step back 42% larger (1×, 1.42×, 1.84×), so no two rings share a radius, and the perspective compensation keeps those sizes.
  • Climate is a single <o-progress variant="stroke">. Lights and Security are six <o-arc> segments each, spaced with --o-gap and thinned with --o-size-ratio.
  • Color belongs to the alert: the failing segment, the ripple and the value in the center turn coral, and nothing else is painted.
  • Order is data. The script keeps the base order, puts the alerting channel first, and writes data-depth from that list. The depth transition is Orbit's own.

Customization

  • --o-depth-step (default -110) changes the spacing in z, and --o-perspective (default 900) the perspective.
  • --o-depth-compensate: 0 lets farther layers look smaller.
  • To hide layers past the third, set opacity: 0 on [data-depth="3"] and above, and show a count instead. Three visible layers is about what people read at a glance.

Related