wip

components/blog/SplitHeading.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+interface SplitHeadingProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function SplitHeading({ children, className = '' }: SplitHeadingProps) {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            observer.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div 
+      ref={elementRef}
+      className={`transform transition-all duration-1000 ease-out ${
+        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
+      } ${className}`}
+    >
+      <h3 className="text-2xl md:text-3xl font-bold leading-tight text-text-primary">
+        {children}
+      </h3>
+    </div>
+  );
+}