Scale In

"use client";

import type { ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";

export interface ScaleInProps {
  children: ReactNode;
  /** Starting scale. */
  from?: number;
  /** Add a slight 3D tilt that settles flat (for product screenshots). */
  tilt?: boolean;
  delay?: number;
  className?: string;
}

/** Product-shot entrance: content scales up from 0.94 (optionally from a slight perspective tilt) and fades in with a gentle ease when it enters the viewport. */
export function ScaleIn({ children, from = 0.94, tilt = true, delay = 0, className }: ScaleInProps) {
  const reduce = useReducedMotion();
  return (
    <div className={className} style={{ perspective: 1200 }}>
      <motion.div
        initial={reduce ? false : { opacity: 0, scale: from, rotateX: tilt ? 14 : 0, y: tilt ? 24 : 0 }}
        whileInView={{ opacity: 1, scale: 1, rotateX: 0, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.8, delay, ease: [0.2, 0, 0, 1] }}
        style={{ transformOrigin: "50% 100%" }}
      >
        {children}
      </motion.div>
    </div>
  );
}

export default ScaleIn;