Component patterns

```css .button { transition: transform 80ms ease-out; } .button:active { transform: scale(0.97); } ``` ```tsx <motion.div initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.15, ease: [0.22, 1, 0.36, 1] }} style={{ transformOrigin: "top center" }} /> ``` ```tsx <motion.div initial={{ opacity: 0, scale: 0.95, y: 12 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.95, y: -4 }} transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1], }} /> ``` ```css .card { transition: transform 150ms ease-out, box-shadow 150ms ease-out; } .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / 0.08); } ``` ```tsx <AnimatePresence mode="wait"> <motion.span key={label} initial={{ opacity: 0, scale: 0.96, filter: "blur(4px)" }} animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }} exit={{ opacity: 0, scale: 0.96, filter: "blur(4px)" }} transition={{ duration: 0.15 }} /> </AnimatePresence> ``` ```tsx <motion.div animate={error ? { x: [0, -6, 6, -4, 4, -2, 2, 0] } : { x: 0 }} transition={{ duration: 0.4, ease: "easeOut" }} > <input /> </motion.div> ``` ```tsx <motion.div initial={{ opacity: 0, scale: 0.8, y: -8 }} animate={{ opacity: 1, scale: [0.8, 1.15, 1], y: 0, }} transition={{ duration: 0.35, scale: { duration: 0.4, times: [0, 0.6, 1] }, }} /> ``` ```tsx <motion.circle initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} transition={{ duration: 0.5 }} /> <motion.path d="M16 24l6 6 10-12" initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} transition={{ delay: 0.3, duration: 0.4 }} /> ```