Scroll Zoom

"use client";

import { useRef, type ReactNode } from "react";
import { motion, useReducedMotion, useScroll, useTransform } from "motion/react";
import { cn } from "@/lib/utils";

export interface ScrollZoomProps {
  children: ReactNode;
  /** Scale at the start of the scroll range. */
  from?: number;
  className?: string;
}

/** Scroll-linked showcase: as the element travels up the viewport it scales up from `from` to 1, un-tilts and gains opacity — the classic product-screenshot zoom. */
export function ScrollZoom({ children, from = 0.82, className }: ScrollZoomProps) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "center center"] });
  const scale = useTransform(scrollYProgress, [0, 1], [from, 1]);
  const rotateX = useTransform(scrollYProgress, [0, 1], [18, 0]);
  const opacity = useTransform(scrollYProgress, [0, 0.6], [0.3, 1]);

  return (
    <div ref={ref} className={cn("[perspective:1400px]", className)}>
      <motion.div style={reduce ? undefined : { scale, rotateX, opacity, transformOrigin: "50% 100%" }}>{children}</motion.div>
    </div>
  );
}

export default ScrollZoom;