Fade In Unblur

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