Framer Motion - Responsive Animations

import React from 'react'
import { motion } from 'framer-motion'

const App = () => {
  const [isOpen,setIsOpen] = React.useState(false)
  return (
    <div className='bg-black text-white h-screen w-screen flex items-center justify-center flex-col gap-10'>
      <motion.div 
        style={{
          "--width":isOpen ? "200px" : "100px",
          "--height":isOpen ? "200px" : "100px",
          "--borderRadius":isOpen ? "20px" : "50%",
          "--backgroundColor":isOpen ? "#34d399" : "#f87171"
        }}
        animate={isOpen ? "open" : "closed"}
        variants={{
          open:{
            width:"var(--width)",
            height:"var(--height)",
            borderRadius:"var(--borderRadius)",
            backgroundColor:"var(--backgroundColor)",
            transition:{
              duration:0.5
            }
          },
          closed:{
            width:"var(--width)",
            height:"var(--height)",
            borderRadius:"var(--borderRadius)",
            backgroundColor:"var(--backgroundColor)",
            transition:{
              duration:0.5
            }
          }
        }}
        className='flex items-center justify-center'
      >
        Box
      </motion.div>
      <button className='bg-slate-700 text-white px-4 py-2 rounded-lg' onClick={()=>setIsOpen(!isOpen)}>Toggle</button>
    </div>
  )
}