Skip to content

Commit 76396b0

Browse files
authored
Update README.md
1 parent b273d06 commit 76396b0

File tree

1 file changed

+66
-36
lines changed

1 file changed

+66
-36
lines changed

README.md

Lines changed: 66 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,46 @@
1-
<p align="center">
2-
<img width="42" height="42" alt="Motion logo" src="https://github.com/user-attachments/assets/00d6d1c3-72c4-4c2f-a664-69da13182ffc" />
3-
</p>
4-
<h1 align="center">Motion</h1>
1+
2+
<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>
53
<h3 align="center">
6-
An open source animation library for JavaScript, React and Vue
4+
An open source animation library<br />for JavaScript, React and Vue
75
</h3>
86

9-
<br>
7+
<p align="center">
8+
<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>
9+
<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>
10+
<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>
11+
<img alt="NPM License" src="https://img.shields.io/npm/l/motion?color=FF2B6E">
12+
</p>
1013

11-
Motion is an animation library and suite of developer tools for making beautiful animations.
1214

13-
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.
15+
```bash
16+
npm install motion
17+
```
1418

15-
## 🍦 Flavours
19+
## Table of Contents
1620

17-
### JavaScript
21+
1. [Why Motion?](#why-motion)
22+
2. [🍦 Flavours](#-flavours)
23+
3. [🎓 Examples](#-examples)
24+
4. [🎨 Studio](#-studio)
25+
5. [⚡️ Motion+](#-motion)
26+
6. [👩🏻‍⚖️ License](#-license)
27+
7. [💎 Contribute](#-contribute)
28+
8. [✨ Sponsors](#-sponsors)
1829

19-
```javascript
20-
import { animate } from "motion"
30+
## Why Motion?
2131

22-
animate("#box", { x: 100 })
23-
```
32+
Motion is an animation library for making beautiful animations.
2433

25-
Get started with [JavaScript](https://motion.dev/docs/quick-start).
34+
* The **only** library with first‑class APIs for React, JavaScript, **and** Vue.
35+
* Powered by a **hybrid engine** that blends JavaScript flexibility with native browser APIs for **120fps GPU‑accelerated** motion.
36+
* Tiny footprint, tree‑shakable, and fully TypeScript‑typed.
2637

27-
### React
38+
## 🍦 Flavours
2839

29-
```bash
30-
npm install motion
31-
```
40+
Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
41+
42+
<details>
43+
<summary>React ⬇</summary>
3244

3345
```jsx
3446
import { motion } from "motion/react"
@@ -38,9 +50,25 @@ function Component() {
3850
}
3951
```
4052

41-
Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
53+
Get started with [Motion for React](https://motion.dev/docs/react).
54+
55+
</details>
56+
57+
<details>
58+
<summary>JavaScript ⬇</summary>
59+
60+
```javascript
61+
import { animate } from "motion"
62+
63+
animate("#box", { x: 100 })
64+
```
65+
66+
Get started with [JavaScript](https://motion.dev/docs/quick-start).
67+
68+
</details>
4269

43-
### Vue
70+
<details>
71+
<summary>Vue ⬇</summary>
4472

4573
```html
4674
<script>
@@ -52,6 +80,23 @@ Get started with [Motion for React](https://motion.dev/docs/react-quick-start).
5280

5381
Get started with [Motion for Vue](https://motion.dev/docs/vue).
5482

83+
</details>
84+
85+
## 🎓 Examples
86+
87+
[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.
88+
89+
## ⚡️ Motion+
90+
91+
Learn, Design, Build. [Motion+](https://motion.dev/plus) is a one-time fee, lifetime update membership that provides:
92+
- 160+ premium Motion Examples
93+
- Motion UI features like Cursor and Ticker
94+
- Motion Studio animation editing for VS Code `alpha`
95+
- Early access content
96+
- Private Discord
97+
98+
[Get Motion+](https://motion.dev/plus)
99+
55100
## 🎨 Studio
56101

57102
![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:
64109

65110
Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
66111

67-
## 🎓 Examples
68-
69-
[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.
70-
71-
## ⚡️ Motion+
72-
73-
[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:
74-
75-
- Cursor
76-
- Ticker
77-
- AnimateNumber
78-
- splitText
79-
80-
[Get Motion+](https://motion.dev/plus)
81-
82112
## 👩🏻‍⚖️ License
83113

84114
- Motion is MIT licensed.

0 commit comments

Comments
 (0)