Orbit animation

import { motion, useReducedMotion } from 'motion/react';

const OUTER = ['Stripe', 'GitHub', 'Slack', 'Figma'];
const INNER = ['Resend', 'Sentry', 'Linear'];

export function IntegrationsOrbit() {
  return (
    <div className='relative grid size-80 place-items-center'>
      <Ring tools={OUTER} radius={140} seconds={32} direction={1} />
      <Ring tools={INNER} radius={80} seconds={20} direction={-1} />
      <img src='/logo.svg' alt='Layerwise' className='relative size-14' />
    </div>
  );
}

type RingProps = {
  tools: string[];
  radius: number;
  seconds: number;
  direction: 1 | -1;
};

function Ring({ tools, radius, seconds, direction }: RingProps) {
  const reduceMotion = useReducedMotion();
  // Linear and endless, so the ring never pauses between laps.
  const loop = { duration: seconds, ease: 'linear', repeat: Infinity } as const;
  const turn = (sign: number) =>
    reduceMotion ? undefined : { rotate: sign * 360 };

  return (
    <motion.div
      animate={turn(direction)}
      transition={loop}
      className='absolute rounded-full border border-dashed'
      style={{ width: radius * 2, height: radius * 2 }}
    >
      {tools.map((tool, i) => {
        const angle = (i / tools.length) * 2 * Math.PI;
        const [x, y] = [Math.cos(angle) * radius, Math.sin(angle) * radius];
        return (
          <div
            key={tool}
            className='absolute -translate-1/2'
            style={{ left: radius + x, top: radius + y }}
          >
            {/* Spin the other way at the same speed to stay upright. */}
            <motion.img
              animate={turn(-direction)}
              transition={loop}
              src={`/logos/${tool.toLowerCase()}.svg`}
              alt={tool}
              className='size-10 rounded-full border bg-background p-2'
            />
          </div>
        );
      })}
    </motion.div>
  );
}