Fade In

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