fix header reveal

components/Reveal.tsx

@@ -9,14 +9,18 @@ interface RevealProps {
   delay?: number;
   direction?: 'up' | 'down' | 'left' | 'right';
   fullWidth?: boolean;
+  viewportMargin?: string;
+  trigger?: 'inView' | 'mount';
 }
 
-export const Reveal = ({ 
-  children, 
-  className = '', 
-  delay = 0, 
+export const Reveal = ({
+  children,
+  className = '',
+  delay = 0,
   direction = 'up',
-  fullWidth = false
+  fullWidth = false,
+  viewportMargin = "-50px",
+  trigger = 'inView'
 }: RevealProps) => {
   const directions = {
     up: { y: 30 },
@@ -30,14 +34,19 @@ export const Reveal = ({
     <m.div
       initial={{
         opacity: 0,
-        ...directions[direction] 
+        ...directions[direction]
       }}
-      whileInView={{ 
-        opacity: 1, 
-        x: 0, 
-        y: 0 
-      }}
-      viewport={{ once: true, margin: "-50px" }}
+      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,