Icon cloud

import { useEffect, useRef, type ReactNode } from 'react';
import { useInView, useReducedMotion } from 'motion/react';

const RADIUS = 130; // px
const SPIN = 0.35; // radians per second of automatic rotation

export function IconCloud({ icons }: { icons: ReactNode[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref);
  const reduceMotion = useReducedMotion();
  const view = useRef({ yaw: 0, pitch: -0.3, dragging: false });

  useEffect(() => {
    if (!inView) return; // no work while off screen
    const tiles = Array.from(ref.current!.children) as HTMLElement[];
    // Even spacing on a sphere: a Fibonacci spiral from pole to pole.
    const points = tiles.map((_, i) => {
      const y = 1 - (2 * (i + 0.5)) / tiles.length;
      const ring = Math.sqrt(1 - y * y);
      const theta = i * Math.PI * (3 - Math.sqrt(5));
      return { x: Math.cos(theta) * ring, y, z: Math.sin(theta) * ring };
    });
    let frame = 0;
    let last = performance.now();

    const paint = (now: number) => {
      const v = view.current;
      if (!reduceMotion && !v.dragging) v.yaw += (SPIN * (now - last)) / 1000;
      last = now;
      tiles.forEach((tile, i) => {
        // Rotate around the vertical axis, then tilt.
        const p = points[i]!;
        const x = p.x * Math.cos(v.yaw) + p.z * Math.sin(v.yaw);
        const z = p.z * Math.cos(v.yaw) - p.x * Math.sin(v.yaw);
        const y = p.y * Math.cos(v.pitch) - z * Math.sin(v.pitch);
        const depth = (p.y * Math.sin(v.pitch) + z * Math.cos(v.pitch) + 1) / 2;
        // Front icons big and solid; back icons small, faded, and beneath.
        tile.style.transform = `translate(${x * RADIUS}px, ${y * RADIUS}px) scale(${0.5 + depth * 0.6})`;
        tile.style.opacity = String(0.15 + depth * 0.85);
        tile.style.zIndex = String(Math.round(depth * 100));
      });
      frame = requestAnimationFrame(paint);
    };
    frame = requestAnimationFrame(paint);
    return () => cancelAnimationFrame(frame);
  }, [inView, reduceMotion, icons.length]);

  return (
    <div
      onPointerDown={(e) => {
        e.currentTarget.setPointerCapture(e.pointerId);
        view.current.dragging = true;
      }}
      onPointerMove={(e) => {
        if (!view.current.dragging) return;
        view.current.yaw += e.movementX * 0.008;
        view.current.pitch -= e.movementY * 0.008;
      }}
      onPointerUp={() => (view.current.dragging = false)}
      className='grid size-80 cursor-grab touch-none place-items-center active:cursor-grabbing'
    >
      {/* Painted directly each frame, so React never re-renders the tiles. */}
      <div ref={ref} aria-hidden className='relative size-0'>
        {icons.map((icon, i) => (
          <span
            key={i}
            className='absolute -top-5 -left-5 grid size-10 place-items-center rounded-xl border bg-background'
          >
            {icon}
          </span>
        ))}
      </div>
    </div>
  );
}