One (#2860)

* Renaming Framer Motion to Motion One

* Latest

* Adding config repo

* Adding new entrypoint

* Latest

* Latest

* Adding support for linear easing

* Latest

* Marking as pure

* Renaming Motion One

* Adding readme to motion package

* Latest

.github/ISSUE_TEMPLATE/bug_report.md

@@ -41,20 +41,20 @@ If applicable, let us know which OS, browser, browser version etc you're using.
 
 ### React Server Components `"use client"` error
 
-If you're importing `motion` or `m` into a React Server Component environment, ensure you're importing from `framer-motion/client` instead of `framer-motion`.
+If you're importing `motion` or `m` into a React Server Component environment, ensure you're importing from `motion/react-client` instead of `motion/react`.
 
 ```javascript
-import * as motion from "framer-motion/client"
-import * as m from "framer-motion/m"
+import * as motion from "motion/react-client"
+import * as m from "framer-motion/react-m"
 ```
 
-### Framer Motion won't install
+### Motion for React won't install
 
-Different versions of Framer Motion are compatible with different versions of React.
+Different versions of Motion for React are compatible with different versions of React.
 
-React 19: `12.0.0-alpha.0` or higher
-React 18: `7.0.0` to `11.x`
-React 17: `6.x` or lower
+React 19: `framer-motion@12.0.0-alpha.0` or higher
+React 18: `framer-motion@7.0.0` to `framer-motion@11.x`, or `motion`
+React 17: `framer-motion@6.x` or lower
 
 ### `height: "auto"` is jumping
 
@@ -64,7 +64,7 @@ The recommended solution is to move padding to a child element. See [this issue]
 
 ### Preact isn't working
 
-Framer Motion isn't compatible with Preact.
+Motion for React isn't compatible with Preact.
 
 ### `AnimatePresence` isn't working
 

.github/ISSUE_TEMPLATE/feature_request.md

@@ -3,8 +3,7 @@ name: Feature request
 about: Propose a feature
 title: "[FEATURE]"
 labels: feature
-assignees: ''
-
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
@@ -21,5 +20,6 @@ Add any other context or screenshots about the feature request here.
 
 ## FAQs
 
-### Does Framer Motion support Preact?
+### Does Motion support Preact?
+
 It might work with Preact, but we don't explicitly support it, so if it does currently work you'd be using it at your own risk.

CHANGELOG.md

@@ -1,6 +1,6 @@
 # Changelog
 
-Framer Motion adheres to [Semantic Versioning](http://semver.org/).
+Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
@@ -712,7 +712,7 @@ Undocumented APIs should be considered internal and may change without warning.
 
 ### Fixed
 
--   Fixed `layout` prop crashing Framer Motion 3D.
+-   Fixed `layout` prop crashing Motion 3D.
 
 ## [10.17.10] 2024-01-05
 
@@ -1593,7 +1593,7 @@ Undocumented APIs should be considered internal and may change without warning.
 
 ### Fixed
 
--   Variant `transition` fixed in Framer Motion 3D.
+-   Variant `transition` fixed in Motion 3D.
 
 ## [8.2.0] 2023-01-06
 
@@ -1728,7 +1728,7 @@ Undocumented APIs should be considered internal and may change without warning.
 
 ### Fixed
 
--   Fixing mapping Framer Motion easing names to WAAPI.
+-   Fixing mapping Motion easing names to WAAPI.
 
 ## [7.9.0] 2022-12-14
 
@@ -2172,7 +2172,7 @@ Undocumented APIs should be considered internal and may change without warning.
 
 ### Fixed
 
--   Will display a warning if different versions of Framer Motion are mixed.
+-   Will display a warning if different versions of Motion are mixed.
 
 ## [6.3.6] 2022-05-31
 
@@ -2184,7 +2184,7 @@ Undocumented APIs should be considered internal and may change without warning.
 
 ### Fixed
 
--   Added `initial` prop to Framer Motion 3D types.
+-   Added `initial` prop to Motion 3D types.
 
 ## [6.3.4] 2022-05-25
 
@@ -2384,7 +2384,7 @@ Undocumented APIs should be considered internal and may change without warning.
 
 ### Fixed
 
--   Sharing `MotionContext` across Framer Motion and Framer Motion 3D environments in CommonJS environments.
+-   Sharing `MotionContext` across Motion and Motion 3D environments in CommonJS environments.
 
 ## [5.4.1] 2021-12-06
 
@@ -3948,7 +3948,7 @@ Undocumented APIs should be considered internal and may change without warning.
 ### Fixed
 
 -   Filtering pointer events not from the primary pointer (ie non-left clicks for mouse).
--   Fixing drag in Android devices by adding aggressive viewport scroll blocking. This will need dialling back down when it comes to open sourcing Framer Motion so, for instance, a horizontal carousel doesn't block vertical scrolling.
+-   Fixing drag in Android devices by adding aggressive viewport scroll blocking. This will need dialling back down when it comes to open sourcing Motion so, for instance, a horizontal carousel doesn't block vertical scrolling.
 
 ## [0.16.0] 2019-04-19
 

CONTRIBUTING.md

@@ -1,8 +1,7 @@
-<h1 align="center">
-    <img src="http://misc.framerstatic.com/repos/api-logo.png" width="40"/>
-    <br>
-    Contributing
-</h1>
+<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" alt="Motion Icon" />
+</p>
+<h1 align="center">Contributing</h1>
 
 ## Bug fixes
 
@@ -20,8 +19,6 @@ Before adding any features, open a [Feature Proposal](https://github.com/framer/
 
 This will let us talk through your proposal API and/or implementation before you spend time on it.
 
-An added caveat is that this API is offered within Framer, so our target audience is designers as well as developers. This can tend us towards simplicity and power over composability.
-
 ## Development
 
 Follow these steps to get your code PR-ready:

README.md

@@ -1,14 +1,64 @@
 <p align="center">
-  <img src="https://framerusercontent.com/images/48ha9ZR9oZQGQ6gZ8YUfElP3T0A.png" width="50" height="50" alt="Framer Motion Icon" />
+  <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" alt="Motion logo" />
 </p>
-<h1 align="center">Framer Motion</h1>
+<h1 align="center">Motion</h1>
 <h3 align="center">
-  An open source motion library for React, made by Framer.
-</h3>
-<h3 align="center">
-Motion powers Framer, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
+  An open source motion library for JavaScript and React.
 </h3>
+
+<br>
+
+Motion is the only animation library with first-class APIs for both JavaScript and React.
+
+It also sports a unique hybrid engine, with all the power of JavaScript animations combined with the performance of native browser APIs.
+
+## 🏎️ Quick start
+
+Install `motion` with via your package manager:
+
+```
+npm install motion
+```
+
+### JavaScript
+
+```javascript
+import { animate } from "motion"
+
+animate("#box", { x: 100 })
+```
+
+Read the full [JavaScript docs](https://motion.dev/docs/quick-start).
+
+### React
+
+```jsx
+import { motion } from "motion/react"
+
+function Component() {
+    return <motion.div animate={{ x: 100 }} />
+}
+```
+
+Read the full [React docs](https://motion.dev/docs/react-quick-start).
+
+## 💎 Contribute
+
+-   Want to contribute to Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
+
+## 👩🏻‍⚖️ License
+
+-   Motion is MIT licensed.
+
+## ✨ Sponsors
+
+Motion is sustainable thanks to the kind support of its sponsors.
+
+### Framer
+
+Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
 <br/>
+
 <p align="center">
   <a href="https://www.framer.com?utm_source=motion-readme">
     <img src="https://framerusercontent.com/images/atXqxn4JhKm4LXVncdNjkKV7yCU.png" width="140" alt="Start for free" />
@@ -21,24 +71,6 @@ Motion powers Framer, the web builder for creative pros. Design and ship your dr
   </a>
 </p>
 
-<br>
-
-This repo contains the source code for [Framer Motion](https://github.com/framer/motion/tree/main/packages/framer-motion) and [Framer Motion 3D](https://github.com/framer/motion/tree/main/packages/framer-motion-3d).
-
-### 📚 Docs
-
--   [Install](https://www.framer.com/motion/introduction/#install) `framer-motion` via your package manager.
--   Check out [our documentation](https://www.framer.com/motion/?utm_source=motion-readme-docs) for guides and a full API reference.
--   Or see [our examples](https://www.framer.com/motion/examples/?utm_source=motion-readme-docs) for inspiration.
-
-### 💎 Contribute
-
--   Want to contribute to Framer Motion? Our [contributing guide](https://github.com/framer/motion/blob/master/CONTRIBUTING.md) has you covered.
-
-### 👩🏻‍⚖️ License
-
--   Framer Motion is MIT licensed.
-
-### ✨ Framer
+### Silver
 
--   Design and publish sites that inspire. [Try Framer for free](https://www.framer.com/?utm_source=motion-readme).
+-   [Tailwind](https://tailwindcss.com)

dev/html/README.md

@@ -1,6 +1,6 @@
-# Framer Motion Vanilla Dev Environment
+# Motion Vanilla Dev Environment
 
-This is the Vanilla dev environment for Framer Motion.
+This is the Vanilla dev environment for Motion.
 
 It hosts:
 

dev/html/index.html

@@ -3,7 +3,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Framer Motion Vanilla Playground</title>
+        <title>Motion Vanilla Playground</title>
     </head>
     <body>
         <div id="app"></div>

dev/html/public/benchmarks/cold-start-framer-motion.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-    Cold Start: Framer Motion
+    Cold Start: Motion
 
     This benchmarks cold start - when an animation library has to
     read values from the DOM.

dev/html/public/benchmarks/mix-array-framer-motion.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-array-greensock.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-color-value-framer-motion.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-color-value-greensock.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-complex-value-framer-motion.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-complex-value-greensock.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-number-value-framer-motion.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-number-value-greensock.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-object-greensock.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-unit-value-framer-motion.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/mix-unit-value-greensock.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-      Mix unit value: Framer Motion
+      Mix unit value: Motion
 
       This benchmark mixes simple unit values.
     -->

dev/html/public/benchmarks/warm-start-framer-motion.html

@@ -1,6 +1,6 @@
 <html>
     <!--
-    Warm Start: Framer Motion
+    Warm Start: Motion
 
     This benchmarks warm start - when an animation library already
     knows the initial animating values.

dev/html/public/optimized-appear/interrupt-spring.html

@@ -108,7 +108,7 @@
                 )
             }
 
-            // Start Motion One animations
+            // Start Motion animations
             const animation = startOptimizedAppearAnimation(
                 document.getElementById("box"),
                 "transform",

dev/html/public/optimized-appear/interrupt-tween-transforms.html

@@ -79,7 +79,7 @@
             // Emulate server rendering of element
             root.innerHTML = ReactDOMServer.renderToString(Component)
 
-            // Start Motion One animation
+            // Start Motion animation
             const animation = startOptimizedAppearAnimation(
                 document.getElementById("box"),
                 "transform",

dev/html/public/optimized-appear/portal.html

@@ -80,7 +80,7 @@
             // Emulate server rendering of element
             root.innerHTML = ReactDOMServer.renderToString(Component)
 
-            // Start Motion One animation
+            // Start Motion animation
             const animation = startOptimizedAppearAnimation(
                 document.getElementById("box"),
                 "transform",