Tailwind UI Pattern Registry for humans and agents

orbit rotation animation ring integration circular icons integration showcase with rotating logos technology stack visualization feature orbit around a central product icon works-with-everything integration section integration grids feel static and forgettable orbit animations usually require Framer Motion or JS want rotating orbit without a complex CSS hack

Orbit Ring

Fetch snippet JSON: curl https://webspire.de/snippets/interactions/orbit-arm.json
Format
Preview
Stage Background
Customize

Quick Start

<div class="orbit"><div class="orbit-ring"></div><div class="orbit-arm"><div class="orbit-item">Icon</div></div></div>

Details

Tailwind
v4.x
Browser
baseline-2024
A11y
prefers-reduced-motion
Size
1296 bytes · 45 lines
Custom Properties
--orbit-size--orbit-duration
Classes
.orbit.orbit-ring.orbit-arm.orbit-item
orbit rotation animation ring integration circular icons

Place .orbit-arm children inside .orbit. Each arm holds one .orbit-item at the top. Arms 2–4 receive animation-delay offsets that distribute them evenly around the ring (90°, 180°, 270°). Items counter-rotate at the same speed so they stay upright while orbiting.

Single-ring integration orbit

<div class="orbit" style="--orbit-size: 16rem; --orbit-duration: 14s;">
  <div class="orbit-ring"></div>

  <div class="orbit-arm">
    <div class="orbit-item">
      <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow text-sm font-bold">TS</div>
    </div>
  </div>

  <div class="orbit-arm">
    <div class="orbit-item">
      <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow text-sm font-bold">Py</div>
    </div>
  </div>

  <div class="orbit-arm">
    <div class="orbit-item">
      <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow text-sm font-bold">Go</div>
    </div>
  </div>

  <div class="orbit-arm">
    <div class="orbit-item">
      <div class="flex h-10 w-10 items-center justify-center rounded-xl bg-white shadow text-sm font-bold">Nx</div>
    </div>
  </div>

  <!-- Center icon -->
  <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
    <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-indigo-600 text-white font-bold">W</div>
  </div>
</div>

Nested dual-ring orbit

Stack two .orbit elements with different sizes and durations for a multi-ring effect:

<div class="relative mx-auto" style="width: 20rem; height: 20rem;">
  <div class="orbit absolute inset-4" style="--orbit-duration: 10s;">
    <div class="orbit-ring"></div>
    <div class="orbit-arm"><div class="orbit-item">A</div></div>
    <div class="orbit-arm"><div class="orbit-item">B</div></div>
  </div>
  <div class="orbit absolute inset-0" style="--orbit-duration: 18s;">
    <div class="orbit-ring"></div>
    <div class="orbit-arm"><div class="orbit-item">C</div></div>
    <div class="orbit-arm"><div class="orbit-item">D</div></div>
  </div>
  <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">Center</div>
</div>