Css Box

1"use client"
2 
3import {
4  forwardRef,
5  ReactNode,
6  useCallback,
7  useEffect,
8  useImperativeHandle,
9  useRef,
10} from "react"
11import { motion, useMotionValue, useSpring, useTransform } from "motion/react"
12 
13import { cn } from "@/lib/utils"
14 
15interface FaceProps {
16  transform: string
17  className?: string
18  showBackface?: boolean
19  children?: ReactNode
20  style?: React.CSSProperties
21}
22 
23const CubeFace = ({
24  transform,
25  className,
26  showBackface,
27  children,
28  style,
29}: FaceProps) => (
30  <div
31    className={cn(
32      "absolute",
33      showBackface ? "backface-visible" : "backface-hidden",
34      className
35    )}
36    style={{ transform, ...style }}
37  >
38    {children}
39  </div>
40)
41 
42interface CubeFaces {
43  front?: ReactNode
44  back?: ReactNode
45  right?: ReactNode
46  left?: ReactNode
47  top?: ReactNode
48  bottom?: ReactNode
49}
50 
51export interface CSSBoxRef {
52  showFront: () => void
53  showBack: () => void
54  showLeft: () => void
55  showRight: () => void
56  showTop: () => void
57  showBottom: () => void
58  rotateTo: (x: number, y: number) => void
59  getCurrentRotation: () => { x: number; y: number }
60}
61 
62interface CSSBoxProps extends React.HTMLProps<HTMLDivElement> {
63  width: number
64  height: number
65  depth: number
66  className?: string
67  perspective?: number
68  stiffness?: number
69  damping?: number
70  showBackface?: boolean
71  faces?: CubeFaces
72  draggable?: boolean
73}
74 
75const CSSBox = forwardRef<CSSBoxRef, CSSBoxProps>(
76  (
77    {
78      width,
79      height,
80      depth,
81      className,
82      perspective = 600,
83      stiffness = 100,
84      damping = 30,
85      showBackface = false,
86      faces = {},
87      draggable = true,
88      ...props
89    },
90    ref
91  ) => {
92    const isDragging = useRef(false)
93    const startPosition = useRef({ x: 0, y: 0 })
94    const startRotation = useRef({ x: 0, y: 0 })
95 
96    const baseRotateX = useMotionValue(0)
97    const baseRotateY = useMotionValue(0)
98 
99    const springRotateX = useSpring(baseRotateX, {
100      stiffness,
101      damping,
102      ...(isDragging.current ? { stiffness: stiffness / 2 } : {}),
103    })
104    const springRotateY = useSpring(baseRotateY, {
105      stiffness,
106      damping,
107      ...(isDragging.current ? { stiffness: stiffness / 2 } : {}),
108    })
109 
110    const currentRotation = useRef({ x: 0, y: 0 })
111 
112    useImperativeHandle(
113      ref,
114      () => ({
115        showFront: () => {
116          baseRotateX.set(0)
117          baseRotateY.set(0)
118        },
119        showBack: () => {
120          baseRotateX.set(0)
121          baseRotateY.set(180)
122        },
123// … truncated