From 765cfd4c69d7b0a338fede2765877942e870dcb6 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Thu, 29 Jan 2026 17:23:32 +0100
Subject: [PATCH] fix header reveal

---
 components/Layout.tsx |  4 ++--
 components/Reveal.tsx | 33 +++++++++++++++++++++------------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/components/Layout.tsx b/components/Layout.tsx
index 8610b77..5db6a88 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -42,7 +42,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <div className="min-h-screen flex flex-col font-sans">
-      <Reveal direction="down" fullWidth className="fixed top-0 left-0 right-0 z-[100]">
+      <Reveal direction="down" fullWidth trigger="mount" className="fixed top-0 left-0 right-0 z-[100]">
         <header
           className={`transition-all duration-300 flex items-center py-1 ${
             isScrolled
@@ -56,7 +56,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             className="relative z-10 flex items-center group"
             aria-label="MB Grid Solutions - Zur Startseite"
           >
-            <div className={`relative transition-all duration-300 ${isScrolled ? 'h-[50px] md:h-[80px] w-[120px] md:w-[200px] my-[-5px]' : 'h-[80px] md:h-[140px] w-[180px] md:w-[320px] my-[-10px] md:my-[-20px]'}`}>
+            <div className={`relative transition-all duration-300 ${isScrolled ? 'h-[50px] md:h-[80px] w-[120px] md:w-[200px] mt-0 mb-[-10px]' : 'h-[80px] md:h-[140px] w-[180px] md:w-[320px] mt-2 md:mt-4 mb-[-20px] md:mb-[-40px]'}`}>
               <Image
                 src="/assets/logo.png"
                 alt="MB Grid Solutions"
diff --git a/components/Reveal.tsx b/components/Reveal.tsx
index fc5b531..d6a135a 100644
--- a/components/Reveal.tsx
+++ b/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,