Rotate Animation (Framer Motion)

// components/FM_Rotate.tsx
import { motion } from "framer-motion";

export const FM_Rotate = () => (
  <motion.div
    initial={{ rotate: -90, opacity: 0 }}
    animate={{ rotate: 0, opacity: 1 }}
    transition={{ duration: 0.8, ease: "easeOut" }}
    className="p-8 bg-white rounded-xl text-gray-800 shadow-lg"
  >
    <h2 className="text-xl font-semibold">Rotate Animation</h2>
    <p>This box rotates from -90° to 0° while fading in.</p>
  </motion.div>
);

• initial: Starts rotated at -90° and invisible.
• animate: Rotates to 0° and fades in.
• transition: Uses easeOut for smooth exit of motion.
• Great for elements entering the screen with a twist!