Orbiting Circles

`<pura-orbiting-circles>` sends satellites around a circular orbit encircling its slotted centre content, in the style of Magic UI's Orbiting Circles. The motion is pure CSS: one `@keyframes` rotates each satellite's arm, and a negative `animation-delay` spreads them evenly around the ring so the orbit is filled from the first frame, with no animation runtime. Set `count`, `duration`, and `reverse`, and theme with `--pura-orbit-size`, `--pura-orbit-radius`, `--pura-orbit-dot`, `--pura-orbit-color`, and `--pura-orbit-glow`. Under reduced motion the satellites come to rest via the base reset. It registers in `window.__puraOrbitingCircles` by `data-pura-id` for agent enumeration.

Preview

<pura-orbiting-circles count="6" duration="16">
  <img src="/logo.svg" alt="" width="48" height="48">
</pura-orbiting-circles>

<!-- Reverse, custom radius -->
<pura-orbiting-circles count="4" reverse style="--pura-orbit-radius: 110px;">
  <span>Core</span>
</pura-orbiting-circles>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/orbiting-circles.js"></script>

import "./pura/lib/orbiting-circles.js";