Pop In

"use client";

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

export interface PopInProps {
  children: ReactNode;
  delay?: number;
  repeat?: boolean;
  className?: string;
}

/** Scroll-triggered pop: content scales up from 80% with a friendly spring overshoot and fades in. */
export function PopIn({ children, delay = 0, repeat = false, className }: PopInProps) {
  const reduce = useReducedMotion();
  return (
    <motion.div
      className={cn(className)}
      initial={reduce ? false : { opacity: 0, scale: 0.8 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: !repeat, amount: 0.4 }}
      transition={{ delay, type: "spring", stiffness: 300, damping: 16 }}
    >
      {children}
    </motion.div>
  );
}

export default PopIn;