Layout Shift Animation (Framer Motion)

// components/FM_LayoutShift.tsx
import { motion } from "framer-motion";
import { useState } from "react";

export const FM_LayoutShift = () => {
  const [expanded, setExpanded] = useState(false);

  return (
    <div className="grid grid-cols-2 gap-4">
      <motion.div
        layout
        onClick={() => setExpanded(!expanded)}
        className="p-4 bg-white rounded-xl shadow-lg cursor-pointer"
      >
        <motion.h3 layout>Card</motion.h3>
        {expanded && (
          <motion.p layout>Expanded content that animates layout smoothly.</motion.p>
        )}
      </motion.div>
      <motion.div layout className="p-4 bg-white rounded-xl shadow-lg">
        Other card
      </motion.div>
    </div>
  );
};

• layout: Added to motion divs so position and size changes animate automatically.
• Clicking the card toggles expanded content, causing layout to shift smoothly.
• No need for AnimateSharedLayout anymore.
• Ideal for interactive UI cards where content expands or collapses dynamically.