motion 13.0.0-alpha.0 → 13.0.0

package/README.md

@@ -1,4 +1,3 @@
-
 <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<br />for JavaScript, React and Vue
@@ -9,38 +8,39 @@
   <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">
+  <a target="_blank" rel="noopener noreferrer nofollow" href="https://score.motion.dev/site/motion.dev?utm_source=github&utm_medium=readme-badge"><img height="20" alt="MotionScore grade" src="https://api.motion.dev/score/badge?url=motion.dev"></a>
 </p>
 
-
 ```bash
+# React / JavaScript
 npm install motion
+
+# Vue
+npm install motion-v
 ```
 
 ## Table of Contents
 
 1. [Why Motion?](#why-motion)
-2. [🍦 Flavours](#-flavours)
+2. [🍦 Platforms](#-platforms)
 3. [🎓 Examples](#-examples)
-4. [🎨 Studio](#-studio)
-5. [⚡️ Motion+](#-motion)
-6. [👩🏻‍⚖️ License](#-license)
-7. [💎 Contribute](#-contribute)
-8. [✨ Sponsors](#-sponsors)
+4. [⚡️ Motion+](#-motion)
+5. [👩🏻‍⚖️ License](#-license)
+6. [💎 Contribute](#-contribute)
+7. [✨ Sponsors](#-sponsors)
 
 ## Why Motion?
 
-Motion is an animation library for making beautiful animations.
-
-* 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.
+-   **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.
 
-## 🍦 Flavours
+## 🍦 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).
 
-<details>
-<summary>React ⬇</summary>
+### React
 
 ```jsx
 import { motion } from "motion/react"
@@ -52,10 +52,9 @@ function Component() {
 
 Get started with [Motion for React](https://motion.dev/docs/react).
 
-</details>
+**Note:** Framer Motion is now Motion. Import from `motion/react` instead of `framer-motion`.
 
-<details>
-<summary>JavaScript ⬇</summary>
+### JS
 
 ```javascript
 import { animate } from "motion"
@@ -65,10 +64,7 @@ animate("#box", { x: 100 })
 
 Get started with [JavaScript](https://motion.dev/docs/quick-start).
 
-</details>
-
-<details>
-<summary>Vue ⬇</summary>
+### Vue
 
 ```html
 <script>
@@ -80,34 +76,25 @@ Get started with [JavaScript](https://motion.dev/docs/quick-start).
 
 Get started with [Motion for Vue](https://motion.dev/docs/vue).
 
-</details>
+## 🎓 Examples & tutorials
 
-## 🎓 Examples
+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.
 
-[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.
+Over 100 examples come with a full step-by-step [tutorial](https://motion.dev/tutorials).
 
 ## ⚡️ 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
+A one-time payment, lifetime-updates membership:
 
-![Video of bezier curve editing](https://framerusercontent.com/images/KO5dnHOUSNGb9S73p1J7nLhoFI.gif)
+-   **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**
 
-Motion Studio is a versatile suite of developer tools allowing you to:
-
--   Visually edit CSS and Motion easing curves in VS Code
--   Generate CSS springs with LLMs
--   Load Motion docs into your LLM
-
-Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
+[Get Motion+](https://motion.dev/plus)
 
 ## 👩🏻‍⚖️ License
 
@@ -121,31 +108,34 @@ Get started with [Motion Studio](https://motion.dev/docs/tools-quick-start).
 
 Motion is sustainable thanks to the kind support of its sponsors.
 
+[Become a sponsor](https://motion.dev/sponsor)
+
 ### Partners
 
-#### Framer
+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.
 
-Motion powers Framer animations, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed.
+<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://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 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://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>
+<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>
 
 ### 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://emilkowal.ski"><img alt="Emil Kowalski" src="https://github.com/user-attachments/assets/29f56b1a-37fb-4695-a6a6-151f6c24864f" width="300px" height="200px"></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://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://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://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)
--   [Han Lee](https://github.com/hahnlee)

package/dist/cjs/react.js

@@ -2,13 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var framerMotion = require('framer-motion');
+var fm = require('framer-motion');
 
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
 
+var fm__namespace = /*#__PURE__*/_interopNamespaceDefault(fm);
 
-Object.keys(framerMotion).forEach(function (k) {
+// Re-export everything from framer-motion.
+//
+// `motion` and `m` are aliased through local bindings so the module has
+// explicit named exports for IDE auto-import (see #3432). The previous
+// `export { motion, m } from "framer-motion"` line — sitting alongside
+// `export * from "framer-motion"` — was a duplicate-source re-export pattern
+// that caused Next.js Turbopack to OOM during module-graph analysis (#3741).
+// Local declarations shadow the wildcard re-export per the ES spec, so
+// `motion` and `m` come from the explicit bindings below and the rest from
+// `export *`.
+const motion = fm__namespace.motion;
+const m = fm__namespace.m;
+
+exports.m = m;
+exports.motion = motion;
+Object.keys(fm).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,
-		get: function () { return framerMotion[k]; }
+		get: function () { return fm[k]; }
 	});
 });

package/dist/es/react.mjs

@@ -1 +1,17 @@
+import * as fm from 'framer-motion';
 export * from 'framer-motion';
+
+// Re-export everything from framer-motion.
+//
+// `motion` and `m` are aliased through local bindings so the module has
+// explicit named exports for IDE auto-import (see #3432). The previous
+// `export { motion, m } from "framer-motion"` line — sitting alongside
+// `export * from "framer-motion"` — was a duplicate-source re-export pattern
+// that caused Next.js Turbopack to OOM during module-graph analysis (#3741).
+// Local declarations shadow the wildcard re-export per the ES spec, so
+// `motion` and `m` come from the explicit bindings below and the rest from
+// `export *`.
+const motion = fm.motion;
+const m = fm.m;
+
+export { m, motion };