mb-grid-solutions.com/components/Reveal.tsx

"use client";

import React from "react";
import { m } from "framer-motion";

interface RevealProps {
  children: React.ReactNode;
  className?: string;
  delay?: number;
  direction?: "up" | "down" | "left" | "right";
  fullWidth?: boolean;
  viewportMargin?: string;
  trigger?: "inView" | "mount";
}

export const Reveal = ({
  children,
  className = "",
  delay = 0,
  direction = "up",
  fullWidth = false,
  viewportMargin = "-50px",
  trigger = "inView",
}: RevealProps) => {
  const directions = {
    up: { y: 30 },
    down: { y: -30 },
    left: { x: 30 },
    right: { x: -30 },
  };

  return (
    <m.div
      initial={{
        opacity: 0,
        ...directions[direction],
      }}
      animate={
        trigger === "mount"
          ? {
              opacity: 1,
              x: 0,
              y: 0,
            }
          : undefined
      }
      whileInView={
        trigger === "inView"
          ? {
              opacity: 1,
              x: 0,
              y: 0,
            }
          : undefined
      }
      viewport={
        trigger === "inView"
          ? { once: true, margin: viewportMargin }
          : undefined
      }
      transition={{
        type: "spring",
        stiffness: 50,
        damping: 20,
        mass: 1,
        delay: delay,
      }}
      className={`${fullWidth ? "w-full" : ""} ${className} motion-fix will-change-[transform,opacity]`}
    >
      {children}
    </m.div>
  );
};

interface StaggerProps {
  children: React.ReactNode;
  className?: string;
  staggerDelay?: number;
}

export const Stagger = ({
  children,
  className = "",
  staggerDelay = 0.1,
}: StaggerProps) => {
  return (
    <m.div
      initial="initial"
      whileInView="animate"
      viewport={{ once: true, margin: "-50px" }}
      variants={{
        animate: {
          transition: {
            staggerChildren: staggerDelay,
          },
        },
      }}
      className={className}
    >
      {children}
    </m.div>
  );
};