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

'use client';

import React from 'react';
import { m, LazyMotion, domAnimation } 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 (
    <LazyMotion features={domAnimation}>
    <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`}
    >
      {children}
    </m.div>
    </LazyMotion>
  );
};

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

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