{"slug":"cylinder-carousel","name":"Cylinder Carousel","description":"A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.","category":"motion","source_url":"https://beui.dev/r/cylinder-carousel/raw","detail_url":"https://beui.dev/r/cylinder-carousel","raw_url":"https://beui.dev/r/cylinder-carousel/raw","page_url":"https://beui.dev/components/motion/cylinder-carousel","markdown_url":"https://beui.dev/components/motion/cylinder-carousel.md","published_at":"2026-07-04","updated_at":"2026-09-11","dependencies":["@paper-design/shaders-react","clsx","lucide-react","motion","react","tailwind-merge"],"internal":["@/components/motion/cylinder-carousel","@/components/motion/shader-background","@/components/motion/tabs","@/lib/ease","@/lib/touch","@/lib/utils"],"files":[{"path":"components/motion/cylinder-carousel.tsx","type":"component","content":"\"use client\";\n// beui.dev/components/motion/cylinder-carousel\n\nimport {\n  animate,\n  type AnimationPlaybackControls,\n  motion,\n  type MotionValue,\n  useMotionValue,\n  useReducedMotion,\n  useTransform,\n} from \"motion/react\";\nimport {\n  Children,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type WheelEvent as ReactWheelEvent,\n} from \"react\";\nimport {\n  capturePointer,\n  releasePointer,\n  TOUCH_GESTURE_CLASS,\n} from \"@/lib/touch\";\nimport { cn } from \"@/lib/utils\";\n\n// Carousel-specific: a soft spring that receives the release velocity, so a\n// flick keeps rolling freely, drifts past the snap point and eases back.\nconst GLIDE_SPRING = { stiffness: 40, damping: 20, mass: 3 };\n\n// How far a flick keeps rolling: projected items = release velocity * momentum.\nconst FLICK_MOMENTUM = 0.45;\nconst MAX_FLICK_ITEMS = 6;\n\nexport interface CylinderCarouselProps {\n  children: ReactNode;\n  /** Max item box size in px (square) at full size, i.e. at the container\n   * edge. Balls shrink below this automatically so the row keeps breathing\n   * room in narrow containers. */\n  itemSize?: number;\n  /** How many item slots span the container width. */\n  visibleItems?: number;\n  /** \"concave\" (default): inside of the cylinder — center ball smallest and\n   * dipped, growing toward the edges. \"convex\": outside of the cylinder —\n   * center ball biggest and raised, shrinking toward the edges. */\n  variant?: \"concave\" | \"convex\";\n  /** Scale of the smallest ball (center for concave, edges for convex);\n   * the biggest reaches 1. */\n  minScale?: number;\n  /** Items rolled per item-width dragged — above 1 the wall outruns the\n   * pointer, which reads as a lighter, freer roll. */\n  dragSpeed?: number;\n  /** Curve depth in px: for concave, how far the edge balls ride above the\n   * center one (valley); for convex, how far below (arch). 0 = flat line.\n   * Defaults to 35% of the item size. */\n  arc?: number;\n  /** Snap to the nearest item when the roll settles. */\n  snap?: boolean;\n  /** Roll on its own until interacted with. */\n  autoRotate?: boolean;\n  /** Auto-roll speed in items per second. */\n  autoRotateSpeed?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Stage height in px. Defaults to `itemSize`. */\n  height?: number;\n  className?: string;\n}\n\n// The frame edge sits at this wall angle; how far the wall curves in frame.\nconst THETA_EDGE = (72 * Math.PI) / 180;\n// Wall angle past which a ball is parked far off-stage (always hidden there).\nconst THETA_CLAMP = (95 * Math.PI) / 180;\n\n/**\n * One ball on the inside wall of the cylinder, rendered through a single\n * perspective projection: the ball sits at wall angle θ, the camera slightly\n * above the ball line, so horizontal position, size and height all share one\n * 1/(cosθ + k) depth term. Center = far wall: smallest, highest, moving\n * slowest; edges = nearest: full size, level, moving fastest, sliding off to\n * be clipped. Nothing overlaps, fades or reorders — the edge is the exit.\n */\nfunction CarouselBall({\n  scroll,\n  index,\n  count,\n  alpha,\n  k,\n  projection,\n  gap,\n  edgeOffset,\n  minScale,\n  convex,\n  arc,\n  halfWidth,\n  itemSize,\n  children,\n}: {\n  scroll: MotionValue<number>;\n  index: number;\n  count: number;\n  /** Wall angle per item step, in radians. */\n  alpha: number;\n  /** Camera distance term for the horizontal projection. */\n  k: number;\n  /** Projection strength: maps sinθ/(cosθ+k) to px so θE lands on the edge. */\n  projection: number;\n  /** Uniform slot width in px — convex spacing. */\n  gap: number;\n  /** Offset at which a ball's center sits on the container edge. */\n  edgeOffset: number;\n  minScale: number;\n  convex: boolean;\n  /** Curve depth in px between the center ball and the edge balls. */\n  arc: number;\n  halfWidth: number;\n  itemSize: number;\n  children: ReactNode;\n}) {\n  // Nearest wrapped offset so items loop around continuously.\n  const offset = useTransform(scroll, (s) => {\n    let o = index - s;\n    o -= Math.round(o / count) * count;\n    return o;\n  });\n  // Concave spacing follows the interior perspective (slow, tight center);\n  // convex pairs its big center balls with uniform spacing — the interior\n  // projection would collapse them into each other.\n  const x = useTransform(offset, (o) => {\n    if (convex) return o * gap;\n    const th = Math.max(-THETA_CLAMP, Math.min(THETA_CLAMP, o * alpha));\n    return (projection * Math.sin(th)) / (Math.cos(th) + k);\n  });\n  // Linear in wall angle, not in depth (the depth curve is near-flat around\n  // the center, which made the middle three read as equal): every step is\n  // visibly bigger than the last — growing outward (concave) or inward\n  // (convex).\n  const scale = useTransform(offset, (o) => {\n    const t = Math.min(Math.abs(o) / edgeOffset, THETA_CLAMP / THETA_EDGE);\n    return convex\n      ? 1 - (1 - minScale) * t\n      : minScale + (1 - minScale) * t;\n  });\n  // Parabola centered on the stage — valley for concave (center ball dips\n  // arc/2 below the midline, edges rise arc/2 above), arch for convex — and\n  // deliberately unclamped: a ball keeps following the same curve as it\n  // crosses the edge, so entries never pop.\n  const y = useTransform(x, (px) => {\n    const t = px / halfWidth;\n    const valley = arc * (0.5 - t * t);\n    return convex ? -valley : valley;\n  });\n  // Fully off-stage balls stop painting (matters for canvas/shader children).\n  const visibility = useTransform(x, (px) =>\n    Math.abs(px) > halfWidth + itemSize ? \"hidden\" : \"visible\",\n  );\n\n  return (\n    <motion.div\n      className=\"absolute top-1/2 left-1/2\"\n      style={{\n        x,\n        y,\n        scale,\n        visibility,\n        width: itemSize,\n        height: itemSize,\n        marginLeft: -itemSize / 2,\n        marginTop: -itemSize / 2,\n      }}\n    >\n      {children}\n    </motion.div>\n  );\n}\n\nexport function CylinderCarousel({\n  children,\n  itemSize = 200,\n  visibleItems = 5,\n  variant = \"concave\",\n  minScale = 0.55,\n  dragSpeed = 1.5,\n  arc: arcProp,\n  snap = true,\n  autoRotate = false,\n  autoRotateSpeed = 0.4,\n  defaultIndex = 0,\n  onIndexChange,\n  height,\n  className,\n}: CylinderCarouselProps) {\n  const reduce = useReducedMotion() ?? false;\n  const items = Children.toArray(children);\n  const count = items.length;\n\n  const stageRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n  useEffect(() => {\n    const el = stageRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver(([entry]) => {\n      setWidth(entry.contentRect.width);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n  // Sized so `visibleItems` balls sit fully in frame and the next one out on\n  // each side straddles the container edge, half visible.\n  const stageWidth = width || 800;\n  const halfWidth = stageWidth / 2;\n  const edgeOffset = (visibleItems + 1) / 2;\n\n  // Fit: the resting row's diameters may take at most ~66% of the stage — the\n  // rest is air between balls plus the half-visible ball on each edge.\n  // `itemSize` only caps the result.\n  const convex = variant === \"convex\";\n  let scaleSum = 0;\n  for (let i = 0; i < visibleItems; i++) {\n    const t = Math.abs(i - (visibleItems - 1) / 2) / edgeOffset;\n    scaleSum += convex\n      ? 1 - (1 - minScale) * t\n      : minScale + (1 - minScale) * t;\n  }\n  const size = Math.min(itemSize, (stageWidth * 0.65) / scaleSum);\n\n  const gap = stageWidth / (visibleItems + 1);\n  const arc = arcProp ?? size * 0.35;\n\n  // Perspective constants. The ball one slot past the frame edge sits at wall\n  // angle THETA_EDGE with its center right on the container edge — scale 1,\n  // half of it in view; k falls out of the requested minScale (clamped so the\n  // projection stays monotonic up to THETA_CLAMP).\n  const alpha = THETA_EDGE / edgeOffset;\n  const k = Math.max(0.2, (minScale - Math.cos(THETA_EDGE)) / (1 - minScale));\n  const projection =\n    (halfWidth * (Math.cos(THETA_EDGE) + k)) / Math.sin(THETA_EDGE);\n\n  // scroll is in item units (continuous); item i sits at x = (i - scroll) * gap.\n  // Drags write it 1:1 so the wall sticks to the pointer; releases hand the\n  // pointer velocity to a soft spring so the roll glides on and settles free.\n  const scroll = useMotionValue(defaultIndex);\n  const indexRef = useRef(defaultIndex);\n  const [, setActiveIndex] = useState(defaultIndex);\n  const glideRef = useRef<AnimationPlaybackControls | null>(null);\n  const draggingRef = useRef(false);\n  const hoverRef = useRef(false);\n\n  useEffect(() => {\n    if (count === 0) return;\n    const unsub = scroll.on(\"change\", (v) => {\n      const idx = ((Math.round(v) % count) + count) % count;\n      if (idx !== indexRef.current) {\n        indexRef.current = idx;\n        setActiveIndex(idx);\n        onIndexChange?.(idx);\n      }\n    });\n    return unsub;\n  }, [scroll, count, onIndexChange]);\n\n  const stopGlide = useCallback(() => {\n    glideRef.current?.stop();\n    glideRef.current = null;\n  }, []);\n\n  // Spring toward `to`, carrying `velocity` (items/s) through so motion never\n  // steps — the roll leaves the finger at finger speed.\n  const glideTo = useCallback(\n    (to: number, velocity: number) => {\n      stopGlide();\n      if (reduce) {\n        scroll.set(to);\n        return;\n      }\n      glideRef.current = animate(scroll, to, {\n        type: \"spring\",\n        ...GLIDE_SPRING,\n        velocity,\n        restDelta: 0.001,\n        restSpeed: 0.005,\n      });\n    },\n    [scroll, stopGlide, reduce],\n  );\n\n  const settle = useCallback(\n    (velocity: number) => {\n      const projected =\n        scroll.get() +\n        Math.max(\n          -MAX_FLICK_ITEMS,\n          Math.min(MAX_FLICK_ITEMS, velocity * FLICK_MOMENTUM),\n        );\n      glideTo(snap ? Math.round(projected) : projected, velocity);\n    },\n    [scroll, snap, glideTo],\n  );\n\n  const drag = useRef({\n    startX: 0,\n    startScroll: 0,\n    lastX: 0,\n    lastT: 0,\n    prevX: 0,\n    prevT: 0,\n  });\n\n  const onPointerDown = useCallback(\n    (e: ReactPointerEvent) => {\n      e.preventDefault();\n      stopGlide();\n      draggingRef.current = true;\n      capturePointer(e.currentTarget, e.pointerId);\n      const now = performance.now();\n      drag.current = {\n        startX: e.clientX,\n        startScroll: scroll.get(),\n        lastX: e.clientX,\n        lastT: now,\n        prevX: e.clientX,\n        prevT: now,\n      };\n    },\n    [scroll, stopGlide],\n  );\n\n  const onPointerMove = useCallback(\n    (e: ReactPointerEvent) => {\n      if (!draggingRef.current) return;\n      const d = drag.current;\n      scroll.set(d.startScroll - ((e.clientX - d.startX) * dragSpeed) / gap);\n      d.prevX = d.lastX;\n      d.prevT = d.lastT;\n      d.lastX = e.clientX;\n      d.lastT = performance.now();\n    },\n    [scroll, gap, dragSpeed],\n  );\n\n  const onPointerUp = useCallback(\n    (e: ReactPointerEvent) => {\n      if (!draggingRef.current) return;\n      draggingRef.current = false;\n      releasePointer(e.currentTarget, e.pointerId);\n      const d = drag.current;\n      const dt = d.lastT - d.prevT;\n      const vpx = dt > 0 ? (d.lastX - d.prevX) / dt : 0; // px per ms\n      settle((-vpx * dragSpeed * 1000) / gap); // items per second\n    },\n    [settle, gap, dragSpeed],\n  );\n\n  const rollBy = useCallback(\n    (dir: number) => {\n      glideTo(Math.round(scroll.get()) + dir, scroll.getVelocity());\n    },\n    [scroll, glideTo],\n  );\n\n  const wheelSettleRef = useRef<number | undefined>(undefined);\n  const onWheel = useCallback(\n    (e: ReactWheelEvent) => {\n      stopGlide();\n      const delta =\n        Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY;\n      scroll.set(scroll.get() + delta / gap);\n      if (wheelSettleRef.current) window.clearTimeout(wheelSettleRef.current);\n      wheelSettleRef.current = window.setTimeout(\n        () => settle(scroll.getVelocity()),\n        140,\n      );\n    },\n    [scroll, gap, settle, stopGlide],\n  );\n\n  useEffect(() => {\n    if (!autoRotate || reduce || count === 0) return;\n    let raf = 0;\n    let last = performance.now();\n    const tick = (now: number) => {\n      const dt = (now - last) / 1000;\n      last = now;\n      if (!draggingRef.current && !hoverRef.current && !glideRef.current) {\n        scroll.set(scroll.get() + autoRotateSpeed * dt);\n      }\n      raf = requestAnimationFrame(tick);\n    };\n    raf = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(raf);\n  }, [autoRotate, autoRotateSpeed, reduce, count, scroll]);\n\n  const stageHeight = height ?? size;\n\n  return (\n      <div\n        ref={stageRef}\n        role=\"application\"\n        aria-roledescription=\"carousel\"\n        // biome-ignore lint/a11y/noNoninteractiveTabindex: focusable custom carousel widget\n        tabIndex={0}\n        onKeyDown={(e) => {\n          if (e.key === \"ArrowRight\") {\n            e.preventDefault();\n            rollBy(1);\n          } else if (e.key === \"ArrowLeft\") {\n            e.preventDefault();\n            rollBy(-1);\n          }\n        }}\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={onPointerUp}\n        onPointerCancel={onPointerUp}\n        onWheel={onWheel}\n        onPointerEnter={() => {\n          hoverRef.current = true;\n        }}\n        onPointerLeave={() => {\n          hoverRef.current = false;\n        }}\n        className={cn(\n          // clip-path, not overflow: it also clips the GPU-composited balls\n          \"relative w-full touch-none outline-none [clip-path:inset(0)]\",\n          // The stage drives the roll from the press itself, so iOS must not\n          // claim the same touch for its callout or a slide drag.\n          TOUCH_GESTURE_CLASS,\n          \"cursor-grab active:cursor-grabbing\",\n          \"focus-visible:ring-2 focus-visible:ring-foreground/20\",\n          className,\n        )}\n        style={{ height: stageHeight }}\n      >\n        {items.map((item, i) => (\n          <CarouselBall\n            // biome-ignore lint/suspicious/noArrayIndexKey: slides are positional and stable\n            key={i}\n            scroll={scroll}\n            index={i}\n            count={count}\n            alpha={alpha}\n            k={k}\n            projection={projection}\n            gap={gap}\n            edgeOffset={edgeOffset}\n            minScale={minScale}\n            convex={convex}\n            arc={arc}\n            halfWidth={halfWidth}\n            itemSize={size}\n          >\n            {item}\n          </CarouselBall>\n        ))}\n      </div>\n  );\n}\n"},{"path":"lib/touch.ts","type":"util","content":"// Shared touch primitives. iOS and iPadOS run their own gestures on top of the\n// page — the long-press selection callout and the selection it drags in with\n// it — and they win: once the platform claims a touch it cancels ours\n// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own\n// their gesture have to opt out.\n//\n// What the two classes below cover, precisely:\n// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:\n//   it is not a property other engines have, so it is inert everywhere else.\n// - `user-select: none` stops the long-press selection on every engine,\n//   Android included, and stops a drag from painting a selection under the\n//   cursor. It is inherited, so it reaches every descendant — which is why the\n//   two classes differ only in whether they apply it unconditionally.\n// What neither covers:\n// - Chrome for Android's long-press menu on a link or an image. No CSS\n//   suppresses it; a gesture surface that wraps one needs its own\n//   `onContextMenu` with `preventDefault()`.\n// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is\n//   not inherited and plain divs and buttons are not drag sources, so setting\n//   it on the surface does nothing — the child itself needs `draggable={false}`.\n\n/**\n * Classes for a surface that *is* the control: a thumb, a drum, a stage, a\n * handle, a hold button. Selection is suppressed on every input, because a\n * drag that highlights the control's own label is wrong on a mouse too.\n * Compose with `touch-none` when the surface also owns the scroll axis — leave\n * it off when the page must still scroll from there.\n */\nexport const TOUCH_GESTURE_CLASS = \"select-none [-webkit-touch-callout:none]\";\n\n/**\n * The same opt-out for a gesture surface that wraps content the consumer owns:\n * a scroller, a context-menu trigger, a sheet header, a list row. Selection is\n * suppressed only where the platform runs its own press gestures — a coarse\n * pointer — so a mouse user can still select and copy that content. If the\n * gesture itself would paint a selection under the cursor, add `select-none`\n * for the duration of the gesture rather than reaching for\n * `TOUCH_GESTURE_CLASS`.\n *\n * `pointer: coarse` describes the *primary* pointer and nothing else, so a\n * hybrid machine reads it wrong in both directions: a tablet with a mouse\n * plugged in keeps touch as primary and loses mouse selection, and a laptop\n * with a touchscreen keeps the mouse as primary and leaves selection live\n * under a finger. No media query can answer per interaction — the query is\n * about the device, and the question is about the gesture in progress. The\n * default stays here because it is right on the machines that are one thing or\n * the other, and losing a selection is a nuisance; where the miss costs a\n * *gesture* instead, the surface pairs it with `holdSelection` on the press.\n */\nexport const TOUCH_GESTURE_CONTENT_CLASS =\n  \"[-webkit-touch-callout:none] pointer-coarse:select-none\";\n\n/**\n * Suppress selection on `element` for as long as a gesture is running on it,\n * whatever the primary pointer of the machine happens to be. Returns the\n * release. Inline, so it wins over the class above and is gone again the\n * moment the gesture ends.\n *\n * For the press gestures a native selection would otherwise steal — a\n * long-press that opens a menu. Elsewhere prefer the classes: a surface that\n * takes selection away for the whole session is a surface whose text nobody\n * can copy.\n */\nexport function holdSelection(element: HTMLElement) {\n  element.style.setProperty(\"user-select\", \"none\");\n  element.style.setProperty(\"-webkit-user-select\", \"none\");\n  return () => {\n    element.style.removeProperty(\"user-select\");\n    element.style.removeProperty(\"-webkit-user-select\");\n  };\n}\n\n/**\n * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer\n * is already gone by the time the handler runs — routine on iOS, where the\n * system can claim the touch first — and an uncaught throw takes the rest of\n * the handler, the gesture included, down with it. Touch pointers carry\n * implicit capture anyway, so losing it is never fatal.\n */\nexport function capturePointer(element: Element, pointerId: number) {\n  try {\n    element.setPointerCapture(pointerId);\n  } catch {\n    // Pointer is no longer active — implicit capture still applies on touch.\n  }\n}\n\n/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */\nexport function releasePointer(element: Element, pointerId: number) {\n  try {\n    if (element.hasPointerCapture(pointerId)) {\n      element.releasePointerCapture(pointerId);\n    }\n  } catch {\n    // Capture was already dropped by the browser.\n  }\n}\n\n/**\n * Whether this event came from a pointer that is *hovering*: not a touch, and\n * not currently pressed. Which input the user is holding right now is not\n * something a device capability can answer — a touchscreen laptop hovers and\n * taps, and iPadOS reports a fine hovering pointer for a finger — so both\n * paths stay live and each handler branches on the event it was given.\n *\n * A pen resting on the glass is making contact, not hovering: `buttons` is the\n * tell, and it sends a pen tap down the same route a finger takes.\n *\n * This answers what an *enter* asks. A leave is the other half of a pair and\n * has to be read against the enter that started it — `useHoverGesture` in\n * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it\n * rather than asking this question twice.\n */\nexport const isHoveringPointer = (event: {\n  pointerType: string;\n  buttons: number;\n}) => event.pointerType !== \"touch\" && event.buttons === 0;\n"},{"path":"lib/utils.ts","type":"util","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"},{"path":"components/previews/motion/cylinder-carousel.preview.tsx","type":"preview","content":"\"use client\";\n\nimport { type ComponentType, useState } from \"react\";\nimport { CylinderCarousel } from \"@/components/motion/cylinder-carousel\";\nimport {\n  ShaderBackground,\n  type ShaderBackgroundVariant,\n} from \"@/components/motion/shader-background\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/motion/tabs\";\n\n// Each variant has its own prop shape; the slides only spread their own preset.\nconst Background = ShaderBackground as ComponentType<\n  { variant: ShaderBackgroundVariant; className?: string } & Record<\n    string,\n    unknown\n  >\n>;\n\nconst SLIDES: { variant: ShaderBackgroundVariant; props: Record<string, unknown> }[] = [\n  {\n    variant: \"dithering\",\n    props: { colorBack: \"#1a1030\", colorFront: \"#b98cff\", speed: 0.3 },\n  },\n  {\n    variant: \"metaballs\",\n    props: { colors: [\"#e8e8ef\", \"#8a8a9a\", \"#1a1a22\"], colorBack: \"#c9b9a8\", speed: 0.4 },\n  },\n  {\n    variant: \"warp\",\n    props: { colors: [\"#c8ff00\", \"#3a5a00\", \"#c8ff00\", \"#88bb00\"], speed: 0.4 },\n  },\n  {\n    variant: \"god-rays\",\n    props: { colors: [\"#6a7bff\", \"#00114d\"], colorBack: \"#000000\", speed: 0.5 },\n  },\n  {\n    variant: \"swirl\",\n    props: { colorBack: \"#1a0000\", colors: [\"#ffd1a8\", \"#ff6a3d\", \"#b31a57\"], speed: 0.3 },\n  },\n  {\n    variant: \"mesh-gradient\",\n    props: { colors: [\"#e0eaff\", \"#241d9a\", \"#f75092\", \"#9f50d3\"], speed: 0.3 },\n  },\n  {\n    variant: \"voronoi\",\n    props: { colors: [\"#ff8247\", \"#ffe53d\"], speed: 0.3 },\n  },\n  {\n    variant: \"neuro-noise\",\n    props: { colorFront: \"#ffffff\", colorMid: \"#47a6ff\", colorBack: \"#000000\", speed: 0.4 },\n  },\n];\n\nexport function CylinderCarouselPreview() {\n  const [variant, setVariant] = useState<\"concave\" | \"convex\">(\"concave\");\n\n  return (\n    <div className=\"flex w-full flex-col items-center gap-4 p-6\">\n      <Tabs\n        value={variant}\n        onValueChange={(v) => setVariant(v as \"concave\" | \"convex\")}\n        variant=\"segment\"\n      >\n        <TabsList>\n          <TabsTrigger value=\"concave\">Concave</TabsTrigger>\n          <TabsTrigger value=\"convex\">Convex</TabsTrigger>\n        </TabsList>\n      </Tabs>\n      {/* clip-path (not overflow) so the rounded corner also clips the GPU-composited balls */}\n      <div className=\"w-full rounded-3xl border border-border/60 bg-muted/20 py-6 [clip-path:inset(0_round_1.5rem)]\">\n        <CylinderCarousel\n          variant={variant}\n          itemSize={230}\n          height={310}\n          className=\"w-full\"\n        >\n          {SLIDES.map((slide) => (\n            <div\n              key={slide.variant}\n              className=\"h-full w-full overflow-hidden rounded-full border border-border/40\"\n            >\n              <Background\n                variant={slide.variant}\n                className=\"h-full w-full\"\n                {...slide.props}\n              />\n            </div>\n          ))}\n        </CylinderCarousel>\n      </div>\n      <p className=\"text-xs text-muted-foreground\">\n        Drag, scroll or use arrow keys to roll\n      </p>\n    </div>\n  );\n}\n"},{"path":"components/motion/shader-background.tsx","type":"util","content":"\"use client\";\n\nimport {\n  ColorPanels,\n  type ColorPanelsProps,\n  Dithering,\n  type DitheringProps,\n  DotGrid,\n  type DotGridProps,\n  DotOrbit,\n  type DotOrbitProps,\n  GodRays,\n  type GodRaysProps,\n  GrainGradient,\n  type GrainGradientProps,\n  Metaballs,\n  type MetaballsProps,\n  MeshGradient,\n  type MeshGradientProps,\n  NeuroNoise,\n  type NeuroNoiseProps,\n  PerlinNoise,\n  type PerlinNoiseProps,\n  PulsingBorder,\n  type PulsingBorderProps,\n  SimplexNoise,\n  type SimplexNoiseProps,\n  SmokeRing,\n  type SmokeRingProps,\n  Spiral,\n  type SpiralProps,\n  StaticMeshGradient,\n  type StaticMeshGradientProps,\n  StaticRadialGradient,\n  type StaticRadialGradientProps,\n  Swirl,\n  type SwirlProps,\n  Voronoi,\n  type VoronoiProps,\n  Warp,\n  type WarpProps,\n  Water,\n  type WaterProps,\n  Waves,\n  type WavesProps,\n} from \"@paper-design/shaders-react\";\nimport { useReducedMotion } from \"motion/react\";\nimport type { ComponentType } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ntype ShaderVariantProps = {\n  \"mesh-gradient\": MeshGradientProps;\n  \"grain-gradient\": GrainGradientProps;\n  \"dot-grid\": DotGridProps;\n  \"dot-orbit\": DotOrbitProps;\n  warp: WarpProps;\n  waves: WavesProps;\n  water: WaterProps;\n  voronoi: VoronoiProps;\n  swirl: SwirlProps;\n  \"smoke-ring\": SmokeRingProps;\n  \"static-radial-gradient\": StaticRadialGradientProps;\n  \"neuro-noise\": NeuroNoiseProps;\n  metaballs: MetaballsProps;\n  \"god-rays\": GodRaysProps;\n  spiral: SpiralProps;\n  dithering: DitheringProps;\n  \"pulsing-border\": PulsingBorderProps;\n  \"color-panels\": ColorPanelsProps;\n  \"static-mesh-gradient\": StaticMeshGradientProps;\n  \"simplex-noise\": SimplexNoiseProps;\n  \"perlin-noise\": PerlinNoiseProps;\n};\n\nexport type ShaderBackgroundVariant = keyof ShaderVariantProps;\n\nexport type ShaderBackgroundProps = {\n  [K in ShaderBackgroundVariant]: { variant: K } & ShaderVariantProps[K];\n}[ShaderBackgroundVariant];\n\nconst VARIANT_COMPONENTS: {\n  [K in ShaderBackgroundVariant]: ComponentType<ShaderVariantProps[K]>;\n} = {\n  \"mesh-gradient\": MeshGradient,\n  \"grain-gradient\": GrainGradient,\n  \"dot-grid\": DotGrid,\n  \"dot-orbit\": DotOrbit,\n  warp: Warp,\n  waves: Waves,\n  water: Water,\n  voronoi: Voronoi,\n  swirl: Swirl,\n  \"smoke-ring\": SmokeRing,\n  \"static-radial-gradient\": StaticRadialGradient,\n  \"neuro-noise\": NeuroNoise,\n  metaballs: Metaballs,\n  \"god-rays\": GodRays,\n  spiral: Spiral,\n  dithering: Dithering,\n  \"pulsing-border\": PulsingBorder,\n  \"color-panels\": ColorPanels,\n  \"static-mesh-gradient\": StaticMeshGradient,\n  \"simplex-noise\": SimplexNoise,\n  \"perlin-noise\": PerlinNoise,\n};\n\nexport const SHADER_BACKGROUND_VARIANTS = Object.keys(\n  VARIANT_COMPONENTS,\n) as ShaderBackgroundVariant[];\n\n/**\n * Not every variant animates (e.g. dot-grid is a static pattern), so `speed`\n * is only frozen for reduced motion when the variant actually exposes it.\n */\nexport function ShaderBackground({\n  variant,\n  className,\n  ...rest\n}: ShaderBackgroundProps) {\n  const reducedMotion = useReducedMotion();\n  const Shader = VARIANT_COMPONENTS[variant] as ComponentType<\n    Record<string, unknown>\n  >;\n  const props = rest as Record<string, unknown>;\n  const speedProps = reducedMotion && \"speed\" in props ? { speed: 0 } : {};\n\n  return (\n    <Shader\n      {...props}\n      {...speedProps}\n      className={cn(\"h-full w-full\", className)}\n    />\n  );\n}\n"},{"path":"components/motion/tabs.tsx","type":"util","content":"\"use client\";\n\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cancelFrame, frame, motion, MotionConfig, useReducedMotion, type Transition } from \"motion/react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport { EASE_OUT } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\ntype Variant = \"pill\" | \"underline\" | \"segment\";\n\ntype Ctx = {\n  value: string;\n  setValue: (v: string) => void;\n  layoutId: string;\n  variant: Variant;\n};\n\nconst TabsCtx = createContext<Ctx | null>(null);\n\nfunction useTabs() {\n  const ctx = useContext(TabsCtx);\n  if (!ctx) throw new Error(\"Tabs.* must be used inside <Tabs>\");\n  return ctx;\n}\n\n// Settle without overshoot: a scrollable tab list would turn even a small\n// overshoot into a transient scrollbar and layout shift.\n// Scale stiffness and damping together for a quicker glide with the same feel.\nconst transition: Transition = {\n  type: \"spring\",\n  stiffness: 245,\n  damping: 36,\n  mass: 1.2,\n};\n\nexport function Tabs({\n  defaultValue,\n  value,\n  onValueChange,\n  variant = \"pill\",\n  children,\n  className,\n}: {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (v: string) => void;\n  variant?: Variant;\n  children: ReactNode;\n  className?: string;\n}) {\n  const [internal, setInternal] = useState(defaultValue ?? \"\");\n  const layoutId = useId();\n  const reduce = useReducedMotion();\n  const controlled = value !== undefined;\n  const current = controlled ? value : internal;\n  const setValue = useCallback(\n    (v: string) => {\n      if (!controlled) setInternal(v);\n      onValueChange?.(v);\n    },\n    [controlled, onValueChange],\n  );\n  const contextValue = useMemo(\n    () => ({ value: current, setValue, layoutId, variant }),\n    [current, layoutId, setValue, variant],\n  );\n  return (\n    <MotionConfig transition={reduce ? { duration: 0 } : transition}>\n      <TabsCtx.Provider value={contextValue}>\n        {/* layoutRoot: the indicator's layoutId measures in page coordinates, so\n            inside fixed/scrolled containers it would replay scroll offsets as\n            movement. The pill only ever travels within the list, so scoping\n            projection to the Tabs wrapper is always correct. */}\n        <motion.div layoutRoot className={className}>\n          {children}\n        </motion.div>\n      </TabsCtx.Provider>\n    </MotionConfig>\n  );\n}\n\nconst listClasses: Record<Variant, string> = {\n  pill: \"inline-flex items-center gap-1 rounded-full bg-card p-1\",\n  underline: \"inline-flex items-center gap-1 border-b border-border\",\n  segment: \"inline-flex items-center gap-0 rounded-lg bg-card p-0.5\",\n};\n\nexport function TabsList({\n  children,\n  className,\n  wrapperClassName,\n}: {\n  children: ReactNode;\n  className?: string;\n  wrapperClassName?: string;\n}) {\n  const { variant, value } = useTabs();\n  const reduce = useReducedMotion();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const listRef = useRef<HTMLDivElement>(null);\n  const viewportId = useId();\n  const [edges, setEdges] = useState({ overflow: false, left: false, right: false });\n\n  const measure = useCallback(() => {\n    const root = rootRef.current;\n    const viewport = viewportRef.current;\n    if (!root || !viewport) return;\n    // Overlay controls do not reduce the viewport or change its scroll range.\n    const overflow = viewport.scrollWidth > root.clientWidth + 1;\n    const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth);\n    const rtl = getComputedStyle(viewport).direction === \"rtl\";\n    // Modern browsers expose negative scrollLeft in RTL. Clamp rubber-banding.\n    const fromLeft = Math.max(0, Math.min(max, rtl ? max + viewport.scrollLeft : viewport.scrollLeft));\n    const next = { overflow, left: fromLeft > 1, right: fromLeft < max - 1 };\n    setEdges((previous) => previous.overflow === next.overflow && previous.left === next.left && previous.right === next.right ? previous : next);\n  }, []);\n\n  const reveal = useCallback((tab: HTMLElement | null) => {\n    const viewport = viewportRef.current;\n    if (!viewport || !tab) return;\n    const frame = viewport.getBoundingClientRect();\n    const item = tab.getBoundingClientRect();\n    const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth);\n    const rtl = getComputedStyle(viewport).direction === \"rtl\";\n    const fromLeft = Math.max(0, Math.min(max, rtl ? max + viewport.scrollLeft : viewport.scrollLeft));\n    // Keep the selected/focused label clear of the arrows over the faded edges.\n    const left = frame.left + (fromLeft > 1 ? 36 : 0);\n    const right = frame.right - (fromLeft < max - 1 ? 36 : 0);\n    const delta = item.left < left ? item.left - left : item.right > right ? item.right - right : 0;\n    // Scroll only this viewport; scrollIntoView can also move the whole page.\n    if (delta) viewport.scrollBy({ left: delta, behavior: reduce ? \"instant\" : \"smooth\" });\n  }, [reduce]);\n\n  useLayoutEffect(() => {\n    const root = rootRef.current;\n    const viewport = viewportRef.current;\n    const list = listRef.current;\n    if (!root || !viewport || !list) return;\n    const update = () => {\n      measure();\n      reveal(list.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]'));\n    };\n    const observer = new ResizeObserver(update);\n    observer.observe(root);\n    observer.observe(viewport);\n    observer.observe(list);\n    viewport.addEventListener(\"scroll\", measure, { passive: true });\n    update();\n    return () => {\n      observer.disconnect();\n      viewport.removeEventListener(\"scroll\", measure);\n    };\n  }, [measure, reveal]);\n\n  useLayoutEffect(() => {\n    // Children may change without a resize; controlled selection must also reveal.\n    void children;\n    void value;\n    void edges.overflow;\n    measure();\n    reveal(listRef.current?.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]') ?? null);\n  }, [children, value, edges.overflow, measure, reveal]);\n\n  useLayoutEffect(() => {\n    if (variant === \"underline\") return;\n    const list = listRef.current;\n    if (!list) return;\n    void children;\n    const labels = Array.from(list.querySelectorAll<HTMLElement>(\"[data-tabs-label]\"));\n    const indicator = list.querySelector<HTMLElement>(\"[data-tabs-indicator]\");\n    const target = list.querySelector<HTMLElement>('[role=\"tab\"][aria-selected=\"true\"]');\n    if (!indicator || !target || target.dataset.tabsValue !== value) {\n      for (const label of labels) label.style.clipPath = \"inset(0 100% 0 0)\";\n      return;\n    }\n    let frames = 0;\n    let stillFrames = 0;\n    let previous: { left: number; right: number } | undefined;\n    const syncClips = () => {\n      const pill = (reduce ? target : indicator).getBoundingClientRect();\n      // Read ALL geometry before writing ANY masks. A loop per tab interleaved\n      // reads and writes, forcing the browser to flush styles repeatedly.\n      const clips = labels.map((label) => {\n        const bounds = label.getBoundingClientRect();\n        const left = Math.max(0, Math.min(bounds.width, pill.left - bounds.left));\n        const right = Math.max(0, Math.min(bounds.width, bounds.right - pill.right));\n        return left + right >= bounds.width ? \"inset(0 100% 0 0)\" : `inset(0 ${right}px 0 ${left}px)`;\n      });\n      labels.forEach((label, index) => {\n        if (label.style.clipPath !== clips[index]) label.style.clipPath = clips[index];\n      });\n      frames += 1;\n      stillFrames = previous && Math.abs(pill.left - previous.left) < 0.01 && Math.abs(pill.right - previous.right) < 0.01 ? stillFrames + 1 : 0;\n      previous = { left: pill.left, right: pill.right };\n      if (reduce || (frames > 2 && stillFrames >= 2)) cancelFrame(syncClips);\n    };\n    // One shared pass after Motion paints the projected pill keeps every label\n    // in sync, including labels crossed during a long or interrupted glide.\n    frame.postRender(syncClips, true);\n    return () => cancelFrame(syncClips);\n  }, [value, children, variant, reduce]);\n\n  const scroll = (direction: number) => {\n    const viewport = viewportRef.current;\n    if (viewport) viewport.scrollBy({ left: direction * viewport.clientWidth * 0.8, behavior: reduce ? \"instant\" : \"smooth\" });\n  };\n  const controlClass = \"absolute inset-y-0 z-20 inline-flex w-9 items-center justify-center text-foreground transition-opacity hover:opacity-70 focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-0\";\n  const surfaceClass = variant === \"pill\" ? \"rounded-full bg-card\" : variant === \"segment\" ? \"rounded-lg bg-card\" : \"\";\n\n  return (\n    <div ref={rootRef} className={cn(\"relative isolate flex w-full max-w-full min-w-0 items-center\", edges.overflow && surfaceClass, wrapperClassName)}>\n      {edges.overflow && (\n        <button type=\"button\" aria-label=\"Scroll tabs left\" aria-controls={viewportId} disabled={!edges.left} onClick={() => scroll(-1)} className={cn(controlClass, \"left-0 rounded-l-full\")}>\n          <ChevronLeft size={20} aria-hidden=\"true\" />\n        </button>\n      )}\n      <motion.div\n        ref={viewportRef}\n        id={viewportId}\n        layoutScroll\n        className={cn(\"w-full min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\", edges.overflow && \"[border-radius:inherit]\")}\n        style={edges.overflow ? {\n          maskImage: `linear-gradient(to right, ${edges.left ? \"transparent, black 40px\" : \"black, black 0px\"}, ${edges.right ? \"black calc(100% - 40px), transparent\" : \"black 100%\"})`,\n        } : undefined}\n        onFocusCapture={(event) => {\n          if (event.target instanceof HTMLElement && event.target.getAttribute(\"role\") === \"tab\") reveal(event.target);\n        }}\n      >\n        <div ref={listRef} role=\"tablist\" className={cn(listClasses[variant], \"w-max\", className)}>\n          {children}\n        </div>\n      </motion.div>\n      {edges.overflow && edges.left && (\n        <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-y-0 left-0 z-10 w-10 rounded-l-[inherit] backdrop-blur-[2px] [mask-image:linear-gradient(to_right,black,transparent)]\" />\n      )}\n      {edges.overflow && edges.right && (\n        <span aria-hidden=\"true\" className=\"pointer-events-none absolute inset-y-0 right-0 z-10 w-10 rounded-r-[inherit] backdrop-blur-[2px] [mask-image:linear-gradient(to_left,black,transparent)]\" />\n      )}\n      {edges.overflow && (\n        <button type=\"button\" aria-label=\"Scroll tabs right\" aria-controls={viewportId} disabled={!edges.right} onClick={() => scroll(1)} className={cn(controlClass, \"right-0 rounded-r-full\")}>\n          <ChevronRight size={20} aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport function TabsTrigger({\n  value,\n  children,\n  className,\n  indicatorClassName,\n}: {\n  value: string;\n  children: ReactNode;\n  className?: string;\n  indicatorClassName?: string;\n}) {\n  const { value: current, setValue, layoutId, variant } = useTabs();\n  const active = current === value;\n  // React owns the initial mask only; TabsList synchronizes subsequent masks.\n  const [initialClip] = useState(() => active ? \"inset(0)\" : \"inset(0 100% 0 0)\");\n\n  if (variant === \"underline\") {\n    return (\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={active}\n        onClick={() => setValue(value)}\n        className={cn(\n          \"relative isolate px-3 pb-2.5 pt-1 -mb-px text-sm font-medium transition-colors min-h-[44px] inline-flex items-center whitespace-nowrap shrink-0\",\n          active ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\",\n          className,\n        )}\n      >\n        {children}\n        {active ? (\n        <motion.span\n          layoutId={layoutId}\n          layout\n          className={cn(\n            \"absolute bottom-0 left-0 right-0 h-px bg-primary\",\n            indicatorClassName,\n          )}\n        />\n        ) : null}\n      </button>\n    );\n  }\n\n  const radius = variant === \"pill\" ? \"rounded-full\" : \"rounded-md\";\n\n  return (\n    <div className=\"relative shrink-0\">\n      {active ? (\n        <motion.span\n          data-tabs-indicator=\"\"\n          layoutId={layoutId}\n          layout\n          style={{ borderRadius: variant === \"pill\" ? 9999 : 8 }}\n          className={cn(\n            \"absolute inset-0 bg-primary\",\n            radius,\n            indicatorClassName,\n          )}\n        />\n      ) : null}\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={active}\n        data-tabs-value={value}\n        onClick={() => setValue(value)}\n        className={cn(\n          \"relative z-10 inline-flex items-center justify-center whitespace-nowrap bg-transparent px-3.5 py-1.5 text-sm font-medium outline-none\",\n          \"text-muted-foreground hover:text-foreground\",\n          radius,\n          className,\n        )}\n      >\n        {children}\n        <span\n          data-tabs-label=\"\"\n          aria-hidden=\"true\"\n          inert\n          className=\"pointer-events-none absolute inset-0 inline-flex items-center justify-center text-primary-foreground [gap:inherit] [padding:inherit]\"\n          style={{ clipPath: initialClip }}\n        >\n          {children}\n        </span>\n      </button>\n    </div>\n  );\n}\n\nexport function TabsContent({ value, children, className }: { value: string; children: ReactNode; className?: string }) {\n  const { value: current } = useTabs();\n  const reduce = useReducedMotion();\n  const active = current === value;\n  // Inactive panels stay mounted but hidden, so their content (e.g. source\n  // code) is present in the server-rendered HTML for crawlers and assistive\n  // tech, instead of being dropped from the DOM.\n  if (!active) {\n    return (\n      <div hidden className={className}>\n        {children}\n      </div>\n    );\n  }\n  return (\n    <motion.div\n      key={value}\n      initial={{ opacity: 0, y: reduce ? 0 : 4 }}\n      animate={{ opacity: 1, y: 0 }}\n      transition={{ duration: 0.18, ease: EASE_OUT }}\n      className={cn(\"mt-4\", className)}\n    >\n      {children}\n    </motion.div>\n  );\n}\n"},{"path":"lib/ease.ts","type":"util","content":"// Shared motion tokens. Easing curves mirror the CSS custom properties in\n// globals.css; springs are the canonical physics used across components.\n// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.\n\nexport const EASE_OUT = [0.16, 1, 0.3, 1] as const;\nexport const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;\nexport const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;\n\n/** CSS string form of EASE_OUT for inline style transitions. */\nexport const EASE_OUT_CSS = \"cubic-bezier(0.16, 1, 0.3, 1)\";\n\n/** Press feedback on buttons and other tappable surfaces. */\nexport const SPRING_PRESS = {\n  type: \"spring\",\n  stiffness: 500,\n  damping: 30,\n  mass: 0.6,\n} as const;\n\n/** Content swaps — label/icon slots trading places inside a control. */\nexport const SPRING_SWAP = {\n  type: \"spring\",\n  stiffness: 460,\n  damping: 30,\n  mass: 0.55,\n} as const;\n\n/** Overlay panel entrances — modals and sheets summoned by pointer. */\nexport const SPRING_PANEL = {\n  type: \"spring\",\n  stiffness: 420,\n  damping: 40,\n  mass: 0.5,\n} as const;\n\n/** Shared-layout glides — pills, indicators and panels morphing between positions. */\nexport const SPRING_LAYOUT = {\n  type: \"spring\",\n  stiffness: 360,\n  damping: 32,\n  mass: 0.6,\n} as const;\n\n/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */\nexport const SPRING_MOUSE = {\n  stiffness: 200,\n  damping: 15,\n  mass: 0.3,\n} as const;\n\n/** Dragged handles and fills (sliders) — critically damped `useSpring` config,\n * so the value follows the pointer butterily and never rebounds off an end. */\nexport const SPRING_GLIDE = {\n  stiffness: 700,\n  damping: 50,\n  mass: 0.5,\n} as const;\n"}]}