Radial Stagger

1"use client";
2 
3import type { Variants } from "motion/react";
4import { useAnimationControls } from "motion/react";
5import * as m from "motion/react-m";
6import type { CSSProperties, ReactNode } from "react";
7import { Children, useEffect, useState } from "react";
8import { feel, springPop, springPopTransition } from "@/lib/motion";
9import { cn } from "@/lib/utils";
10 
11type DistanceMetric = "euclidean" | "manhattan" | "chebyshev";
12 
13type RadialStaggerProps = {
14  children: ReactNode;
15  className?: string;
16  style?: CSSProperties;
17  /** classes for each tile (the grid cell) */
18  itemClassName?: string;
19  /** grid columns — drives both the layout and the distance geometry */
20  columns?: number;
21  /** seconds of delay added per unit of distance from the clicked origin */
22  step?: number;
23  /** how ring distance is measured from the origin cell */
24  distance?: DistanceMetric;
25  /** index the first cascade ripples out from (before any click) */
26  defaultOrigin?: number;
27  /**
28   * Opt into real interactive controls — each tile renders as a focusable
29   * `<button>`. Requires an accessible name per tile (see `getItemLabel`),
30   * otherwise you ship nameless buttons (WCAG 4.1.2). Leave off (default) for
31   * a decorative ripple grid: tiles render as non-focusable `role="presentation"`
32   * elements, so keyboard/SR users never hit empty controls.
33   */
34  interactive?: boolean;
35  /** Accessible name for the tile at `index` — required when `interactive`. */
36  getItemLabel?: (index: number) => string;
37  /** Fires with the tile index when an interactive tile is selected. */
38  onSelect?: (index: number) => void;
39};
40 
41const radialItem: Variants = {
42  hidden: springPop.initial,
43  visible: (delay: number) => ({
44    ...springPop.animate,
45    transition: { ...springPopTransition, delay },
46  }),
47};
48 
49function ringDistance(a: number, b: number, columns: number, metric: DistanceMetric) {
50  const cols = Math.max(1, columns);
51  const dr = Math.abs(Math.floor(a / cols) - Math.floor(b / cols));
52  const dc = Math.abs((a % cols) - (b % cols));
53  if (metric === "manhattan") return dr + dc;
54  if (metric === "chebyshev") return Math.max(dr, dc);
55  return Math.hypot(dr, dc);
56}
57 
58// FLAT export (never a compound `RadialStagger.Item` — bolted-on props are
59// stripped across the RSC client boundary and crash a Server Component at build).
60export function RadialStagger({
61  children,
62  className,
63  style,
64  itemClassName,
65  columns = 4,
66  step = feel.stagger,
67  distance = "euclidean",
68// … truncated