diff --git a/app/_ui/HomePageServer.tsx b/app/_ui/HomePageServer.tsx
index 67f150c..f29c486 100644
--- a/app/_ui/HomePageServer.tsx
+++ b/app/_ui/HomePageServer.tsx
@@ -1,5 +1,6 @@
 import Header from "../components/Header.server";
 import Hero from "../components/Hero";
+import ScrollFadeIn from "../components/ScrollFadeIn";
 import Script from "next/script";
 import {
   getAboutTranslations,
@@ -78,7 +79,9 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
           </svg>
         </div>
 
-        <AboutClient locale={locale} translations={aboutT} />
+        <ScrollFadeIn>
+          <AboutClient locale={locale} translations={aboutT} />
+        </ScrollFadeIn>
 
         {/* Wavy Separator 2 - About to Projects */}
         <div className="relative h-24 overflow-hidden">
@@ -101,7 +104,9 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
           </svg>
         </div>
 
-        <ProjectsClient locale={locale} translations={projectsT} />
+        <ScrollFadeIn>
+          <ProjectsClient locale={locale} translations={projectsT} />
+        </ScrollFadeIn>
 
         {/* Wavy Separator 3 - Projects to Contact */}
         <div className="relative h-24 overflow-hidden">
@@ -124,9 +129,13 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
           </svg>
         </div>
 
-        <ContactClient locale={locale} translations={contactT} />
+        <ScrollFadeIn>
+          <ContactClient locale={locale} translations={contactT} />
+        </ScrollFadeIn>
       </main>
-      <FooterClient locale={locale} translations={footerT} />
+      <ScrollFadeIn>
+        <FooterClient locale={locale} translations={footerT} />
+      </ScrollFadeIn>
     </div>
   );
 }
diff --git a/app/components/ScrollFadeIn.tsx b/app/components/ScrollFadeIn.tsx
new file mode 100644
index 0000000..dd1194e
--- /dev/null
+++ b/app/components/ScrollFadeIn.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { useRef, useEffect, useState, type ReactNode } from "react";
+
+interface ScrollFadeInProps {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+}
+
+/**
+ * Wraps children in a fade-in-up animation triggered by scroll.
+ * Unlike Framer Motion's initial={{ opacity: 0 }}, this does NOT
+ * render opacity:0 in SSR HTML — content is visible by default
+ * and only hidden after JS hydration for the animation effect.
+ */
+export default function ScrollFadeIn({ children, className = "", delay = 0 }: ScrollFadeInProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [hasMounted, setHasMounted] = useState(false);
+
+  useEffect(() => {
+    setHasMounted(true);
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(el);
+        }
+      },
+      { threshold: 0.1 }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      style={hasMounted ? {
+        opacity: isVisible ? 1 : 0,
+        transform: isVisible ? "translateY(0)" : "translateY(30px)",
+        transition: `opacity 0.6s ease ${delay}s, transform 0.6s ease ${delay}s`,
+      } : undefined}
+    >
+      {children}
+    </div>
+  );
+}