import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion,useMotionValue,useTransform} from "https://esm.sh/framer-motion@8.3.3";


const App = function() {
  
  const radiusMV = useMotionValue(0)
  
  const radius = useTransform(radiusMV,[-200,200],[10,40])
  
  return (
   <div
     style={{
        display:'flex',
        flexDirection:'column',
         justifyContent:'center',
           alignItems:'center',
        
      }}
     >
      <motion.div
      style={{
        width:100,
        height:100,
        backgroundColor:'white',
        borderRadius:radius
      }}
      >
    </motion.div>
      <motion.div
        style={{
          x:radiusMV,
          height:20,
          width:6,
          borderRadius:2,
          backgroundColor:'white',
          y:20
        }}
        drag="x"
        dragMomentum={false}
        >
        
      </motion.div>
      <motion.span
        style={{
          y:30,
          letterSpacing:2,
          color:'white',
          opacity:0.3
        }}
        >
        左右拖动我
      </motion.span>
   </div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)