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;
}

export const Reveal = ({ 
  children, 
  className = '', 
  delay = 0, 
  direction = 'up',
  fullWidth = false
}: 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] 
      }}
      whileInView={{ 
        opacity: 1, 
        x: 0, 
        y: 0 
      }}
      viewport={{ once: true, margin: "-50px" }}
      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>
  );
};