Motion.dev

Motion.dev is the default production UI motion engine route for React, JavaScript, and Vue.

Routing Summary

Load through Motion Library Ranking before adding an animation dependency. Motion's official site positions it as production-grade animation for React, JavaScript, and Vue, with a hybrid engine and agent-compatible docs/API. Source: Motion.dev, 2026-07-07

Framer Motion Naming

Framer's current dictionary says Framer Motion is now Motion; old tutorials and searches still say Framer Motion, but current docs and packages use Motion. Source: Framer dictionary, 2026-07-07

Current Package Snapshot

Checked with npm view on 2026-07-07:

Use motion for new source unless the local project already standardizes on framer-motion.

Use Rules

• Use Motion for product UI layout transitions, gestures, enter/exit states, springs, scroll progress, and repeated app motion.
• Use Motion Primitives before writing custom Motion code for common primitives.
• Use Frontend and Design Skills for compact framework-agnostic timelines and SVG/text choreography.
• Use Frontend and Design Skills when scroll choreography, pinned timelines, or plugin depth justifies it.
• Always verify reduced-motion paths and avoid stacking perpetual motion.

---

Timeline

• 2026-07-07 | Promoted from external row in Motion Library Ranking into a first-class route so Motion.dev, Framer Motion, and the motion / framer-motion packages resolve to one page. Source: User request, 2026-07-07; https://motion.dev/; https://www.framer.com/dictionary/framer-motion