framer-motion-four.tsx

const Four = () => {
  const [active, setActive] = React.useState(false);
  
  const rectangle: Variants = {
    active: { background: "#ff00b1", rotate: 90 },
    disabled: { background: "#0D00FF", rotate: 0 }
  };

  return (
    <motion.div
      className="rectangle"
      variants={rectangle}
      animate={active ? "active" : "disabled"}
      onClick={() => setActive(!active)}
    >
      Click me!
    </motion.div>
  );
};