Level up your animations with Motion+
Examples
Components
Early Access
Lifetime updates
Private Discord
Highlights
The Motion+ Advantage
Accelerate your animations with exclusive tools, premium examples, and insider access to our Motion community.
180+ code examples
Copy–paste React, Vue, and JS animations from a growing collection of real-world patterns.
Premium APIs
Unlock powerful components like Cursor, install via npm.
Visual editor alpha
Edit CSS and Motion bezier curves, directly in VS Code.
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:
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 18 15" xmlns="http://www.w3.org/2000/svg"><path d="M 3 3 L 3 0 L 0 0" fill="transparent" height="3.0000000000001794px" id="GoWpJlHO9" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.52" stroke="rgb(255, 255, 255)" transform="translate(6 1)" width="3.0000000000001785px"/><path d="M 1.5 9 C 0.672 9 0 9 0 9 L 0 0 C 0 0 0.672 0 1.5 0 L 10.5 0 C 11.328 0 12 0 12 0 L 12 9 C 12 9 11.328 9 10.5 9 Z" fill="transparent" height="9px" id="idgKFZ7Io" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.52" stroke="rgb(255, 255, 255)" transform="translate(3 4)" width="12.000000000000178px"/><path d="M 0 0.75 L 1.5 0.75 M 13.5 0.75 L 15 0.75 M 9.75 0 L 9.75 1.5 M 5.25 0 L 5.25 1.5" fill="transparent" height="1.499999983439908px" id="YikxxnO0a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.52" stroke="rgb(255, 255, 255)" transform="translate(1.5 8)" width="15px"/></svg>)
Expert AI
LLM rules and docs enhance AI editors with best practices.
8
Motion+
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 16 12" xmlns="http://www.w3.org/2000/svg"><path d="M 13.554 1.005 C 12.502 0.529 11.393 0.191 10.253 0 C 10.097 0.276 9.955 0.56 9.83 0.851 C 8.615 0.669 7.381 0.669 6.166 0.851 C 6.041 0.56 5.899 0.276 5.744 0 C 4.603 0.192 3.492 0.531 2.44 1.007 C 0.351 4.066 -0.215 7.049 0.068 9.989 C 1.291 10.883 2.661 11.564 4.116 12 C 4.444 11.564 4.734 11.101 4.983 10.616 C 4.51 10.441 4.053 10.226 3.618 9.971 C 3.733 9.889 3.845 9.804 3.953 9.722 C 6.516 10.915 9.484 10.915 12.047 9.722 C 12.157 9.811 12.269 9.895 12.382 9.971 C 11.946 10.226 11.488 10.442 11.014 10.618 C 11.263 11.102 11.553 11.564 11.881 12 C 13.338 11.565 14.708 10.885 15.932 9.99 C 16.264 6.58 15.364 3.625 13.554 1.005 Z M 5.342 8.181 C 4.553 8.181 3.901 7.472 3.901 6.6 C 3.901 5.729 4.53 5.014 5.34 5.014 C 6.149 5.014 6.796 5.729 6.782 6.6 C 6.768 7.472 6.146 8.181 5.342 8.181 Z M 10.658 8.181 C 9.868 8.181 9.218 7.472 9.218 6.6 C 9.218 5.729 9.847 5.014 10.658 5.014 C 11.468 5.014 12.11 5.729 12.096 6.6 C 12.082 7.472 11.462 8.181 10.658 8.181 Z" fill="rgb(255, 255, 255)" height="12px" id="B8X6A97SB" transform="translate(0 0)" width="16px"/></svg>)
Private Discord
Join 300+ developers sharing, helping, and building with Motion.
Examples
Go beyond the basics
160+ prebuilt animations for JavaScript, React and Vue—to copy & paste directly into your own project.
Components
Next-level animation APIs
Build complex effects with premium Motion+ APIs. Built with TypeScript and fully customisable.
From custom cursors, to animated counters and split text, these plug-and-play components save hours of dev time.
What our
users say
Trusted by 600+ developers, from indies to enterprise.
“
Remarkably easy
”
Motion+ is my favorite library for transforming a UI from 'good' to 'excellent'. Its user-friendly API make it remarkably easy to incorporate smooth, intricate animations that enhance any project, bringing it to a whole new level of refinement and interactivity.
Hugo Richard
Vercel
“
Attention to detail
”
Motion+ has been a go-to reference for me whenever I'm building UI. The attention to detail on each of their components is world-class.
Kaiyu Hsu
Sequoia
“
Cut dev time in half
”
The detailed examples and premium components in Motion+ cut my dev time in half and left me free to quickly iterate on interactions. Incredible value, even more so with the steady stream of feature-rich updates—my go-to for every new project.
Sander Vonk
Indie
“
Focus on building
”
Ticker and splitText being robust first-party replacements to our existing custom utilities meant that we could forget the maintenance overhead and just focus on building.
Sam
Humaan
“
Effortless
”
The Motion+ examples and components made implementing advanced UI elements like carousels, tabs, and modals effortless—streamlining my workflow and saving development time.
Pritam
Indie
“
Instant value
”
Motion+ helped me learn by doing - I love the "Edit with AI" button and step by step tutorials. Motion+ has provided instant value to my workflow.
Jonathan Padilla
Indie
“
Level up
”
As a designer, I always felt like great motion tools were out of reach. Motion+, with its Discord community, is by far the best jumping off point for anyone looking to level up their interactive designs!
Sid
Helmer
“
Huge time-saver
”
The examples provided a great starting point for common animations I needed to solve in a recent client project. A huge time-saver and well worth the money. And if you're stuck? The Discord community has got your back!
Tobias
Indie
Pricing
One-time payment, lifetime updates
Join over 600 developers already building with Motion+
FAQ
Frequently asked questions
What does ”lifetime” access mean?
Lifetime access means exactly that. You pay once, and then get access to all future updates to Motion UI, Motion Examples and Motion Studio.
This isn’t yet another subscription!
Can I use Motion+ for commercial projects?
Yes!
Motion Examples and Motion UI are both licensed under MIT.
This means once you’ve copy/pasted the code, or included it into your site, it’s yours forever.
Exception: Website Builders
If your product is a website builder (think Framer, Figma, Webflow etc) then while using these APIs in your product is permitted, if you wish to allow your users to use these APIs in their own websites, we ask you enquire about the Builder's License to maintain access to Motion+
Do you offer PPP or student discounts?
We do offer student discounts in some countries and PPP for others - you can send proof of residence or student ID to matt@motion.dev for a discount code.
How does the Team package work?
Motion+ can be purchased for teams of any size, from 3 to ∞.
Every third seat is free! More seats can be purchased at any time.
After purchase, you can assign @yourcompany.com email addresses to Motion+ by sending them to matt@motion.dev.
Important: Motion+ by more than one person requires purchase of a Team package. Email sharing is forbidden and may lead to the cancellation of services without refund.
How do I get access to the private GitHub?
After purchase, you can invite your GitHub profile to the private repo via your Motion+ profile page.
What is your refund policy?
You can contact matt@motion.dev for a full refund within the first 7 days of purchase.
Still have questions? Email us at matt@motion.dev
