Login

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 />);

Preview