Motion Grid · Animate UI

import {
  MotionGrid,
  MotionGridCells,
  type Frames,
} from '@animate-ui/react/primitives/motion-grid';

// Each frame lists the active cells as [column, row].
const frames: Frames = [
  [[1, 1]],
  [
    [0, 1],
    [1, 0],
    [1, 2],
    [2, 1],
  ],
  [
    [0, 0],
    [0, 2],
    [2, 0],
    [2, 2],
  ],
  [],
];

export function Loader() {
  return (
    <MotionGrid gridSize={[3, 3]} frames={frames} className="gap-0.5">
      <MotionGridCells className="size-1 rounded-full bg-foreground/20 data-[active=true]:bg-foreground" />
    </MotionGrid>
  );
}