
Simple API
Simple API
Ship in seconds
Replace the default browser cursor with a dynamic cursor in one line of code. Or switch to a cursor-follow effect with a prop.
<Cursor follow />
Adaptive cursor
Adaptive cursor
Adaptive cursor
Dynamic by default
Dynamic by default
Dynamic by default
The default cursor adapts to links, buttons, and text automatically — growing, shrinking, or morphing into a text selector that matches the font size.
The default cursor adapts to links, buttons, and text automatically — growing, shrinking, or morphing into a text selector that matches the font size.
The default cursor adapts to links, buttons, and text automatically — growing, shrinking, or morphing into a text selector that matches the font size.
Performance
Performance
Performance
Smooth as standard
Smooth as standard
Smooth as standard
All width
and height
changes are powered by Motion’s layout animations, ensuring jaw-dropping effects that perform silky-smooth.
All width
and height
changes are powered by Motion’s layout animations, ensuring jaw-dropping effects that perform silky-smooth.
All width
and height
changes are powered by Motion’s layout animations, ensuring jaw-dropping effects that perform silky-smooth.
Follow mode
Follow mode
Follow mode
Catch me if you can
Catch me if you can
Catch me if you can
Add the follow
prop to create a cursor-follow effect for dynamic previews, tooltips, or playful interactions. Attach with a fully-customisable spring.
Add the follow
prop to create a cursor-follow effect for dynamic previews, tooltips, or playful interactions. Attach with a fully-customisable spring.
Add the follow
prop to create a cursor-follow effect for dynamic previews, tooltips, or playful interactions. Attach with a fully-customisable spring.
<Cursor follow />
Magnetic mode
Magnetic mode
Magnetic mode
Attract attention
Attract attention
Attract attention
Adding magnetic settings will snap a cursor to active targets, optionally morphing to the same size and shape.
Adding magnetic settings will snap a cursor to active targets, optionally morphing to the same size and shape.
<Cursor magnetic={{ snap: 0.9 }} />
Composable
Composable
Composable
Mix and match
Mix and match
Mix and match
Cursor can accept custom content, including other Motion+ components like Ticker
and AnimateNumber
. Now we're cooking.
Cursor can accept custom content, including other Motion+ components like Ticker
and AnimateNumber
. Now we're cooking.
Cursor can accept custom content, including other Motion+ components like Ticker
and AnimateNumber
. Now we're cooking.
<Cursor follow>
<AnimateNumber>
{percentage}
</AnimateNumber>
</Cursor>

Why a custom cursor? Follow-cursor effects can be used on every website, to display dynamic tooltips that go way beyond the boring browser default.
Replacing the entire cursor is a great way to add personality and surprise to portfolio and marketing websites.
Matt Perry
Creator of Motion
Pricing
Pricing
Pricing
Cursor is available via Motion+
Join over 1000 developers already building with Motion+. One-time fee, lifetime updates.
Motion+
Team
$299
Special price for India
$299
Special price for China
$299
Special price for Japan
$299
Special price for South Korea
$299
Special price for Brazil
(+ tax)
180+ code examples
Premium APIs
Visual editor for VS Code
alpha
Discord community
Early access
Lifetime updates
members
Save
Motion+
Team
$299
Special price for India
$299
Special price for China
$299
Special price for Japan
$299
Special price for South Korea
$299
Special price for Brazil
(+ tax)
180+ code examples
Premium APIs
Visual editor for VS Code
alpha
Discord community
Early access
Lifetime updates
members
Save
Motion+
Team
$299
Special price for India
$299
Special price for China
$299
Special price for Japan
$299
Special price for South Korea
$299
Special price for Brazil
(+ tax)
180+ code examples
Premium APIs
Visual editor for VS Code
alpha
Discord community
Early access
Lifetime updates
members
Save
FAQ
FAQ
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 examples, premium components, and AI/visual editing editing features.
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
What does ”lifetime” access mean?
Lifetime access means exactly that. You pay once, and then get access to all future updates to examples, premium components, and AI/visual editing editing features.
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
What does ”lifetime” access mean?
Lifetime access means exactly that. You pay once, and then get access to all future updates to examples, premium components, and AI/visual editing editing features.
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