{"library":"motion","title":"Motion Animation Library","description":"Motion is a high-performance animation library designed for JavaScript, React, and Vue applications, currently at version 12.38.0. It offers a simple, declarative API that leverages a hybrid engine, combining JavaScript's flexibility with native browser APIs for GPU-accelerated, 120fps animations. Key differentiators include its production-readiness with comprehensive TypeScript support, extensive test suite, tree-shakability, and a tiny footprint. It provides a rich set of features out-of-the-box, such as gestures (drag), spring physics, layout transitions, scroll-linked effects, and animation timelines. While the core `motion` package targets vanilla JavaScript, it also provides specific packages and import paths for seamless integration with React (`motion/react`) and Vue (`motion-v`), making it a versatile choice for a wide range of web projects. Its evolution from Framer Motion signifies a streamlined approach to imports and usage across modern web frameworks.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install motion"],"cli":null},"imports":["import { animate } from 'motion'","import { motion } from 'motion/react'","import { useSpring } from 'motion/react'","import type { Variants } from 'motion/types'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { motion } from \"motion/react\";\nimport { useState } from 'react';\n\nfunction AnimatedBox() {\n  const [isHovered, setIsHovered] = useState(false);\n\n  return (\n    <motion.div\n      style={{\n        width: '100px',\n        height: '100px',\n        backgroundColor: isHovered ? '#ff0088' : '#0099ff',\n        borderRadius: '10px',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        color: 'white',\n        cursor: 'pointer'\n      }}\n      initial={{ x: 0, scale: 1 }}\n      animate={{ x: isHovered ? 50 : 0, scale: isHovered ? 1.1 : 1 }}\n      transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n      onHoverStart={() => setIsHovered(true)}\n      onHoverEnd={() => setIsHovered(false)}\n    >\n      Hover Me\n    </motion.div>\n  );\n}\n\n// Example of how you would render this component in a client-side React application:\n// import ReactDOM from 'react-dom/client';\n// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\n// root.render(<AnimatedBox />);","lang":"typescript","description":"Demonstrates a basic React component utilizing `motion.div` to create an interactive element that animates with a spring effect on hover, showcasing declarative animation syntax.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}