Scale In

1"use client";
2import React from "react";
3import { motion, useInView, type Variants } from "motion/react";
4 
5interface ScaleInProps {
6  children: React.ReactNode;
7  duration?: number;
8  delay?: number;
9  scaleFrom?: number;
10  className?: string;
11  once?: boolean;
12}
13 
14const ScaleIn: React.FC<ScaleInProps> = ({
15  children,
16  duration = 0.5,
17  delay = 0,
18  scaleFrom = 0.8,
19  className = "",
20  once = true,
21}) => {
22  const ref = React.useRef<HTMLDivElement>(null);
23  const isInView = useInView(ref, { once, amount: 0.1 });
24 
25  const variants: Variants = {
26    hidden: { scale: scaleFrom, opacity: 0 },
27    visible: {
28      scale: 1,
29      opacity: 1,
30      transition: {
31        duration: duration,
32        delay: delay,
33        ease: [0.215, 0.61, 0.355, 1],
34      },
35    },
36  };
37 
38  return (
39    <motion.div
40      ref={ref}
41      initial="hidden"
42      animate={isInView ? "visible" : "hidden"}
43      variants={variants}
44      className={className}
45    >
46      {children}
47    </motion.div>
48  );
49};
50 
51export default ScaleIn;