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.

160+ 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:

Expert AI

LLM rules and docs enhance AI editors with best practices.

8

Motion+

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.

Loading...
Loading...

Components

Next-level animation APIs

Build complex effects with premium Motion+ APIs. Built with TypeScript and fully customisable.

Loading...
Loading...

From custom cursors, to animated counters and split text, these plug-and-play components save hours of dev time.

Pricing

One-time payment, lifetime updates

Join over 600 developers already building with Motion+

Motion+

Team

(+ tax)

180+ code examples

Premium APIs

Visual editing

alpha

Enhanced AI workflow

Discord community

Early access

members

Save

Motion+

Team

(+ tax)

180+ code examples

Premium APIs

Visual editing

alpha

Enhanced AI workflow

Discord community

Early access

members

Save

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

Motion is supported by the best in the industry.