FRAMER MOTION COMPONENT GENERATOR

import { motion } from "motion/react";

export const AnimatedComponent = () => {
  return (
    <motion.div
      initial={{ 
        opacity: 0, 
        scale: 0.8,
        y: 20 
      }}
      animate={{ 
        opacity: 1,
        x: 0,
        y: 0,
        scale: 1,
        rotate: 0
      }}
      transition={{
        type: "spring",
        stiffness: 100,
        damping: 10,
        mass: 1,
        delay: 0
      }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      style={{
        width: 120,
        height: 120,
        backgroundColor: "#4f46e5",
        borderRadius: 24,
      }}
    />
  );
};