Master Motion with the all-in membership.

One-time payment to access premium features, exclusive examples, early access content, and a private Discord community.

Examples & components

Early access

Lifetime updates

Private Discord

Motion — a modern and robust animation library for JavaScript, React and Vue

Examples & Tutorials

Go beyond the basics

Copy & paste prebuilt animations directly into your own project, or customise React components using natural language with Vercel’s AI code editor.

Loading...
Loading...

Features

Premium features

Motion+ gives you access to premium features. Built with TypeScript, fully tested, and installable via npm. Source access via our private GitHub.

Loading...

splitText()

Loading...

splitText()

Loading...

splitText()

Loading...

<Ticker />

Loading...

<Ticker />

Loading...

<Ticker />

Loading...

<Cursor />

Loading...

<Cursor />

Loading...

<Cursor />

Loading...

<AnimateNumber />

Loading...

<AnimateNumber />

Loading...

<AnimateNumber />

highlights

The Motion+ Advantage

Level up your projects with exclusive features, AI workflows, and our Discord community.

100+ premium examples

A growing collection of high-quality, ready-to-use examples for JavaScript, React and Vue.

Power up VS Code

Edit and preview CSS and Motion bezier curves, directly in-editor.

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

LLM rules that guide 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!

Can I use Motion+ for commercial projects?

Yes!

Both Personal and Business plans work for commercial projects.

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

Premium APIs like splitText, Cursor and AnimateNumber are also licensed under MIT.

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+

How does the Business package work?

After purchase, you can assign 10 more @yourcompany.com email addresses to Motion+ by sending them to matt@motion.dev.

Note: Usage by more than one person requires purchase of a Business package. This includes email sharing.

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

Pricing

One-time payment, no subscription

Personal

$299

100+ exclusive examples

Premium components

Early access

Private Discord & GitHub

Free lifetime updates

Business

$1,499

(+VAT)

100+ exclusive examples

Premium components

Early access

Private Discord & GitHub

Free lifetime updates

Motion+ for up to 10 members

VAT invoice

TIP:

Ask your place of work about your education budget!