Orbiting Circles

---
/**
 * OrbitingCircles — the children orbit the centre of their parent and stay
 * upright. One animation per item: `rotate(a) translate(r) rotate(−a)` from
 * a to a + 360°, where a is the item's start angle from its index — so the
 * icon turns around the centre without turning itself, on the compositor,
 * with no wrapper. The start angles come from :nth-child, the count from
 * :has(), so nothing is passed twice; `count` overrides when the children
 * are not the whole ring. Two instances at two radii are two rings;
 * `reverse` sends one the other way. Fills its positioned parent.
 */
import type { HTMLAttributes } from 'astro/types';

interface Props extends HTMLAttributes<'div'> {
  /** Orbit radius in px. */
  radius?: number;
  /** Seconds per revolution. */
  duration?: number;
  /** Run counter-clockwise. */
  reverse?: boolean;
  /** Draw the orbit line. */
  path?: boolean;
  /** Number of items on the ring; default counted from the children (up to 12). */
  count?: number;
  /** Item size in px (each child is a square cell of this size). */
  size?: number;
  /** Orbit line colour. */
  color?: string;
}

const { radius = 100, duration = 20, reverse = false, path = true, count, size = 40, color = 'var(--ma-edge)', class: className, style, ...rest } = Astro.props;
const inline = [`--ma-orbit-r:${radius}px`, `--ma-orbit-dur:${duration}s`, `--ma-orbit-size:${size}px`, `--ma-orbit-color:${color}`, count ? `--ma-orbit-n:${count}` : '', typeof style === 'string' ? style : ''].filter(Boolean).join(';');
---

<div class:list={['ma-orbit', className]} data-ma-orbit data-path={path ? '' : undefined} data-reverse={reverse ? '' : undefined} style={inline} {...rest}>
  <slot />
</div>

<style is:global>
  @layer components {
    :where(.ma-orbit) {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      pointer-events: none;
    }
    :where(.ma-orbit[data-path])::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: calc(var(--ma-orbit-r, 100px) * 2);
      height: calc(var(--ma-orbit-r, 100px) * 2);
      translate: -50% -50%;
      border: 1px solid var(--ma-orbit-color, var(--ma-edge));
      border-radius: 50%;
    }
    /* count from the children when not given — the ring with n children matches :has(> :nth-child(n):last-child) */
    :where(.ma-orbit:has(> :nth-child(1):last-child)) { --ma-orbit-n: 1; }
    :where(.ma-orbit:has(> :nth-child(2):last-child)) { --ma-orbit-n: 2; }
    :where(.ma-orbit:has(> :nth-child(3):last-child)) { --ma-orbit-n: 3; }
    :where(.ma-orbit:has(> :nth-child(4):last-child)) { --ma-orbit-n: 4; }
    :where(.ma-orbit:has(> :nth-child(5):last-child)) { --ma-orbit-n: 5; }
    :where(.ma-orbit:has(> :nth-child(6):last-child)) { --ma-orbit-n: 6; }
    :where(.ma-orbit:has(> :nth-child(7):last-child)) { --ma-orbit-n: 7; }
    :where(.ma-orbit:has(> :nth-child(8):last-child)) { --ma-orbit-n: 8; }
    :where(.ma-orbit:has(> :nth-child(9):last-child)) { --ma-orbit-n: 9; }
    :where(.ma-orbit:has(> :nth-child(10):last-child)) { --ma-orbit-n: 10; }
    :where(.ma-orbit:has(> :nth-child(11):last-child)) { --ma-orbit-n: 11; }
    :where(.ma-orbit:has(> :nth-child(12):last-child)) { --ma-orbit-n: 12; }
    :where(.ma-orbit > :nth-child(1)) { --ma-orbit-i: 0; }
    :where(.ma-orbit > :nth-child(2)) { --ma-orbit-i: 1; }
    :where(.ma-orbit > :nth-child(3)) { --ma-orbit-i: 2; }
    :where(.ma-orbit > :nth-child(4)) { --ma-orbit-i: 3; }
    :where(.ma-orbit > :nth-child(5)) { --ma-orbit-i: 4; }
    :where(.ma-orbit > :nth-child(6)) { --ma-orbit-i: 5; }
    :where(.ma-orbit > :nth-child(7)) { --ma-orbit-i: 6; }
    :where(.ma-orbit > :nth-child(8)) { --ma-orbit-i: 7; }
    :where(.ma-orbit > :nth-child(9)) { --ma-orbit-i: 8; }
    :where(.ma-orbit > :nth-child(10)) { --ma-orbit-i: 9; }
    :where(.ma-orbit > :nth-child(11)) { --ma-orbit-i: 10; }
    :where(.ma-orbit > :nth-child(12)) { --ma-orbit-i: 11; }
    :where(.ma-orbit > *) {
      position: absolute;
      left: 0;
      top: 0;
      display: grid;
      place-items: center;
      width: var(--ma-orbit-size, 40px);
      height: var(--ma-orbit-size, 40px);
      margin: calc(var(--ma-orbit-size, 40px) / -2);
      pointer-events: auto;
      /* the start angle, from the index and the count */
      --ma-orbit-a: calc(var(--ma-orbit-i, 0) * 360deg / var(--ma-orbit-n, 1));
      transform: rotate(var(--ma-orbit-a)) translate(var(--ma-orbit-r, 100px)) rotate(calc(-1 * var(--ma-orbit-a)));
      will-change: transform;
      animation: ma-orbit var(--ma-orbit-dur) linear infinite;
    }
    :where(.ma-orbit[data-reverse] > *) {
      animation-direction: reverse;
    }
    @media (prefers-reduced-motion: reduce) {
      :where(.ma-orbit > *) {
        animation: none;
      }
    }
  }

  @keyframes ma-orbit {
    from {
      transform: rotate(var(--ma-orbit-a)) translate(var(--ma-orbit-r, 100px)) rotate(calc(-1 * var(--ma-orbit-a)));
    }
    to {
      transform: rotate(calc(var(--ma-orbit-a) + 360deg)) translate(var(--ma-orbit-r, 100px)) rotate(calc(-1 * var(--ma-orbit-a) - 360deg));
    }
  }
</style>