Fade-in Section (Framer Motion)

// components/FM_FadeIn.tsx
import React from "react";
import { motion } from "framer-motion";

export const FM_FadeIn: React.FC = () => {
  return (
    <motion.section
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      className="p-8 bg-white rounded-lg shadow"
    >
      <h2 className="text-xl font-semibold">Fade-in Section</h2>
      <p className="mt-2 text-sm text-gray-600">Simple enter animation.</p>
    </motion.section>
  );
};

• initial: Starting state (opacity 0, y 8px).
• animate: End state (opacity 1, y 0).
• transition: Controls duration and easing.
• motion.section: Wraps the element to animate on mount.