Components / Motion / Orbit

Orbit beta

Icons in orbit around a center: two rings, two speeds, everything staying upright.

Preview 
<figure class="k-orbit" role="img" aria-label="Calendar, charts, the whole web and speed, orbiting the mold">
  <span class="core"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="4"/><rect x="10" y="10" width="4" height="4" rx="1.2"/></svg></span>
  <div class="ring r1"><span class="chip" style="left:50.0%;top:0.0%"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><rect x="3.5" y="5" width="17" height="16" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4"/></svg></span><span class="chip" style="left:50.0%;top:100.0%"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M6 20v-6M12 20V4M18 20v-9"/><path d="M3.5 20.5h17"/></svg></span></div>
  <div class="ring r2"><span class="chip" style="left:93.3%;top:25.0%"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.5 2.3 3.8 5.2 3.8 8.5s-1.3 6.2-3.8 8.5c-2.5-2.3-3.8-5.2-3.8-8.5s1.3-6.2 3.8-8.5Z"/></svg></span><span class="chip" style="left:6.7%;top:75.0%"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="square" stroke-linejoin="bevel" aria-hidden="true"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/></svg></span></div>
</figure>
/* KATA Orbit — rings that travel, chips that ride upright. */
.k-orbit{position:relative;width:252px;height:252px;margin:6px auto;font-family:var(--k-font);color:var(--k-ink)}
.k-orbit .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:18px;background:var(--k-ink);color:var(--k-bg);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 26px -10px rgba(16,24,40,.4)}
.k-orbit .ring{position:absolute;border:1px dashed var(--k-zinc-300);border-radius:50%;animation:k-orb-spin linear infinite}
.k-orbit .ring.r1{inset:26px;animation-duration:16s}
.k-orbit .ring.r2{inset:-2px;animation-duration:26s;animation-direction:reverse}
.k-orbit .chip{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:12px;background:var(--k-bg);border:1px solid var(--k-line);box-shadow:0 4px 12px rgba(16,24,40,.1);display:flex;align-items:center;justify-content:center;color:var(--k-ink-2);animation:k-orb-spin linear infinite reverse}
.k-orbit .r1 .chip{animation-duration:16s}
.k-orbit .r2 .chip{animation-duration:26s}
@keyframes k-orb-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.k-orbit .ring,.k-orbit .chip{animation:none}}

Installation

CLI

node kata-ui.mjs add orbit

Writes the part’s CSS into your project. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet.
  3. Copy the HTML where it belongs.

Usage

A hero device for "things that work around your product" — integrations, features, the catalog itself. Two rings is the composition limit; a third is a solar system. Chips counter-rotate so the glyphs never tilt: the ring travels, the icons ride.

Accessibility

The orbit is a picture of the list, so give the figure an aria-label naming what circles ("Integrations orbiting the workspace") and keep a real list nearby in the page. Under prefers-reduced-motion the rings stop mid-sky, upright and readable.

Anatomy

The public surface of this part, read from its own source. Class names are the API — the CSS tab above is the full contract.

.k-orbitclass
.coreclass
.ringclass
.r1class
.r2class
.chipclass
aria-labelARIA
aria-hiddenARIA

Related parts

Accordion Gallery beta

Five scenes in a row; the one you touch opens up and tells its caption.

galleryaccordionexpandpanelshover

Aurora beta

A slow wash of color behind a hero — the accent and the core, drifting under glass.

gradientheroambient

Beam border beta

A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.

borderglowhighlightcard

Blur In beta

Words arrive out of focus and sharpen one after another, like eyes adjusting.

blurrevealtextfocusentrance
Previous
Meteors