Levelupyouranimationswiththeall-inmembership.
Examples & components
Early access
Lifetime updates
Private Discord
Motion —a modern animation library for JavaScript and React
Examples
Go beyond the basics
Copy & paste examples directly into your own project, or customise using natural language with Vercel’s AI code editor.
Features
Check out all of these incredible Motion+ APIs.
highlights
The Motion+ Advantage
Level up your projects with exclusive features, AI workflows, and our Discord community.
50+ premium examples
A growing collection of high-quality, ready-to-use examples for JavaScript and React.
Rotate the square slower
AI-powered editing
Open examples in Vercel’s v0 AI editor and tweak as needed.
1
# Motion
2
3
You're an expert in Motion, React and TypeScript.
4
5
## Performance
6
7
- If animating a `transform` like `transform`, `x`, `y`, `scale` etc, then add style the component with `willChange: "transform"`.
8
- If animating `backgroundColor`, `clipPath`, `filter`, `opacity`, also add these values to `willChange`.
9
- Inside functions that will or could run every frame (hot functions), like the `motion` component's `onUpdate` prop, `useTransform` etc:
Motion Expert Copilot
A.cursorrulesthatguides AI editors with best practices.
8
Motion+
Private Discord
Stay updated with Motion releases, showcase your work, and get support.
UI library integrations
Includes integration examples, starting with Radix.
Try new
features first
Gain early access to upcoming Motion features and content.
View animations
Use Motion's view() function to create incredible view transitions, layout animations and shared element transitions.
Unlocks in
109 days8 hours
motionValue
Learn how to use Motion Values, a performant way to track the state and velocity of animated values.
Unlocks in
28 days8 hours
Secret feature
Be patient!
Unlocks in
47 days 02 hours
Upgrade to unlock
Motion+ members received these features before anyone else.
FAQ
Frequently asked questions
What does ”lifetime” access mean?
Lifetime access means you pay once, and then get access to all future premium components, examples, and early access content on the site.
This isn't yet another subscription!
How does the Team package work?
After purchase, you can assign 10 more @yourcompany.com email addresses to Motion+ by sending them tomatt@motion.dev.
Can I use Motion+ for commercial projects?
Yes!
All code onMotion Examples is licensed under MIT, which means once you’ve copy/pasted the code, it’s yours forever.
Premium components likeCursor andAnimateNumber are also currently licensed under MIT, though in the future it might be that an additional license is required specifically for site builder or code generation companies to offer these APIs to users via their GUI or AI interfaces.
How do I get access to the private GitHub?
After purchase, you can invite your GitHub profile to the private repo via yourMotion+ profile page.
What is your refund policy?
If you're unhappy with your purchase, you can contactmatt@motion.dev within 14 days for a full refund.
Still have questions? Email us atmatt@motion.dev
Pricing
One-time payment, no subscription
Personal
$299
Exclusive examples
Premium components
Early access
Private Discord & GitHub
Free lifetime updates
Team
$1,499
Exclusive examples
Premium components
Early access
Private Discord & GitHub
Free lifetime updates
Motion+ for 10 team members
TIP:
Ask your place of work about your education budget!
You’ve already purchased Motion+, log in toplus.motion.dev to access your benefits.
