reveals

components/Reveal.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React from 'react';
+import { motion } 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 (
+    <motion.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}
+    </motion.div>
+  );
+};
+
+interface StaggerProps {
+  children: React.ReactNode;
+  className?: string;
+  staggerDelay?: number;
+}
+
+export const Stagger = ({ 
+  children, 
+  className = '', 
+  staggerDelay = 0.1 
+}: StaggerProps) => {
+  return (
+    <motion.div
+      initial="initial"
+      whileInView="animate"
+      viewport={{ once: true, margin: "-50px" }}
+      variants={{
+        animate: {
+          transition: {
+            staggerChildren: staggerDelay,
+          },
+        },
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+};