framer-motion-six.tsx

const Six = () => {
  const container: Variants = {
    active: {
      background: "#ff00b1",
    },
    disabled: {
      background: "#0D00FF"
    }
  };

  const box: Variants = {
    active: {
      rotate: 90,
      opacity: 1
    },
    disabled: {
      rotate: 0,
      opacity: 0.7
    }
  };

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

  return (
    <motion.div
      variants={container}
      animate={active ? "active" : "disabled"}
      onClick={() => setActive(!active)}
      className="container"
    >
      {[0, 1, 2].map(value => (
        <motion.div key={value} className="box" variants={box} />
      ))}
    </motion.div>
  );
};