framer-motion-three.tsx

const Three = () => {
  const [active, setActive] = React.useState(false);

  return (
    <motion.div
      className="rectangle"
      animate={
        active
          ? { background: "#ff00b1", rotate: 90 }
          : { background: "#0D00FF", rotate: 0 }
      }
      onClick={() => setActive(!active)}
    >
      Click me!
    </motion.div>
  );
};