motion 12.23.11 → 13.0.0-alpha.0

package/README.md

@@ -1,34 +1,46 @@
-<p align="center">
-  <img width="42" height="42" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
-</p>
-<h1 align="center">Motion</h1>
+
+<h1 align="center"> <img width="35" height="35" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" /><br />Motion</h1>
 <h3 align="center">
-  An open source animation library for JavaScript, React and Vue
+  An open source animation library<br />for JavaScript, React and Vue
 </h3>
 
-<br>
+<p align="center">
+  <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/v/motion?color=0368FF&label=version" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/motion" rel="noopener noreferrer nofollow" ><img src="https://img.shields.io/npm/dm/framer-motion?color=8D30FF&label=npm" alt="npm downloads per month"></a>
+  <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.jsdelivr.com/package/npm/motion"><img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/framer-motion?logo=jsdeliver&color=FF4FBA"></a>
+  <img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
+</p>
 
-Motion is an animation library and suite of developer tools for making beautiful animations.
 
-It's the only library with first-class APIs for JS, React and Vue. It's also the only library with a **hybrid engine**, combining the power of JS animations with the performance of native browser APIs.
+```bash
+npm install motion
+```
 
-## 🍦 Flavours
+## Table of Contents
 
-### JavaScript
+1. [Why Motion?](#why-motion)
+2. [🍦 Flavours](#-flavours)
+3. [🎓 Examples](#-examples)
+4. [🎨 Studio](#-studio)
+5. [⚡️ Motion+](#-motion)
+6. [👩🏻‍⚖️ License](#-license)
+7. [💎 Contribute](#-contribute)
+8. [✨ Sponsors](#-sponsors)
 
-```javascript
-import { animate } from "motion"
+## Why Motion?
 
-animate("#box", { x: 100 })
-```
+Motion is an animation library for making beautiful animations.
 
-Get started with [JavaScript](https://motion.dev/docs/quick-start).
+* The **only** library with first‑class APIs for React, JavaScript, **and** Vue.
+* Powered by a **hybrid engine** that blends JavaScript flexibility with native browser APIs for **120fps GPU‑accelerated** motion.
+* Tiny footprint, tree‑shakable, and fully TypeScript‑typed.
 
-### React
+## 🍦 Flavours
 
-```bash
-npm install motion
-```
+Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
+
+<details>
+<summary>React ⬇</summary>
 
 ```jsx
 import { motion } from "motion/react"
@@ -38,9 +50,25 @@ function Component() {
 }
 ```
 
-Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
+Get started with [Motion for React](https://motion.dev/docs/react).
+
+</details>
+
+<details>
+<summary>JavaScript ⬇</summary>
+
+```javascript
+import { animate } from "motion"
+
+animate("#box", { x: 100 })
+```
+
+Get started with [JavaScript](https://motion.dev/docs/quick-start).
+
+</details>
 
-### Vue
+<details>
+<summary>Vue ⬇</summary>
 
 ```html
 <script>
@@ -52,6 +80,23 @@ Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
 
 Get started with [Motion for Vue](https://motion.dev/docs/vue).
 
+</details>
+
+## 🎓 Examples
+
+[Motion Examples](https://motion.dev/examples) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kick‑start your next project.
+
+## ⚡️ Motion+
+
+Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
+- 160+ premium Motion Examples
+- Motion UI features like Cursor and Ticker
+- Motion Studio animation editing for VS Code `alpha`
+- Early access content
+- Private Discord
+
+[Get Motion+](https://motion.dev/plus)
+
 ## 🎨 Studio
 
 ![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
@@ -64,21 +109,6 @@ Motion Studio is a versatile suite of developer tools allowing you to:
 
 Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
 
-## 🎓 Examples
-
-[Motion Examples](https://examples.motion.dev) offers 100s of free and Motion+ examples for beginners and advanced users alike. Easy copy/paste code to kickstart your next project.
-
-## ⚡️ Motion+
-
-[Motion+](https://motion.dev/plus) is a one-time fee, lifetime membership that unlocks over 100 premium examples, early access, powerful Studio tools, a private Discord, and exclusive APIs like:
-
--   Cursor
--   Ticker
--   AnimateNumber
--   splitText
-
-[Get Motion+](https://motion.dev/plus)
-
 ## 👩🏻‍⚖️ License
 
 -   Motion is MIT licensed.
@@ -103,11 +133,11 @@ Motion powers Framer animations, the web builder for creative pros. Design and s
 
 ### Platinum
 
-<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
+<a href="https://tailwindcss.com"><img alt="Tailwind" src="https://github.com/user-attachments/assets/c0496f09-b8ee-4bc4-85ab-83a071bbbdec" width="300px" height="200px"></a> <a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/a93710bb-d8ed-40e3-b0fb-1c5b3e2b16bb" width="300px" height="200px"></a>
 
 ### Gold
 
-<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a>
+<a href="https://vercel.com"><img alt="Vercel" src="https://github.com/user-attachments/assets/23cb1e37-fa67-49ad-8f77-7f4b8eaba325" width="225px" height="150px"></a> <a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/31436a47-951e-4eab-9a68-bdd54ccf9444" width="225px" height="150px"></a> <a href="https://lu.ma"><img alt="Luma" src="https://github.com/user-attachments/assets/4fae0c9d-de0f-4042-9cd6-e07885d028a9" width="225px" height="150px"></a> <a href="https://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></a>
 
 ### Silver