Animations don’t just look good—they communicate state changes, guide the user, and make your app feel alive.
That’s where Motion/react shines. It’s the animation library I reach for whenever I want micro-interactions or buttery transitions without wrestling with keyframes.
Install It
$ pnpm add motion/reactFade In on Mount
tsx
import { motion } from "motion/react"; export function FadeIn({ children }) { return ( <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} > {children} </motion.div> );}
Use it like:
tsx
<FadeIn> <h2>Welcome to my blog 🚀</h2></FadeIn>
Animate Page Transitions
tsx
import { AnimatePresence, motion } from "motion/react"; export function PageWrapper({ children, key }) { return ( <AnimatePresence mode="wait"> <motion.div key={key} initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} transition={{ duration: 0.3 }} > {children} </motion.div> </AnimatePresence> );}
Hover Interactions
tsx
<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} className="rounded bg-black px-4 py-2 text-white"> Hover me</motion.button>
Conclusion
Motion(previously Framer Motion) lets you craft smooth, intentional animations without diving deep into CSS or GSAP. Use it for loading states, cards, modals, page transitions—or literally anything interactive.
A little motion goes a long way toward a polished UX. Trust me—your users will feel the difference.
check out the Motion website for more information.