"use client" import React, { forwardRef, memo, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react" import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform, ValueAnimationOptions, } from "motion/react" import { cn } from "@/lib/utils" interface CarouselItem { /** * Unique identifier for the carousel item */ id: string /** * The type of media: "image" or "video" */ type: "image" | "video" /** * Source URL for the image or video */ src: string /** * (Optional) Alternative text for images */ alt?: string /** * (Optional) Poster image for videos (displayed before playback) */ poster?: string } /** * Props for a single face of the cube in the BoxCarousel. */ interface FaceProps { /** * The CSS transform string to position and rotate the face in 3D space. */ transform: string /** * Optional additional CSS class names for the face. */ className?: string /** * Optional React children to render inside the face. */ children?: ReactNode /** * Optional inline styles for the face. */ style?: React.CSSProperties /** * If true, enables debug mode (e.g., shows backface and opacity). */ debug?: boolean } const CubeFace = memo( ({ transform, className, children, style, debug }: FaceProps) => (

{children}

) ) CubeFace.displayName = "CubeFace" const MediaRenderer = memo( ({ item, className, debug = false, }: { item: CarouselItem className?: string debug?: boolean }) => { if (!debug) { if (item.type === "video") { return (

Box Carousel

Instalação

Dependências