{
  "slug": "motion",
  "name": "Motion (was Framer Motion)",
  "url": "https://motion.dev/docs/react",
  "cat": "anim",
  "group": "design",
  "tagline": "Declarative React animation",
  "price": "Free MIT · Motion+ €299 once",
  "tier": "free",
  "pick": true,
  "what": "Renamed from Framer Motion and spun out as an independent MIT project at motion.dev. Declarative animation via props, AnimatePresence for exits, layout/layoutId for shared-element transitions, variants for staggering, useScroll for scroll-linked values.",
  "why": "Page and route transitions between article and index, staggered card reveals on the issue grid, image-to-lightbox shared-element morphs. Composes cleanly with Tailwind and shadcn. Use LazyMotion + the <code>m</code> component to land near 18 kB instead of 38 kB.",
  "warn": "Do not build long scroll narratives with useScroll — once you need pinning and scrubbing you are rebuilding ScrollTrigger badly. Do not wrap hundreds of list items in motion.div.",
  "install": "npm install motion",
  "category": {
    "key": "anim",
    "name": "Animation & motion",
    "desc": "Scroll storytelling, transitions, 3D. Bundle costs are measured, not guessed.",
    "group": "design",
    "groupName": "Make it look right"
  },
  "freshness": null,
  "health": {
    "ok": true,
    "status_code": 200,
    "final_url": null,
    "checked_at": "2026-08-18T21:45:05.257+00:00"
  },
  "corrected_at": null,
  "upstream_changed_at": null
}