Build New Optic website

components/AnimatedSection.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { motion, type HTMLMotionProps } from "framer-motion";
+import { useEffect, useState, type ReactNode } from "react";
+
+type AnimatedSectionProps = HTMLMotionProps<"section"> & {
+  children: ReactNode;
+};
+
+export default function AnimatedSection({ children, className = "", ...props }: AnimatedSectionProps) {
+  const [canReveal, setCanReveal] = useState(false);
+
+  useEffect(() => {
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const wide = window.matchMedia("(min-width: 1024px)").matches;
+    setCanReveal(wide && !reduced);
+  }, []);
+
+  return (
+    <motion.section
+      {...props}
+      className={className}
+      initial={canReveal ? { opacity: 0, y: 28 } : false}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, amount: 0.08 }}
+      transition={{ duration: 0.75, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {children}
+    </motion.section>
+  );
+}