Css Box Hover Demo

1import { useEffect, useRef } from "react"
2 
3import { cn } from "@/lib/utils"
4import CSSBox, { CSSBoxRef } from "@/components/fancy/blocks/css-box"
5 
6const BoxText = ({
7  children,
8  className,
9  i,
10}: {
11  children: React.ReactNode
12  className?: string
13  i: number
14}) => (
15  <div
16    className={cn(
17      "w-full h-full uppercase text-white flex items-center justify-center p-0 text-2xl md:text-3xl font-bold",
18      className
19    )}
20  >
21    {children}
22  </div>
23)
24 
25export default function CSSBoxHoverDemo() {
26  const boxRefs = useRef<(CSSBoxRef | null)[]>([])
27  const isRotating = useRef<boolean[]>([])
28  const currentRotations = useRef<number[]>([])
29 
30  const boxes = [
31    { text: "January 15, 2025", size: 300 },
32    { text: "Live Q&A", size: 200 },
33    { text: "10:00", size: 120 },
34    { text: "to", size: 70 },
35    { text: "11:30", size: 120 },
36    { text: "CET", size: 120 },
37    { text: "Online", size: 180 },
38    { text: "Recording Available", size: 380 },
39    { text: "In English", size: 220 },
40    { text: "Register Now", size: 280 },
41    { text: "Free Access", size: 240 },
42  ]
43 
44  useEffect(() => {
45    currentRotations.current = new Array(boxes.length).fill(0)
46  }, [])
47 
48  const handleHover = async (index: number) => {
49    if (isRotating.current[index]) return
50 
51    isRotating.current[index] = true
52    const box = boxRefs.current[index]
53    if (!box) return
54 
55    const nextRotation = currentRotations.current[index] + 90
56    currentRotations.current[index] = nextRotation
57 
58    box.rotateTo(0, nextRotation)
59 
60    isRotating.current[index] = false
61  }
62 
63  return (
64    <div className="flex flex-col items-center justify-center w-dvw h-dvh bg-[#111]">
65      {boxes.map(({ text, size }, index) => (
66        <CSSBox
67          key={index}
68          ref={(el) => {
69            if (el) {
70              boxRefs.current[index] = el
71              isRotating.current[index] = false
72              currentRotations.current[index] = 0
73            }
74          }}
75          width={size}
76          height={35}
77          depth={size}
78          draggable={false}
79          className="hover:z-10"
80          onMouseEnter={() => handleHover(index)}
81          faces={{
82            front: <BoxText i={index}>{text}</BoxText>,
83            back: (
84              <BoxText i={index} className="">
85                {text}
86              </BoxText>
87            ),
88            left: <BoxText i={index}>{text}</BoxText>,
89            right: (
90              <BoxText i={index} className="">
91                {text}
92// … truncated