Cylinder Carousel

1"use client";
2// beui.dev/components/motion/cylinder-carousel
3 
4import {
5  animate,
6  type AnimationPlaybackControls,
7  motion,
8  type MotionValue,
9  useMotionValue,
10  useReducedMotion,
11  useTransform,
12} from "motion/react";
13import {
14  Children,
15  type PointerEvent as ReactPointerEvent,
16  type ReactNode,
17  useCallback,
18  useEffect,
19  useRef,
20  useState,
21  type WheelEvent as ReactWheelEvent,
22} from "react";
23import { cn } from "@/lib/utils";
24 
25// Carousel-specific: a soft spring that receives the release velocity, so a
26// flick keeps rolling freely, drifts past the snap point and eases back.
27const GLIDE_SPRING = { stiffness: 40, damping: 20, mass: 3 };
28 
29// How far a flick keeps rolling: projected items = release velocity * momentum.
30const FLICK_MOMENTUM = 0.45;
31const MAX_FLICK_ITEMS = 6;
32 
33export interface CylinderCarouselProps {
34  children: ReactNode;
35  /** Max item box size in px (square) at full size, i.e. at the container
36   * edge. Balls shrink below this automatically so the row keeps breathing
37   * room in narrow containers. */
38  itemSize?: number;
39  /** How many item slots span the container width. */
40  visibleItems?: number;
41  /** "concave" (default): inside of the cylinder — center ball smallest and
42   * dipped, growing toward the edges. "convex": outside of the cylinder —
43   * center ball biggest and raised, shrinking toward the edges. */
44  variant?: "concave" | "convex";
45  /** Scale of the smallest ball (center for concave, edges for convex);
46   * the biggest reaches 1. */
47  minScale?: number;
48  /** Items rolled per item-width dragged — above 1 the wall outruns the
49   * pointer, which reads as a lighter, freer roll. */
50  dragSpeed?: number;
51  /** Curve depth in px: for concave, how far the edge balls ride above the
52   * center one (valley); for convex, how far below (arch). 0 = flat line.
53   * Defaults to 35% of the item size. */
54  arc?: number;
55  /** Snap to the nearest item when the roll settles. */
56  snap?: boolean;
57  /** Roll on its own until interacted with. */
58  autoRotate?: boolean;
59  /** Auto-roll speed in items per second. */
60  autoRotateSpeed?: number;
61  defaultIndex?: number;
62  onIndexChange?: (index: number) => void;
63  /** Stage height in px. Defaults to `itemSize`. */
64  height?: number;
65  className?: string;
66}
67 
68// The frame edge sits at this wall angle; how far the wall curves in frame.
69const THETA_EDGE = (72 * Math.PI) / 180;
70// Wall angle past which a ball is parked far off-stage (always hidden there).
71// … truncated