Next.js + Motion/Framer Motion

Mission

Build small, purposeful, accessible animations in Next.js using Motion for React (the current package) or legacy framer-motion, without breaking server/client boundaries, performance, or usability.

Use this skill for

• First-render reveals and section entrances
• Hover, tap, and focus feedback on buttons, links, cards, tabs, and navigation
• Scroll-triggered reveals and modest scroll-linked effects
• Modals, drawers, dropdowns, accordions, tabs, and other enter/exit UI
• Layout and shared-element transitions with layout and layoutId
• Reorderable lists and light route-content transitions
• Debugging Motion behaviour in Next.js