Interface motion
Framer Motion
Spring physics, layout transitions and scroll reveals that make an interface feel alive without feeling busy.
A practical motion skill for React: entrance animations, stagger groups, layout transitions, gesture interactions and reduced-motion handling.
- Motion patterns
- 12+
- Spring presets
- Included
- Reduced motion
- Required
- React target
- 19
Live scene
Framer Motion
npm i framer-motionMITOverview
What Framer Motion actually does
Framer Motion is most useful when it clarifies hierarchy and feedback. This skill covers the patterns that do that: subtle scroll reveals, shared layout transitions, spring-based hover states and choreographed sequences with deliberate rest points.
It also treats accessibility as part of the motion system. Reduced-motion preferences, focus states and performance budgets are checked before animation is added.
Capabilities
What it helps your agent ship
Add scroll-triggered reveals with whileInView.
Stagger lists and grids without layout jank.
Animate shared layout changes between states.
Use spring physics for natural hover and drag feedback.
Choreograph multi-element sequences with delays.
Respect prefers-reduced-motion and keep animations accessible.
Workflow
The process the skill follows
A repeatable sequence keeps the agent from jumping straight into edits before it understands the job.
- 01
Decide what should move
Animate hierarchy, feedback and state changes. Leave static content still.
- 02
Choose the primitive
Use transforms and opacity for cheap motion; use layout animation only when structure changes.
- 03
Set the timing
Pick a spring or easing curve, then test on a throttled device.
- 04
Add reduced-motion handling
Provide a static or near-instant version for visitors who request reduced motion.
- 05
Profile and simplify
Remove animations that compete for attention or cause repeated layout work.
Inside the pack
References and modules
These are the load-on-demand files or command groups that make the skill useful beyond a single prompt.
Scroll reveals
whileInView, viewport margins and stagger containers.
Layout animation
Shared layout, AnimatePresence and exit transitions.
Gestures
Hover, tap, drag and spring-based feedback.
Choreography
Delays, sequences and deliberate rest states.
Accessibility
useReducedMotion, focus order and non-motion alternatives.
Performance
Transform-only animation, will-change and frame budgets.
Use cases
Where it earns its place
Landing page motion
Reveal sections as they enter the viewport and add restrained hover feedback.
Dashboard transitions
Animate layout changes and shared elements between views.
Motion audit
Find animations that are excessive, inaccessible or causing layout thrash.
Prompt starters
Try one of these first
Copy a prompt into your agent. Replace the example URL with your own project or page.
Add scroll reveals and staggered cards to this React page with Framer Motion.
Review these animations for accessibility, performance and motion overload.
Build a spring-based tilt card interaction that still works with reduced motion enabled.
Keep exploring
Related skills
Want a site that uses this skill properly?
We build Next.js websites with technical SEO, structured data, 3D scenes and motion that stays inside a performance budget.