"use client"; import { motion, useReducedMotion, useScroll, useTransform, } from "motion/react"; import { type ReactNode, type RefObject, useRef } from "react"; import { cn } from "@/lib/utils"; export type ContainerScrollProps = { header?: ReactNode; children: ReactNode; /** rotateX in degrees, from entering the viewport to centred. */ rotate?: [number, number]; scale?: [number, number]; /** Scrollable ancestor to track instead of the window. */ containerRef?: RefObject; className?: string; cardClassName?: string; }; export function ContainerScroll({ header, children, rotate = [20, 0], scale = [1.05, 1], containerRef, className, cardClassName, }: ContainerScrollProps) { const reduceMotion = useReducedMotion(); const ref = useRef(null); const { scrollYProgress } = useScroll({ container: containerRef, offset: ["start end", "center center"], target: ref, }); const rotateX = useTransform(scrollYProgress, [0, 1], rotate); const cardScale = useTransform(scrollYProgress, [0, 1], scale); const headerY = useTransform(scrollYProgress, [0, 1], [40, 0]); return (

{header ? ( {header} ) : null}

{children}

); }