Mission Control Dashboard - Initial implementation
This commit is contained in:
Daniel Arroyo
138
node_modules/framer-motion/README.md
generated
vendored
Normal file
138
node_modules/framer-motion/README.md
generated
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
<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 for React</h1>
|
||||
<h3 align="center">
|
||||
An open source animation library<br />for React
|
||||
</h3>
|
||||
|
||||
<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>
|
||||
|
||||
```bash
|
||||
npm install motion
|
||||
```
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1. [Why Motion?](#why-motion)
|
||||
2. [🍦 Platforms](#-platforms)
|
||||
3. [🎓 Examples](#-examples)
|
||||
4. [⚡️ Motion+](#-motion)
|
||||
5. [👩🏻⚖️ License](#-license)
|
||||
6. [💎 Contribute](#-contribute)
|
||||
7. [✨ Sponsors](#-sponsors)
|
||||
|
||||
## Why Motion?
|
||||
|
||||
- **Simple API:** First-class React, JavaScript, and Vue packages.
|
||||
- **Hybrid engine:** Power of JavaScript combined with native browser APIs for 120fps, GPU-accelerated animations.
|
||||
- **Production-ready:** TypeScript, extensive test suite, tree-shakable, tiny footprint.
|
||||
**Batteries included:** Gestures, springs, layout transitions, scroll-linked effects, timelines.
|
||||
|
||||
## 🍦 Platforms
|
||||
|
||||
Motion is available for [React](https://motion.dev/docs/react), [JavaScript](https://motion.dev/docs/quick-start) and [Vue](https://motion.dev/docs/vue).
|
||||
|
||||
### React
|
||||
|
||||
```jsx
|
||||
import { motion } from "motion/react"
|
||||
|
||||
function Component() {
|
||||
return <motion.div animate={{ x: 100 }} />
|
||||
}
|
||||
```
|
||||
|
||||
Get started with [Motion for React](https://motion.dev/docs/react).
|
||||
|
||||
**Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
|
||||
|
||||
### JS
|
||||
|
||||
```javascript
|
||||
import { animate } from "motion"
|
||||
|
||||
animate("#box", { x: 100 })
|
||||
```
|
||||
|
||||
Get started with [JavaScript](https://motion.dev/docs/quick-start).
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { motion } from "motion-v"
|
||||
</script>
|
||||
|
||||
<template> <motion.div :animate={{ x: 100 }} /> </template>
|
||||
```
|
||||
|
||||
Get started with [Motion for Vue](https://motion.dev/docs/vue).
|
||||
|
||||
## 🎓 Examples & tutorials
|
||||
|
||||
Browse 330+ [official examples](https://motion.dev/examples), with copy-paste code that'll level-up your animations whether you're a beginner or an expert.
|
||||
|
||||
Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).
|
||||
|
||||
## ⚡️ Motion+
|
||||
|
||||
A one-time payment, lifetime-updates membership:
|
||||
|
||||
- **330+ examples**
|
||||
- **100+ tutorials**
|
||||
- **Premium APIs** like [Cursor](https://motion.dev/docs/cursor) and [Ticker](https://motion.dev/docs/react-ticker)
|
||||
- **Transition editor** for Cursor and VS Code
|
||||
- **AI skills**
|
||||
- **Private Discord**
|
||||
- **Early access content**
|
||||
|
||||
[Get Motion+](https://motion.dev/plus)
|
||||
|
||||
## 👩🏻⚖️ License
|
||||
|
||||
- Motion is MIT licensed.
|
||||
|
||||
## 💎 Contribute
|
||||
|
||||
- Want to contribute to Motion? Our [contributing guide](https://github.com/motiondivision/motion/blob/master/CONTRIBUTING.md) has you covered.
|
||||
|
||||
## ✨ Sponsors
|
||||
|
||||
Motion is sustainable thanks to the kind support of its sponsors.
|
||||
|
||||
[Become a sponsor](https://motion.dev/sponsor)
|
||||
|
||||
### Partners
|
||||
|
||||
Motion powers the animations for all websites built with Framer, the web builder for creative pros. The Motion website itself is built on Framer, for its delightful canvas-based editing and powerful CMS features.
|
||||
|
||||
<a href="https://framer.link/FlnUbQY">
|
||||
<img alt="Framer" src="https://github.com/user-attachments/assets/22a79be7-672e-4336-bfb7-5d55d1deb917" width="250px" height="150px">
|
||||
</a>
|
||||
|
||||
Motion drives the animations on the Cursor homepage, and is working with Cursor to bring powerful AI workflows to the Motion examples and docs.
|
||||
|
||||
<a href="https://cursor.com">
|
||||
<img alt="Cursor" src="https://github.com/user-attachments/assets/81c482d3-c2c2-4b35-bbcf-933b28d5b448" width="250px" height="150px" />
|
||||
</a>
|
||||
|
||||
### Platinum
|
||||
|
||||
<a href="https://linear.app"><img alt="Linear" src="https://github.com/user-attachments/assets/f9ce44b4-af28-4770-bb6e-9515b474bfb2" width="250px" height="150px"></a> <a href="https://figma.com"><img alt="Figma" src="https://github.com/user-attachments/assets/1077d0ab-4305-4a1f-81c8-d5be8c4c6717" width="250px" height="150px"></a> <a href="https://sanity.io"><img alt="Sanity" src="https://github.com/user-attachments/assets/80134088-f456-483f-8edd-940593c120ce" width="250px" height="150px"></a> <a href="https://animations.dev"><img alt="Sanity" src="https://github.com/user-attachments/assets/7c5ab87d-c7d9-44b4-9c7e-f9e6a9f3ba3b" width="250px" height="150px"></a> <a href="https://clerk.com?utm_campaign=motion"><img alt="Clerk" src="https://github.com/user-attachments/assets/16789f85-eaf4-46fb-9961-b3e66d33afbc" width="250px" height="150px"></a> <a href="https://www.greptile.com/?utm_source=motion&utm_medium=sponsorship"><img alt="Greptile" src="https://github.com/user-attachments/assets/6d1d7100-46b0-420b-8ce5-a18026c6297f" width="250px" height="150px"></a>
|
||||
|
||||
### Gold
|
||||
|
||||
<a href="https://mintlify.com"><img alt="Mintlify" src="https://github.com/user-attachments/assets/2740db2f-1877-49ae-ae80-ba5d19ef1587" width="200px" height="120px"></a>
|
||||
|
||||
### Silver
|
||||
|
||||
<a href="https://liveblocks.io"><img alt="Liveblocks" src="https://github.com/user-attachments/assets/28eddbe5-1617-4e74-969d-2eb6fcd481af" width="150px" height="100px"></a> <a href="https://www.frontend.fyi/?utm_source=motion"><img alt="Frontend.fyi" src="https://github.com/user-attachments/assets/f16e3eb9-f0bd-4ad1-8049-f079a3d65c69" width="150px" height="100px"></a> <a href="https://firecrawl.dev"><img alt="Firecrawl" src="https://github.com/user-attachments/assets/2c44e7f4-5c2a-4714-9050-1570538665ff" width="150px" height="100px"></a> <a href="https://puzzmo.com"><img alt="Puzzmo" src="https://github.com/user-attachments/assets/e32205a7-3ab1-41ec-8729-a794058fd655" width="150px" height="100px"></a> <a href="https://bolt.new"><img alt="Bolt.new" src="https://github.com/user-attachments/assets/7932d4b2-bb6c-422e-82b9-6ad78a7e3090" width="150px" height="100px"></a>
|
||||
|
||||
### Personal
|
||||
|
||||
- [OlegWock](https://sinja.io)
|
||||
- [Lambert Weller](https://github.com/l-mbert)
|
||||
- [Jake LeBoeuf](https://jklb.wf)
|
||||
Reference in New Issue
Block a user