Orbiting Circles

const css = `.oc-spin {
  position: absolute; left: 50%; top: 50%;
  animation: oc-rotate var(--oc-dur) linear infinite;
  animation-delay: var(--oc-delay);
  animation-direction: var(--oc-dir);
}
/* контр-вращение — та же длительность и задержка, направление противоположное:
   сумма углов всегда ноль, узел не кувыркается */
.oc-keep {
  display: grid; place-items: center;
  width: var(--oc-size); height: var(--oc-size);
  margin: calc(var(--oc-size) / -2);
  border-radius: 999px;
  background: oklch(0.21 0.02 270);
  border: 1px solid oklch(0.34 0.02 270);
  animation: oc-rotate var(--oc-dur) linear infinite reverse;
  animation-delay: var(--oc-delay);
  animation-direction: var(--oc-keep-dir);
}
/* from задан ЯВНО: пока анимация жива, она полностью владеет углом, а базовый
   transform (инлайн, угол i/n) показывается только при animation: none —
   без него в reduced-motion все узлы встали бы кучей в угол 0 */
@keyframes oc-rotate { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .oc-spin, .oc-keep { animation: none; } }
`;
import { Children } from "react";
import type { CSSProperties, ReactNode } from "react";

export interface OrbitingCirclesProps {
  /** Радиус орбиты, px. */
  radius?: number;
  /** Секунд на полный оборот. */
  duration?: number;
  /** Крутить в обратную сторону. */
  reverse?: boolean;
  /** Размер узла на орбите, px. */
  iconSize?: number;
  /** Рисовать ли само кольцо орбиты. */
  ring?: boolean;
  /** Узлы, которые едут по орбите; раскладываются по кругу равномерно. */
  children?: ReactNode;
}

/**
 * Узлы едут по круговой орбите. Хитрость раскладки: у всех узлов ОДНА анимация
 * вращения, а угол каждого задаёт отрицательная animation-delay (−i/n цикла) —
 * ни одного вычисления угла ни в JS, ни в CSS. Контр-вращение с той же задержкой
 * держит узел вертикально. Reduced-motion / data-shot — узлы стоят на кольце.
 */
export function OrbitingCircles({
  radius = 110,
  duration = 20,
  reverse = false,
  iconSize = 40,
  ring = true,
  children,
}: OrbitingCirclesProps = {}) {
  const items = Children.toArray(children);
  const n = Math.max(1, items.length);
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
      <style href="motiva-orbiting-circles" precedence="medium">{css}</style>
      {ring && (
        <div
          style={{
            position: "absolute",
            left: "50%",
            top: "50%",
            width: radius * 2,
            height: radius * 2,
            margin: -radius,
            borderRadius: "999px",
            border: "1px dashed oklch(0.34 0.02 270 / 0.7)",
          }}
        />
      )}
      {items.map((child, i) => (
        <div
          key={i}
          className="oc-spin"
          style={
            {
              transform: `rotate(${i / n}turn)`,
              "--oc-dur": `${duration}s`,
              "--oc-delay": `${(-duration * i) / n}s`,
              "--oc-dir": reverse ? "reverse" : "normal",
              "--oc-keep-dir": reverse ? "normal" : "reverse",
              "--oc-size": `${iconSize}px`,
            } as CSSProperties
          }
        >
          {/* узел выносится на орбиту трансформом РОДИТЕЛЯ-вращателя: translate до и после
              rotate складываются в круговую траекторию без единого вычисления угла */}
          <div style={{ transform: `translateX(${radius}px)` }}>
            <div className="oc-keep" style={{ transform: `rotate(${-i / n}turn)` }}>
              {child}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}