import { useEffect, useRef } from "react" import { cn } from "@/lib/utils" import CSSBox, { CSSBoxRef } from "@/components/fancy/blocks/css-box" const BoxText = ({ className }: { className?: string }) => (

ANYTHING IS POSSIBLE

) export default function CSSBox2Demo() { const boxRefs = useRef<(CSSBoxRef | null)[]>([]) useEffect(() => { const animate = async () => { const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)) while (true) { // Rotate to right face for (let i = 0; i < boxRefs.current.length; i++) { boxRefs.current[i]?.showRight() await delay(50) } await delay(1000) // Rotate to back face for (let i = 0; i < boxRefs.current.length; i++) { boxRefs.current[i]?.showBack() await delay(50) } await delay(1000) // Rotate to left face for (let i = 0; i < boxRefs.current.length; i++) { boxRefs.current[i]?.showLeft() await delay(50) } await delay(1000) // Rotate to front face for (let i = 0; i < boxRefs.current.length; i++) { boxRefs.current[i]?.showFront() await delay(50) } await delay(1000) } } animate() }, []) return (

{[...Array(12)].map((_, index) => ( { if (el) boxRefs.current[index] = el }} width={200} height={30} depth={200} draggable={false} className="hover:z-10" faces={{ front: , back: , left: , right: , }} /> ))}

) }

Css Box Non Uniform Demo

Instalação

Registry dependencies