Bring Your UI To Life

// Install Framer Motion
npm install framer-motion

// Basic setup in layout or component
import { motion } from 'framer-motion';

export default function App() {
  return (
    <div>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        Welcome to animations!
      </motion.div>
    </div>
  );
}

// TypeScript support (included by default)
interface AnimationProps {
  children: React.ReactNode;
  delay?: number;
}

const AnimatedComponent: React.FC<AnimationProps> = ({ 
  children, 
  delay = 0 
}) => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ delay, duration: 0.6 }}
    >
      {children}
    </motion.div>
  );
};

// Basic animations
<motion.div
  initial={{ opacity: 0, scale: 0.8 }}
  animate={{ opacity: 1, scale: 1 }}
  exit={{ opacity: 0, scale: 0.8 }}
  transition={{ 
    duration: 0.5,
    ease: "easeOut"
  }}
>
  Fade and scale animation
</motion.div>

// Slide animations
<motion.div
  initial={{ x: -100, opacity: 0 }}
  animate={{ x: 0, opacity: 1 }}
  transition={{ 
    type: "spring",
    stiffness: 100,
    damping: 15
  }}
>
  Slide in from left
</motion.div>

// Rotation with color change
<motion.div
  initial={{ 
    rotate: 0, 
    backgroundColor: "#ff0000" 
  }}
  animate={{ 
    rotate: 360, 
    backgroundColor: "#0066ff" 
  }}
  transition={{ 
    duration: 2,
    repeat: Infinity,
    repeatType: "reverse"
  }}
  className="w-20 h-20 rounded-lg"
/>

// Complex keyframes
<motion.div
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 270, 270, 0],
    borderRadius: ["20%", "20%", "50%", "50%", "20%"],
  }}
  transition={{
    duration: 2,
    ease: "easeInOut",
    times: [0, 0.2, 0.5, 0.8, 1],
    repeat: Infinity,
    repeatDelay: 1
  }}
/>

// Define animation variants
const containerVariants = {
  hidden: { 
    opacity: 0,
    scale: 0.8
  },
  visible: {
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.5,
      staggerChildren: 0.1,
      delayChildren: 0.2
    }
  },
  exit: {
    opacity: 0,
    scale: 0.8,
    transition: {
      duration: 0.3
    }
  }
};

const itemVariants = {
  hidden: { 
    y: 20, 
    opacity: 0 
  },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      type: "spring",
      stiffness: 100
    }
  }
};

// Using variants in components
function AnimatedList({ items }) {
  return (
    <motion.ul
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      exit="exit"
      className="space-y-4"
    >
      {items.map((item, index) => (
        <motion.li
          key={item.id}
          variants={itemVariants}
          className="p-4 bg-white rounded-lg shadow"
        >
          {item.title}
        </motion.li>
      ))}
    </motion.ul>
  );
}

// Dynamic variants
const buttonVariants = {
  idle: { scale: 1 },
  hover: { 
    scale: 1.05,
    boxShadow: "0 10px 25px rgba(0,0,0,0.1)" 
  },
  tap: { scale: 0.95 },
  loading: {
    scale: [1, 1.1, 1],
    transition: {
      repeat: Infinity,
      duration: 1.5
    }
  }
};

function AnimatedButton({ isLoading, children, onClick }) {
  return (
    <motion.button
      variants={buttonVariants}
      initial="idle"
      whileHover="hover"
      whileTap="tap"
      animate={isLoading ? "loading" : "idle"}
      onClick={onClick}
      className="px-6 py-3 bg-blue-500 text-white rounded-lg"
    >
      {children}
    </motion.button>
  );
}