Build an animated logo wall

import { useEffect, useMemo, useRef, useState } from "react";
import type { CSSProperties } from "react";

type LogoGridProps = {
  /** Your Logo.dev publishable key (pk_…). */
  token: string;
  /** Domains to show. Provide columns × rows × deckSize of them. */
  domains: string[];
  columns?: number;
  rows?: number;
  /** How many logos each tile cycles through. */
  deckSize?: number;
};

// One global tick advances every tile together; the per-column transition
// delay turns the shared swap into a left-to-right wave.
const STEP_MS = 3000;
const REVEAL_MS = 400;
const COLUMN_DELAY_MS = 120;
const TRAVEL_PX = 40;
const EASE = "cubic-bezier(0.17, 0.17, 0.3, 1)";

function useReducedMotion() {
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const update = () => setReduced(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);
  return reduced;
}

export function LogoGrid({
  token,
  domains,
  columns = 5,
  rows = 3,
  deckSize = 3,
}: LogoGridProps) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);
  const reduced = useReducedMotion();
  const [active, setActive] = useState(0);

  const decks = useMemo(() => {
    const tiles = columns * rows;
    return Array.from({ length: tiles }, (_, i) =>
      domains.slice(i * deckSize, i * deckSize + deckSize)
    );
  }, [domains, columns, rows, deckSize]);

  // Only animate while the grid is on screen.
  useEffect(() => {
    const el = ref.current;
    if (!el) {
      return;
    }
    const observer = new IntersectionObserver(([entry]) =>
      setInView(entry.isIntersecting)
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  const running = inView && !reduced;

  useEffect(() => {
    if (!running) {
      return;
    }
    const id = setInterval(() => {
      setActive((v) => (v + 1) % deckSize);
    }, STEP_MS);
    return () => clearInterval(id);
  }, [running, deckSize]);

  // Every logo in a deck stays mounted in one of three positions: the current
  // logo in place, the previous one parked above, and the next waiting below.
  // Because the incoming layer is already in its start position, the swap is a
  // plain style change and the transition fires with no extra bookkeeping.
  const layerStyle = (index: number, columnIndex: number): CSSProperties => {
    const delay = (columnIndex + 1) * COLUMN_DELAY_MS;
    const transition = `opacity ${REVEAL_MS}ms ${EASE} ${delay}ms, translate ${REVEAL_MS}ms ${EASE} ${delay}ms`;
    if (index === active) {
      return { opacity: 1, translate: "0 0", transition };
    }
    if (index === (active - 1 + deckSize) % deckSize) {
      return { opacity: 0, translate: `0 -${TRAVEL_PX}px`, transition };
    }
    return { opacity: 0, translate: `0 ${TRAVEL_PX}px`, transition };
  };

  // Parameters: https://www.logo.dev/docs/logo-images/introduction#parameters
  const src = (domain: string) =>
    `https://img.logo.dev/${domain}?token=${token}&format=webp&retina=true&size=52`;

  return (
    <div
      aria-label="Company logos"
      className="grid gap-3 sm:gap-4 overflow-hidden"
      ref={ref}
      role="img"
      style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
    >
      {decks.map((deck, tileIndex) => (
        <div
          className="relative flex aspect-square items-center justify-center"
          key={`tile-${tileIndex}`}
        >
          {deck.map((domain, layerIndex) => (
            <span
              aria-hidden="true"
              className="absolute inset-0 flex items-center justify-center"
              key={domain}
              style={layerStyle(layerIndex, tileIndex % columns)}
            >
              <img
                alt=""
                className="h-[52px] w-[52px] object-contain"
                height={52}
                loading="lazy"
                src={src(domain)}
                width={52}
              />
            </span>
          ))}
        </div>
      ))}
    </div>
  );
}