Box Reveal

1"use client";
2 
3import { useEffect, useRef } from "react";
4 
5import { motion, useAnimation, useInView } from "motion/react";
6 
7import { cn } from "@/lib/utils";
8 
9interface BoxRevealProps {
10  children: React.ReactNode;
11  side?: "left" | "right";
12  width?: "fit-content" | "full";
13  color?: string;
14  className?: string;
15}
16 
17export const BoxReveal = ({
18  children,
19  side = "left",
20  width = "fit-content",
21  color = "#FACC15",
22  className,
23}: BoxRevealProps) => {
24  const ref = useRef(null);
25  const isInView = useInView(ref, { once: true });
26 
27  const contentAnimation = useAnimation();
28  const overlayAnimation = useAnimation();
29 
30  useEffect(() => {
31    if (isInView) {
32      contentAnimation.start("visible");
33      overlayAnimation.start("visible");
34    }
35  }, [isInView, contentAnimation, overlayAnimation]);
36 
37  return (
38    <div
39      ref={ref}
40      className={cn(
41        "relative overflow-hidden",
42        width === "full" ? "w-full" : "w-fit",
43        className
44      )}
45    >
46      <motion.div
47        variants={{
48          hidden: { opacity: 0, y: 75 },
49          visible: { opacity: 1, y: 0 },
50        }}
51        initial="hidden"
52        animate={contentAnimation}
53        transition={{ duration: 0.5, delay: 0.35 }}
54        viewport={{ once: true }}
55      >
56        {children}
57      </motion.div>
58 
59      <motion.div
60        variants={{
61          hidden: side === "right" ? { right: 0 } : { left: 0 },
62          visible: side === "right" ? { right: "100%" } : { left: "100%" },
63        }}
64        initial="hidden"
65        animate={overlayAnimation}
66        transition={{ duration: 0.5, ease: "easeIn" }}
67        viewport={{ once: true }}
68        className="pointer-events-none absolute inset-0 top-1 bottom-1 z-20"
69        style={{
70          background: color,
71        }}
72      />
73    </div>
74  );
75};