Fertig

components/motion-section.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { motion } from "framer-motion";
+import type { ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+  delay?: number;
+  direction?: "up" | "left" | "right" | "none";
+};
+
+const smoothEase = [0.16, 1, 0.3, 1] as const;
+
+const variants = {
+  up:    { hidden: { opacity: 0, y: 32 }, visible: { opacity: 1, y: 0 } },
+  left:  { hidden: { opacity: 0, x: -32 }, visible: { opacity: 1, x: 0 } },
+  right: { hidden: { opacity: 0, x: 32 }, visible: { opacity: 1, x: 0 } },
+  none:  { hidden: { opacity: 0 }, visible: { opacity: 1 } },
+};
+
+export function MotionSection({ children, className = "", delay = 0, direction = "up" }: Props) {
+  return (
+    <motion.div
+      className={className}
+      initial="hidden"
+      whileInView="visible"
+      viewport={{ once: true, amount: 0.15 }}
+      variants={variants[direction]}
+      transition={{ duration: 0.55, ease: smoothEase, delay }}
+    >
+      {children}
+    </motion.div>
+  );
+}