Skip to content
Orbit
Orbit 2 is out, with Orbit Kit 2 and a new site: read the Orbit 2 docs or see what changed. These docs stay here for Orbit 1.x.

Layered status rings — 3D depth example

A home, a car or a server has several channels that compete for attention: climate, lights, security. Showing them as separate widgets splits the user’s focus. Here they share one radial object, stacked in depth: the channel in front is the one you read, the others wait behind it, larger and dimmer. When an alert arrives, its channel moves to the front; when it is resolved, the order returns on its own.

Examples include the current Orbit stylesheet and runtime. Get both files for your project.

How it works

Section titled “How it works”
  • .depth on the .gravity-spot turns its rings into layers. Each ring gets a data-depth, and .layer-front marks the one in front.
  • Same orbit, different sizes. All three channels use orbit-4. --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 in both flat and 3D views.
  • Progress or segments. Climate is a single <o-progress>; Lights and Security are six <o-arc> segments each, separated with --o-gap and thinned with --o-size-ratio. Only the failing segment changes color.
  • Color belongs to the alert. The ring, the failing segment and the value in the center turn red. Nothing else is painted, so the hierarchy still reads without color.
  • The ripple is a pseudo-element on the alerting ring, shown only while that ring is in front.
  • Order is data. The script keeps a base order and an alert order and writes data-depth from the array. The depth transition is Orbit’s default.

Customization

Section titled “Customization”

Change the spacing in z with --o-depth-step (default -110) and the perspective with --o-perspective (default 900).

Let farther layers look smaller with --o-depth-compensate: 0.

Hide layers past the third by setting opacity: 0 on [data-depth="3"] and above, and show a count instead. Three visible layers is the most people can read at a glance.

Section titled “Related”