Animation
Motion for React and Next.js: Framer Motion (motion/react), CSS transitions, layout animations and accessible animated UI.
- Accessible Login Form in React: Labels, Errors, MotionAn accessible login form in React uses a visible label on every input, links each error to its field with aria-describedby, announces sign-in failures from an always-mounted live region, moves focus to the first broken field, and turns its shake animation off under prefers-reduced-motion.Oct 10, 2026 · 8 min
- Framer Motion vs CSS Animation for Micro-InteractionsUse CSS for micro-interactions between two fixed states, like hover, press and toggles; it costs no JavaScript. Use Motion (formerly Framer Motion) for exit animations, layout changes, interruptible springs and gestures. In my Next.js test the Motion route shipped 69 kB more first-load JS than the CSS one.Oct 8, 2026 · 7 min
- Animated Tabs with Framer Motion in Next.js App RouterTo animate tabs with Framer Motion (now the motion package), render only the active tab's highlight as a motion element with a shared layoutId, and Motion slides it to whichever tab mounts it next. In the Next.js App Router, keep the bar in a layout, read the route with usePathname, and mark the active link with aria-current.Oct 3, 2026 · 8 min