Css Box Scroll Demo

1import { useRef } from "react"
2import { useScroll, useTransform } from "motion/react"
3 
4import { cn } from "@/lib/utils"
5import useScreenSize from "@/hooks/use-screen-size"
6import CSSBox, { CSSBoxRef } from "@/components/fancy/blocks/css-box"
7 
8const BoxFace = ({
9  imageUrl,
10  className,
11}: {
12  imageUrl: string
13  className?: string
14}) => (
15  <div className={cn("w-full h-full relative", className)}>
16    <img src={imageUrl} alt="" className="w-full h-full object-cover" />
17    <div
18      className="absolute inset-0"
19      style={{
20        maskImage: "linear-gradient(to top, white 20%, transparent 100%)",
21        WebkitMaskImage: "linear-gradient(to top, white 20%, transparent 100%)",
22        backgroundColor: "rgba(255,255,255,0.4)",
23        backdropFilter: "blur(8px)",
24      }}
25    >
26      <div className="absolute bottom-0 w-full flex flex-col items-start justify-end pb-3">
27        <div className="flex w-full justify-between px-2 items-end">
28          <div className="text-[8px] font-black pb-1">JUN14</div>
29          <div className="text-3xl md:text-5xl font-black px-2">
30            New Arrivals
31          </div>
32          <div className="text-lg md:text-xl font-medium">SS25</div>
33        </div>
34      </div>
35    </div>
36  </div>
37)
38 
39export default function CSSBoxScrollDemo() {
40  const boxRef = useRef<CSSBoxRef>(null)
41  const containerRef = useRef<HTMLDivElement>(null)
42  const screenSize = useScreenSize()
43 
44  const { scrollYProgress } = useScroll({
45    container: containerRef,
46  })
47 
48  // Transform scroll progress (0-1) to rotation (0-360)
49  const rotation = useTransform(scrollYProgress, [0, 1], [0, 360])
50 
51  // Update box rotation when scroll transform changes
52  rotation.on("change", (latest) => {
53    boxRef.current?.rotateTo(0, latest)
54  })
55 
56  const imageUrl =
57    "https://cdn.cosmos.so/276cdd4e-8a7a-4c32-955f-83c5900a0926?format=jpeg"
58 
59  const boxWidth = screenSize.lessThan("md") ? 220 : 300
60  const boxHeight = screenSize.lessThan("md") ? 300 : 400
61  const boxDepth = screenSize.lessThan("md") ? 220 : 300
62 
63  return (
64    <div
65      ref={containerRef}
66      className="relative w-dvw h-dvh overflow-y-auto bg-[#fefefe] flex"
67    >
68      <div className="h-[400%] flex w-full items-start justify-center absolute">
69        <div className="sticky py-28 md:py-16 top-0 left-0 px-6 md:px-12">
70          <CSSBox
71            ref={boxRef}
72            width={boxWidth}
73            height={boxHeight}
74            depth={boxDepth}
75            perspective={2000}
76// … truncated