import { useRef } from "react" import { useScroll, useTransform } from "motion/react" import { cn } from "@/lib/utils" import useScreenSize from "@/hooks/use-screen-size" import CSSBox, { CSSBoxRef } from "@/components/fancy/blocks/css-box" const BoxFace = ({ imageUrl, className, }: { imageUrl: string className?: string }) => (

JUN14

New Arrivals

SS25

) export default function CSSBoxScrollDemo() { const boxRef = useRef(null) const containerRef = useRef(null) const screenSize = useScreenSize() const { scrollYProgress } = useScroll({ container: containerRef, }) // Transform scroll progress (0-1) to rotation (0-360) const rotation = useTransform(scrollYProgress, [0, 1], [0, 360]) // Update box rotation when scroll transform changes rotation.on("change", (latest) => { boxRef.current?.rotateTo(0, latest) }) const imageUrl = "https://cdn.cosmos.so/276cdd4e-8a7a-4c32-955f-83c5900a0926?format=jpeg" const boxWidth = screenSize.lessThan("md") ? 220 : 300 const boxHeight = screenSize.lessThan("md") ? 300 : 400 const boxDepth = screenSize.lessThan("md") ? 220 : 300 return (

, back: , left: , right: , }} />

) }

Css Box Scroll Demo

Instalação

Dependências

Registry dependencies