Level up your animations with the all-in membership.

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.

Loading...
Loading...
Loading...

Features

Premium APIs

Motion+ gives you premium APIs like splitText, and React components like Cursor. Built with TypeScript, fully tested, and installable via npm with source access on our private GitHub.

Loading...
Loading...

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 .cursorrules that guides 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.

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 to matt@motion.dev.

Can I use Motion+ for commercial projects?

Yes!

All code on Motion Examples is licensed under MIT, which means once you’ve copy/pasted the code, it’s yours forever.

Premium components like Cursor and AnimateNumber 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 your Motion+ profile page.

What is your refund policy?

If you're unhappy with your purchase, you can contact matt@motion.dev within 14 days for a full refund.

Still have questions? Email us at matt@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!