Css Box Non Uniform Demo

1import { useEffect, useRef } from "react"
2 
3import { cn } from "@/lib/utils"
4import CSSBox, { CSSBoxRef } from "@/components/fancy/blocks/css-box"
5 
6const BoxText = ({ className }: { className?: string }) => (
7  <div
8    className={cn(
9      "w-full h-full text-white flex items-center justify-center p-2 text-sm font-bold bg-transparent",
10      className
11    )}
12  >
13    ANYTHING IS POSSIBLE
14  </div>
15)
16 
17export default function CSSBox2Demo() {
18  const boxRefs = useRef<(CSSBoxRef | null)[]>([])
19 
20  useEffect(() => {
21    const animate = async () => {
22      const delay = (ms: number) =>
23        new Promise((resolve) => setTimeout(resolve, ms))
24 
25      while (true) {
26        // Rotate to right face
27        for (let i = 0; i < boxRefs.current.length; i++) {
28          boxRefs.current[i]?.showRight()
29          await delay(50)
30        }
31        await delay(1000)
32 
33        // Rotate to back face
34        for (let i = 0; i < boxRefs.current.length; i++) {
35          boxRefs.current[i]?.showBack()
36          await delay(50)
37        }
38        await delay(1000)
39 
40        // Rotate to left face
41        for (let i = 0; i < boxRefs.current.length; i++) {
42          boxRefs.current[i]?.showLeft()
43          await delay(50)
44        }
45        await delay(1000)
46 
47        // Rotate to front face
48        for (let i = 0; i < boxRefs.current.length; i++) {
49          boxRefs.current[i]?.showFront()
50          await delay(50)
51        }
52        await delay(1000)
53      }
54    }
55 
56    animate()
57  }, [])
58 
59  return (
60    <div className="flex flex-col items-center justify-center w-dvw h-dvh bg-black">
61      <div>
62        {[...Array(12)].map((_, index) => (
63          <CSSBox
64            key={index}
65            ref={(el) => {
66              if (el) boxRefs.current[index] = el
67            }}
68            width={200}
69            height={30}
70            depth={200}
71            draggable={false}
72            className="hover:z-10"
73            faces={{
74              front: <BoxText className=" border-white " />,
75              back: <BoxText className=" border-white" />,
76              left: <BoxText className=" border-white bg-white text-black" />,
77              right: <BoxText className=" border-white bg-white text-black" />,
78            }}
79          />
80        ))}
81      </div>
82    </div>
83  )
84}