Box Carousel

1"use client"
2 
3import React, {
4  forwardRef,
5  memo,
6  ReactNode,
7  useCallback,
8  useEffect,
9  useImperativeHandle,
10  useMemo,
11  useRef,
12  useState,
13} from "react"
14import {
15  animate,
16  motion,
17  useMotionValue,
18  useReducedMotion,
19  useSpring,
20  useTransform,
21  ValueAnimationOptions,
22} from "motion/react"
23 
24import { cn } from "@/lib/utils"
25 
26interface CarouselItem {
27  /**
28   * Unique identifier for the carousel item
29   */
30  id: string
31  /**
32   * The type of media: "image" or "video"
33   */
34  type: "image" | "video"
35  /**
36   * Source URL for the image or video
37   */
38  src: string
39  /**
40   * (Optional) Alternative text for images
41   */
42  alt?: string
43  /**
44   * (Optional) Poster image for videos (displayed before playback)
45   */
46  poster?: string
47}
48 
49/**
50 * Props for a single face of the cube in the BoxCarousel.
51 */
52interface FaceProps {
53  /**
54   * The CSS transform string to position and rotate the face in 3D space.
55   */
56  transform: string
57  /**
58   * Optional additional CSS class names for the face.
59   */
60  className?: string
61  /**
62   * Optional React children to render inside the face.
63   */
64  children?: ReactNode
65  /**
66   * Optional inline styles for the face.
67   */
68  style?: React.CSSProperties
69  /**
70   * If true, enables debug mode (e.g., shows backface and opacity).
71   */
72  debug?: boolean
73}
74 
75const CubeFace = memo(
76  ({ transform, className, children, style, debug }: FaceProps) => (
77    <div
78      className={cn(
79        "absolute overflow-hidden",
80        debug && "backface-visible opacity-50",
81        className
82      )}
83      style={{ transform, ...style }}
84    >
85      {children}
86    </div>
87  )
88)
89 
90CubeFace.displayName = "CubeFace"
91 
92const MediaRenderer = memo(
93  ({
94    item,
95    className,
96    debug = false,
97  }: {
98    item: CarouselItem
99    className?: string
100    debug?: boolean
101  }) => {
102    if (!debug) {
103      if (item.type === "video") {
104        return (
105          <video
106            src={item.src}
107            poster={item.poster}
108            className={cn("w-full h-full object-cover", className)}
109            muted
110            loop
111            autoPlay
112          />
113        )
114      }
115 
116      return (
117        <img
118          src={item.src}
119          alt={item.alt || ""}
120          draggable={false}
121          className={cn("w-full h-full object-cover", className)}
122        />
123      )
124    }
125 
126    return (
127      <div
128        className={cn(
129          "w-full h-full flex items-center justify-center border text-2xl",
130          className
131        )}
132      >
133// … truncated