Motion

Motion (formerly Framer Motion) lets you write animation as component props: initial is where it starts, animate is where it ends, and exit is how it leaves. It handles interpolation, spring physics, and interruption; you only describe states.

Why it is our top pick

• Declarative, so AI gets it right. An animation is a few props, so the AI rarely makes mistakes, and it reads far better than hand-written requestAnimationFrame.
• Exit and layout animations. AnimatePresence lets elements finish an exit animation before unmounting, and the layout prop smoothly animates position and size changes. Both are hard to do well in CSS.
• Sensible physics by default. Spring animations can be interrupted mid-flight without jumping, which feels more natural.
• Respects user settings. MotionConfig with reducedMotion="user" follows the system's reduced-motion preference.

Getting started

pnpm add motion

import { motion } from 'motion/react';

export function Toast({ message }: { message: string }) {
  return (
    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }}>
      {message}
    </motion.div>
  );
}

Trade-offs to know

More animation is not better. Give the AI rules (see the souvenir): animate only transform and opacity, keep durations short, and give every animation a purpose.

# AGENTS.md (motion section)

## Tools
- Use Motion (`import { motion } from 'motion/react'`) for enter / exit / layout / gesture animations.
- Use CSS transitions for simple hover and color changes; do not pull in Motion for those.

## Rules
- Animate only `transform` (translate, scale, rotate) and `opacity`; never width, height, margins, or `top/left`.
- UI feedback animations last 150–300ms; never make users wait for an animation before they can act.
- Every animation needs a purpose: explain a state change, guide attention, or show spatial relationships. When unsure, leave it out.
- Wrap the app root in `<MotionConfig reducedMotion="user">` to follow the system reduced-motion preference.
- Put exiting list items inside `<AnimatePresence>` and give each a stable `key`.