Initialize repo

components/ui/fade-in.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { motion, useInView } from "framer-motion";
+import { useRef } from "react";
+
+interface FadeInProps {
+  children: React.ReactNode;
+  className?: string;
+  delay?: number;
+  direction?: "up" | "down" | "left" | "right";
+}
+
+export function FadeIn({ children, className = "", delay = 0, direction = "up" }: FadeInProps) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-100px" });
+
+  const directionOffset = {
+    up: { y: 40, x: 0 },
+    down: { y: -40, x: 0 },
+    left: { x: 40, y: 0 },
+    right: { x: -40, y: 0 },
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ 
+        opacity: 0, 
+        ...directionOffset[direction]
+      }}
+      animate={isInView ? { 
+        opacity: 1, 
+        x: 0, 
+        y: 0 
+      } : {}}
+      transition={{
+        duration: 0.8,
+        delay: delay,
+        ease: [0.21, 0.47, 0.32, 0.98]
+      }}
+      className={className}
+    >
+      {children}
+    </motion.div>
+  );
+}