Framer Motion

import { motion, AnimatePresence } from 'framer-motion';

// Basic animation
function Box() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -20 }}
      transition={{ duration: 0.3 }}
    >
      محتوى
    </motion.div>
  );
}

// Gestures
function Draggable() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100 }}
      whileDrag={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
    >
      اسحبني
    </motion.div>
  );
}

// Variants
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

function List() {
  return (
    <motion.ul variants={container} initial="hidden" animate="show">
      {items.map(item => (
        <motion.li key={item.id} variants={item}>
          {item.text}
        </motion.li>
      ))}
    </motion.ul>
  );
}

// Exit animations
function Modal({ isOpen }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
        >
          محتوى النموذج
        </motion.div>
      )}
    </AnimatePresence>
  );
}

// Layout animations
function Layout() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <motion.layout
      layout
      onClick={() => setIsOpen(!isOpen)}
    >
      {isOpen ? 'مفصل' : 'ملخص'}
    </motion.layout>
  );
}