Fertig

components/scroll-reveal.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function ScrollReveal() {
+    useEffect(() => {
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: "0px 0px -50px 0px",
+        };
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.classList.add("active");
+                }
+            });
+        }, observerOptions);
+
+        const revealElements = document.querySelectorAll(".reveal");
+        revealElements.forEach((el) => observer.observe(el));
+
+        return () => {
+            revealElements.forEach((el) => observer.unobserve(el));
+        };
+    }, []);
+
+    return null;
+}