ss

components/ScrollReveal.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+interface ScrollRevealProps {
+  children: React.ReactNode;
+  className?: string;
+  stagger?: boolean;
+  delay?: number;
+  threshold?: number;
+}
+
+export default function ScrollReveal({
+  children,
+  className = "",
+  stagger = false,
+  delay = 0,
+  threshold = 0.12,
+}: ScrollRevealProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const trigger = () => el.classList.add("visible");
+            delay > 0 ? setTimeout(trigger, delay) : trigger();
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold }
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [delay, threshold]);
+
+  return (
+    <div
+      ref={ref}
+      className={`${stagger ? "reveal-stagger" : "reveal"} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}