Container Scroll Animation

1"use client";
2import React, { useRef } from "react";
3import { useScroll, useTransform, motion, MotionValue } from "motion/react";
4 
5export const ContainerScroll = ({
6  titleComponent,
7  children,
8}: {
9  titleComponent: string | React.ReactNode;
10  children: React.ReactNode;
11}) => {
12  const containerRef = useRef<HTMLDivElement>(null);
13  const { scrollYProgress } = useScroll({
14    target: containerRef,
15  });
16  const [isMobile, setIsMobile] = React.useState(false);
17 
18  React.useEffect(() => {
19    const checkMobile = () => {
20      setIsMobile(window.innerWidth <= 768);
21    };
22    checkMobile();
23    window.addEventListener("resize", checkMobile);
24    return () => {
25      window.removeEventListener("resize", checkMobile);
26    };
27  }, []);
28 
29  const scaleDimensions = () => {
30    return isMobile ? [0.7, 0.9] : [1.05, 1];
31  };
32 
33  const rotate = useTransform(scrollYProgress, [0, 1], [20, 0]);
34  const scale = useTransform(scrollYProgress, [0, 1], scaleDimensions());
35  const translate = useTransform(scrollYProgress, [0, 1], [0, -100]);
36 
37  return (
38    <div
39      className="h-[60rem] md:h-[80rem] flex items-center justify-center relative p-2 md:p-20"
40      ref={containerRef}
41    >
42      <div
43        className="py-10 md:py-40 w-full relative"
44        style={{
45          perspective: "1000px",
46        }}
47      >
48        <Header translate={translate} titleComponent={titleComponent} />
49        <Card rotate={rotate} translate={translate} scale={scale}>
50          {children}
51        </Card>
52      </div>
53    </div>
54  );
55};
56 
57export const Header = ({ translate, titleComponent }: any) => {
58  return (
59    <motion.div
60      style={{
61        translateY: translate,
62      }}
63      className="div max-w-5xl mx-auto text-center"
64    >
65      {titleComponent}
66    </motion.div>
67  );
68};
69 
70export const Card = ({
71  rotate,
72  scale,
73  children,
74}: {
75  rotate: MotionValue<number>;
76  scale: MotionValue<number>;
77  translate: MotionValue<number>;
78  children: React.ReactNode;
79}) => {
80  return (
81    <motion.div
82      style={{
83        rotateX: rotate,
84        scale,
85        boxShadow:
86          "0 0 #0000004d, 0 9px 20px #0000004a, 0 37px 37px #00000042, 0 84px 50px #00000026, 0 149px 60px #0000000a, 0 233px 65px #00000003",
87      }}
88      className="max-w-5xl -mt-12 mx-auto h-[30rem] md:h-[40rem] w-full border-4 border-[#6C6C6C] p-2 md:p-6 bg-[#222222] rounded-[30px] shadow-2xl"
89    >
90      <div className=" h-full w-full  overflow-hidden rounded-2xl bg-gray-100 dark:bg-zinc-900 md:rounded-2xl md:p-4 ">
91// … truncated