motion-v 0.11.0-beta.6 → 0.11.1

package/README.md

@@ -1,31 +1,105 @@
+<p align="center">
+  <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" />
+</p>
 <h1 align="center">Motion for Vue</h1>
 
-A animation library designed for Vue 3, Powered by [Motion](https://www.framer.com/motion/).
+<br>
 
-## Features
+<p align="center">
+  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
+    <img src="https://img.shields.io/npm/v/motion-v.svg?style=flat-square" />
+  </a>
+  <a href="https://www.npmjs.com/package/motion-v" target="_blank">
+  <img src="https://img.shields.io/npm/dm/motion-v.svg?style=flat-square" />
+  </a>
+  <a href="https://twitter.com/motiondotdev" target="_blank">
+  <img src="https://img.shields.io/twitter/follow/framer.svg?style=social&label=Follow"  />
+  </a>
+</p>
 
-- 🎨 Declarative Animation API
-- 🔄 Gesture Animation Support
-- 🎯 Full TypeScript Support
-- ⚡️ High Performance Animation
-- 🎭 Variants Animation System
-- 👀 Viewport Animation Trigger
-- 🚪 Enter/Exit Animation Support
+<br>
+<hr>
+<br>
 
-## 🏎️ Quick start
-Install `motion-v`:
-```bash
+Motion for Vue is an open source, production-ready library that’s designed for all creative developers.
+
+It's the only animation library with a hybrid engine, combining the power of JavaScript animations with the performance of native browser APIs.
+
+It looks like this:
+
+```jsx
+<motion.div :animate="{ x: 100 }" />
+```
+
+It does all this:
+
+- Springs
+- Keyframes
+- Layout animations
+- Shared layout animations
+- Gestures (drag/tap/hover)
+- Scroll animations
+- SVG paths
+- Exit animations
+- Server-side rendering
+- Independent transforms
+- Orchestrate animations across components
+- CSS variables
+
+...and a whole lot more.
+
+## Get started
+
+### 🐇 Quick start
+
+Install `motion-v` via your package manager:
+
+```
 npm install motion-v
 ```
-## Basic Usage
+
+Then import the `motion` component:
+
 ```vue
 <script setup>
-import { Motion } from 'motion-v'
+import { motion } from 'motion-v'
 </script>
 
 <template>
-  <Motion :animate="{ x: 100 }" />
+  <motion.div :animate="{ x: 100 }" />
 </template>
 ```
 
-Read the full [docs](https://motion.seacoly.me/).
+### 💎 Contribute
+
+- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion-vue/blob/master/CONTRIBUTING.md) has you covered.
+
+### 👩🏻‍⚖️ License
+
+- Motion for Vue is MIT licensed.
+
+## ✨ Sponsors
+
+Motion is sustainable thanks to the kind support of its sponsors.
+
+### Partners
+
+#### Framer
+
+Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
+
+<a href="https://www.framer.com?utm_source=motion-readme">
+  <img alt="Framer" src="https://github.com/user-attachments/assets/0404c7a1-c29d-4785-89ae-aae315f3c759" width="300px" height="200px">
+</a>
+
+### Platinum
+
+<a href="https://syntax.fm"><img alt="Syntax.fm" src="https://github.com/user-attachments/assets/ab852bfe-b36c-490b-b98d-4061158c4863" 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://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>
+
+### 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>
+
+### Silver
+
+<a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/07d23aa5-69db-44a0-849d-90177e6fc817" width="150px" height="100px"></a> <a href="https://statamic.com"><img alt="Statamic" src="https://github.com/user-attachments/assets/5d28f090-bdd9-4b31-b134-fb2b94ca636f" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/cba90e54-1329-4353-8fba-85beef4d2ee9" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/aa2d5586-e5e2-43b9-8446-db456e4b0758" width="150px" height="100px"></a> <a href="https://buildui.com"><img alt="Build UI" src="https://github.com/user-attachments/assets/024bfcd5-50e8-4b3d-a115-d5c6d6030d1c" width="150px" height="100px"></a> <a href="https://hover.dev"><img alt="Hover" src="https://github.com/user-attachments/assets/4715b555-d2ac-4cb7-9f35-d36d708827b3" width="150px" height="100px"></a>