Smooth Reveal

1"use client";
2import React from "react";
3import { cubicBezier, motion, useInView } from "motion/react";
4 
5type SmoothRevealProps = {
6  children: React.ReactNode;
7  direction?: "up" | "down" | "left" | "right";
8  delay?: number;
9  duration?: number;
10  distance?: number;
11  className?: string;
12  once?: boolean;
13};
14 
15const SmoothReveal: React.FC<SmoothRevealProps> = ({
16  children,
17  direction = "up",
18  delay = 0,
19  duration = 0.8,
20  distance = 100,
21  className = "",
22  once = true,
23}) => {
24  const ref = React.useRef<HTMLDivElement>(null);
25  const isInView = useInView(ref, { once, amount: 0.1 });
26 
27  const getDirectionalProps = () => {
28    switch (direction) {
29      case "down":
30        return { y: -distance };
31      case "left":
32        return { x: distance };
33      case "right":
34        return { x: -distance };
35      case "up":
36      default:
37        return { y: distance };
38    }
39  };
40 
41  const customEasing = cubicBezier(0.2, 0.0, 0.0, 1.0);
42 
43  const variants = {
44    hidden: {
45      opacity: 0,
46      ...getDirectionalProps(),
47    },
48    visible: {
49      opacity: 1,
50      y: 0,
51      x: 0,
52      transition: {
53        duration: duration,
54        ease: customEasing,
55        delay: delay,
56      },
57    },
58  };
59 
60  return (
61    <motion.div
62      ref={ref}
63      initial="hidden"
64      animate={isInView ? "visible" : "hidden"}
65      variants={variants}
66      className={className}
67    >
68      {children}
69    </motion.div>
70  );
71};
72 
73export default SmoothReveal;