AI Motion Editor
Animation Code Editor
Tip: You can freely add motion.div components to create animation effects
Supports all Framer Motion animation props and Tailwind CSS classes
function Component() { return ( <div className="flex items-center justify-center h-screen bg-gradient-to-br from-blue-100 to-purple-100"> <div className="relative w-80 h-80"> <motion.div className="absolute inset-0 bg-blue-500 rounded-full opacity-20" animate={{ scale: [1, 1.1, 1], }} transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }} /> <div className="absolute inset-0 flex items-center justify-center"> <motion.div className="w-40 h-40 bg-white rounded-full shadow-lg flex items-center justify-center" animate={{ rotate: 360, }} transition={{ duration: 20, repeat: Infinity, ease: "linear" }} > <motion.div className="w-32 h-32 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-2xl" animate={{ scale: [1, 0.9, 1], }} transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }} > Agent AI </motion.div> </motion.div> </div> <motion.div className="absolute top-0 left-0 w-16 h-16 bg-yellow-400 rounded-full flex items-center justify-center text-white font-bold" animate={{ y: [0, 150, 0], x: [0, 150, 0], rotate: 360, }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut" }} > Perceive </motion.div> <motion.div className="absolute top-0 right-0 w-16 h-16 bg-green-400 rounded-full flex items-center justify-center text-white font-bold" animate={{ y: [0, 150, 0], x: [0, -150, 0], rotate: 360, }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 1 }} > Decide </motion.div> <motion.div className="absolute bottom-0 left-0 w-16 h-16 bg-red-400 rounded-full flex items-center justify-center text-white font-bold" animate={{ y: [0, -150, 0], x: [0, 150, 0], rotate: 360, }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 2 }} > Learn </motion.div> <motion.div className="absolute bottom-0 right-0 w-16 h-16 bg-purple-400 rounded-full flex items-center justify-center text-white font-bold" animate={{ y: [0, -150, 0], x: [0, -150, 0], rotate: 360, }} transition={{ duration: 5, repeat: Infinity, ease: "easeInOut", delay: 3 }} > Execute </motion.div> </div> </div> ); } render(<Component />);