diff --git a/Makefile b/Makefile
index 9a8c1f0225..6437c9e5d2 100644
--- a/Makefile
+++ b/Makefile
@@ -46,8 +46,7 @@ SOURCE_FILES := $(shell find packages/framer-motion/src packages/framer-motion-3
 TEST_REPORT_PATH := $(if $(CIRCLE_TEST_REPORTS),$(CIRCLE_TEST_REPORTS),$(CURDIR)/test_reports)
 
 build: bootstrap
-	cd packages/framer-motion && yarn build
-	cd packages/framer-motion-3d && yarn build
+	yarn build
 
 watch: bootstrap
 	cd packages/framer-motion && yarn watch
diff --git a/dev/next/package.json b/dev/next/package.json
index 8624fbfbc7..c1f4f4df29 100644
--- a/dev/next/package.json
+++ b/dev/next/package.json
@@ -1,7 +1,7 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "11.12.0",
+    "version": "11.13.0-beta.0",
     "type": "module",
     "scripts": {
         "dev": "next dev",
@@ -9,7 +9,7 @@
         "start": "next start"
     },
     "dependencies": {
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.13.0-beta.0",
         "next": "14.x",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
diff --git a/dev/next/tsconfig.json b/dev/next/tsconfig.json
index ccb2ed95d8..24de86f3aa 100644
--- a/dev/next/tsconfig.json
+++ b/dev/next/tsconfig.json
@@ -1,34 +1,23 @@
 {
-  "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "noEmit": true,
-    "incremental": true,
-    "module": "esnext",
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
-  },
-  "include": [
-    "next-env.d.ts",
-    ".next/types/**/*.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "noEmit": true,
+        "incremental": true,
+        "module": "esnext",
+        "esModuleInterop": true,
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "preserve",
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ]
+    },
+    "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["node_modules"]
 }
diff --git a/dev/react/package.json b/dev/react/package.json
index a36845464e..e6192971a7 100644
--- a/dev/react/package.json
+++ b/dev/react/package.json
@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "11.12.0",
+    "version": "11.13.0-beta.0",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,7 +11,7 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.13.0-beta.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },
diff --git a/dev/react/tsconfig.json b/dev/react/tsconfig.json
index a7fc6fbf23..2bb6ad677e 100644
--- a/dev/react/tsconfig.json
+++ b/dev/react/tsconfig.json
@@ -1,25 +1,25 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": ["ES2020", "DOM", "DOM.Iterable"],
+        "module": "esnext",
+        "skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
+        /* Bundler mode */
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+        /* Linting */
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": ["src"],
+    "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/dev/react/tsconfig.node.json b/dev/react/tsconfig.node.json
index 97ede7ee6f..120d496787 100644
--- a/dev/react/tsconfig.node.json
+++ b/dev/react/tsconfig.node.json
@@ -1,11 +1,11 @@
 {
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true
-  },
-  "include": ["vite.config.ts"]
+    "compilerOptions": {
+        "composite": true,
+        "skipLibCheck": true,
+        "module": "esnext",
+        "moduleResolution": "bundler",
+        "allowSyntheticDefaultImports": true,
+        "strict": true
+    },
+    "include": ["vite.config.ts"]
 }
diff --git a/lerna.json b/lerna.json
index 45aef59ea4..dee12414b2 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,9 +1,8 @@
 {
-    "version": "11.12.0",
-    "packages": [
-        "packages/*",
-        "dev/*"
-    ],
-    "npmClient": "yarn",
-    "useWorkspaces": true
-}
+  "version": "11.13.0-beta.0",
+  "packages": [
+    "packages/*",
+    "dev/*"
+  ],
+  "npmClient": "yarn"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index bdfbf1366b..1cd08d6d2e 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "test-ci": "turbo run test-ci --no-cache",
         "measure": "turbo run measure",
         "version": "yarn install && git stage yarn.lock",
-        "prepare": "make check-status && turbo run build measure",
+        "prepare": "make check-status &&turbo run build measure",
         "new": "lerna publish from-package",
         "new-alpha": "turbo run build && lerna publish from-package --canary --preid alpha"
     },
diff --git a/packages/config/package.json b/packages/config/package.json
index f536596fad..7de828a42c 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -1,6 +1,6 @@
 {
     "name": "config",
-    "version": "11.11.12",
+    "version": "11.13.0-beta.0",
     "main": "index.js",
     "private": true,
     "license": "MIT",
diff --git a/packages/config/tsconfig.json b/packages/config/tsconfig.json
index 182b194e35..13ad6a6b1c 100644
--- a/packages/config/tsconfig.json
+++ b/packages/config/tsconfig.json
@@ -2,7 +2,7 @@
     "compilerOptions": {
         "target": "es2018",
         "module": "esnext",
-        "moduleResolution": "node",
+        "moduleResolution": "bundler",
         "isolatedModules": false,
         "importHelpers": true,
         "jsx": "react-jsx",
diff --git a/packages/framer-motion-3d/package.json b/packages/framer-motion-3d/package.json
index bcac777444..5fe529d65b 100644
--- a/packages/framer-motion-3d/package.json
+++ b/packages/framer-motion-3d/package.json
@@ -1,6 +1,6 @@
 {
     "name": "framer-motion-3d",
-    "version": "11.12.0",
+    "version": "11.13.0-beta.0",
     "description": "A simple and powerful React animation library for @react-three/fiber",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -45,7 +45,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.13.0-beta.0",
         "react-merge-refs": "^2.0.1"
     },
     "peerDependencies": {
@@ -60,5 +60,5 @@
         "@rollup/plugin-commonjs": "^22.0.1",
         "three": "^0.137.0"
     },
-    "gitHead": "eeb1cc452e2b468d838ec76fd501b131b383c5c9"
+    "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c"
 }
diff --git a/packages/framer-motion/cypress/integration/layout-shared-lightbox-crossfade-repeated.ts b/packages/framer-motion/cypress/integration/layout-shared-lightbox-crossfade-repeated.ts
deleted file mode 100644
index f8f5f03ff2..0000000000
--- a/packages/framer-motion/cypress/integration/layout-shared-lightbox-crossfade-repeated.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-import { pipe } from "framer-motion"
-
-interface BoundingBox {
-    top: number
-    left: number
-    width: number
-    height: number
-}
-
-function expectBbox(element: HTMLElement, expectedBbox: BoundingBox) {
-    const bbox = element.getBoundingClientRect()
-    expect(bbox.top).to.equal(expectedBbox.top)
-    expect(bbox.left).to.equal(expectedBbox.left)
-    expect(bbox.width).to.equal(expectedBbox.width)
-    expect(bbox.height).to.equal(expectedBbox.height)
-}
-
-describe.skip("Shared layout lightbox example, toggle back and forth", () => {
-    it("Correctly animates back and forth with crossfade", () => {
-        function open(session: Cypress.cy) {
-            return session
-                .get("#item-parent")
-                .trigger("click")
-                .wait(50)
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "2.25225% / 0.88968%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal("1")
-                    expectBbox($box, {
-                        top: 49,
-                        left: 209,
-                        width: 222,
-                        height: 562,
-                    })
-                })
-                .get("#item-child")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "50%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal(
-                        "0.5"
-                    )
-                    expectBbox($box, {
-                        left: 525.1500244140625,
-                        top: 260.1499938964844,
-                        height: 50,
-                        width: 50,
-                    })
-                })
-                .get("#parent")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "2.25225% / 0.88968%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal(
-                        "0.6"
-                    )
-                    expectBbox($box, {
-                        top: 49,
-                        left: 209,
-                        width: 222,
-                        height: 562,
-                    })
-                })
-                .get("#child")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "50%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal(
-                        "0.5"
-                    )
-                    expectBbox($box, {
-                        top: 292.5,
-                        left: 272.5,
-                        width: 50,
-                        height: 50,
-                    })
-                })
-        }
-
-        function close(session: Cypress.cy) {
-            return session
-                .get("#overlay")
-                .trigger("click")
-                .wait(50)
-                .get("#item-parent")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "0.271444% / 0.0864753%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal("1")
-                    expectBbox($box, {
-                        height: 578.199951171875,
-                        left: 209.89999389648438,
-                        top: 40.900001525878906,
-                        width: 184.20001220703125,
-                    })
-                })
-                .get("#item-child")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "50%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal(
-                        "0.5"
-                    )
-                    expectBbox($box, {
-                        top: 303.75,
-                        left: 274.75,
-                        width: 50,
-                        height: 50,
-                    })
-                })
-                .get("#parent")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "0.271444% / 0.0864753%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal(
-                        "0.0666667"
-                    )
-                    expectBbox($box, {
-                        height: 578.199951171875,
-                        left: 209.89999389648438,
-                        top: 40.900001525878906,
-                        width: 184.20001220703125,
-                    })
-                })
-                .get("#child")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "50%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal(
-                        "0.5"
-                    )
-                    expectBbox($box, {
-                        top: 303.75,
-                        left: 274.75,
-                        width: 50,
-                        height: 50,
-                    })
-                })
-        }
-
-        pipe(
-            open,
-            close,
-            (session: Cypress.cy) => session.wait(1000),
-            open,
-            close,
-            (session: Cypress.cy) => session.wait(1000),
-            open,
-            close
-        )(
-            cy
-                .visit(
-                    `?test=layout-shared-lightbox-crossfade&type=crossfade&partial-ease=true`
-                )
-                .wait(50)
-        )
-    })
-    it.skip("Correctly animates back and forth with switch", () => {
-        function open(session: Cypress.cy) {
-            return session
-                .get("#item-parent")
-                .trigger("click")
-                .wait(50)
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).visibility).to.equal(
-                        "hidden"
-                    )
-                })
-                .get("#parent")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "2.25225% / 0.88968%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal("1")
-                    expectBbox($box, {
-                        top: 49,
-                        left: 209,
-                        width: 222,
-                        height: 562,
-                    })
-                })
-        }
-
-        function close(session: Cypress.cy) {
-            return session
-                .get("#overlay")
-                .trigger("click")
-                .wait(50)
-                .get("#item-parent")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).visibility).to.equal(
-                        "hidden"
-                    )
-                })
-                .get("#parent")
-                .should(([$box]: any) => {
-                    expect(window.getComputedStyle($box).borderRadius).to.equal(
-                        "0.271444% / 0.0864753%"
-                    )
-                    expect(window.getComputedStyle($box).opacity).to.equal("1")
-                    expectBbox($box, {
-                        height: 578.199951171875,
-                        left: 209.89999389648438,
-                        top: 40.900001525878906,
-                        width: 184.20001220703125,
-                    })
-                })
-        }
-
-        pipe(
-            open,
-            close,
-            (session: Cypress.cy) => session.wait(200),
-            open,
-            close
-        )(
-            cy
-                .visit(
-                    `?test=layout-shared-lightbox-crossfade&type=switch&partial-ease=true`
-                )
-                .wait(50)
-        )
-    })
-})
diff --git a/packages/framer-motion/package.json b/packages/framer-motion/package.json
index f58712cb16..7caf453b65 100644
--- a/packages/framer-motion/package.json
+++ b/packages/framer-motion/package.json
@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "11.12.0",
+    "version": "11.13.0-beta.0",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -83,6 +83,8 @@
         "measure": "rollup -c ./rollup.size.config.mjs && bundlesize"
     },
     "dependencies": {
+        "motion-dom": "^11.13.0-beta.0",
+        "motion-utils": "^11.13.0-beta.0",
         "tslib": "^2.4.0"
     },
     "devDependencies": {
@@ -134,5 +136,6 @@
             "path": "./dist/size-rollup-waapi-animate.js",
             "maxSize": "2.54 kB"
         }
-    ]
+    ],
+    "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c"
 }
diff --git a/packages/framer-motion/src/animation/animate/index.ts b/packages/framer-motion/src/animation/animate/index.ts
index c65b702588..8d8ed2a09e 100644
--- a/packages/framer-motion/src/animation/animate/index.ts
+++ b/packages/framer-motion/src/animation/animate/index.ts
@@ -1,3 +1,4 @@
+import { AnimationScope, ElementOrSelector } from "motion-dom"
 import { GenericKeyframesTarget } from "../../types"
 import type { MotionValue } from "../../value"
 import { GroupPlaybackControls } from "../GroupPlaybackControls"
@@ -8,10 +9,8 @@ import {
 } from "../sequence/types"
 import {
     AnimationPlaybackControls,
-    AnimationScope,
     DOMKeyframesDefinition,
     DynamicAnimationOptions,
-    ElementOrSelector,
     ValueAnimationTransition,
 } from "../types"
 import { animateSequence } from "./sequence"
diff --git a/packages/framer-motion/src/animation/animate/resolve-subjects.ts b/packages/framer-motion/src/animation/animate/resolve-subjects.ts
index b7d2b39ca3..f0db9fa874 100644
--- a/packages/framer-motion/src/animation/animate/resolve-subjects.ts
+++ b/packages/framer-motion/src/animation/animate/resolve-subjects.ts
@@ -1,9 +1,6 @@
-import {
-    resolveElements,
-    SelectorCache,
-} from "../../render/dom/utils/resolve-element"
+import { AnimationScope, SelectorCache, resolveElements } from "motion-dom"
 import { ObjectTarget } from "../sequence/types"
-import { AnimationScope, DOMKeyframesDefinition } from "../types"
+import { DOMKeyframesDefinition } from "../types"
 import { isDOMKeyframes } from "../utils/is-dom-keyframes"
 
 export function resolveSubjects<O extends {}>(
diff --git a/packages/framer-motion/src/animation/animate/sequence.ts b/packages/framer-motion/src/animation/animate/sequence.ts
index eef7e6ddbc..b1410bab99 100644
--- a/packages/framer-motion/src/animation/animate/sequence.ts
+++ b/packages/framer-motion/src/animation/animate/sequence.ts
@@ -1,7 +1,8 @@
+import { AnimationScope } from "motion-dom"
 import { spring } from "../generators/spring"
 import { createAnimationsFromSequence } from "../sequence/create"
 import { AnimationSequence, SequenceOptions } from "../sequence/types"
-import { AnimationPlaybackControls, AnimationScope } from "../types"
+import { AnimationPlaybackControls } from "../types"
 import { animateSubject } from "./subject"
 
 export function animateSequence(
diff --git a/packages/framer-motion/src/animation/animate/subject.ts b/packages/framer-motion/src/animation/animate/subject.ts
index 470aad4d81..5c1797345b 100644
--- a/packages/framer-motion/src/animation/animate/subject.ts
+++ b/packages/framer-motion/src/animation/animate/subject.ts
@@ -1,16 +1,15 @@
+import { AnimationScope, ElementOrSelector } from "motion-dom"
+import { invariant } from "motion-utils"
 import { visualElementStore } from "../../render/store"
 import { GenericKeyframesTarget, TargetAndTransition } from "../../types"
-import { invariant } from "../../utils/errors"
 import type { MotionValue } from "../../value"
 import { isMotionValue } from "../../value/utils/is-motion-value"
 import { animateTarget } from "../interfaces/visual-element-target"
 import { ObjectTarget } from "../sequence/types"
 import {
     AnimationPlaybackControls,
-    AnimationScope,
     DOMKeyframesDefinition,
     DynamicAnimationOptions,
-    ElementOrSelector,
     ValueAnimationTransition,
 } from "../types"
 import {
diff --git a/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts b/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts
index df9dc7ed95..f652cf6a55 100644
--- a/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts
+++ b/packages/framer-motion/src/animation/animators/AcceleratedAnimation.ts
@@ -4,7 +4,7 @@ import { circInOut } from "../../easing/circ"
 import { EasingDefinition } from "../../easing/types"
 import { DOMKeyframesResolver } from "../../render/dom/DOMKeyframesResolver"
 import { ResolvedKeyframes } from "../../render/utils/KeyframesResolver"
-import { noop } from "../../utils/noop"
+import { noop } from "motion-utils"
 import {
     millisecondsToSeconds,
     secondsToMilliseconds,
diff --git a/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts b/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts
index 70ed590e92..975a7bcf0e 100644
--- a/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts
+++ b/packages/framer-motion/src/animation/animators/MainThreadAnimation.ts
@@ -20,7 +20,7 @@ import {
     secondsToMilliseconds,
 } from "../../utils/time-conversion"
 import { clamp } from "../../utils/clamp"
-import { invariant } from "../../utils/errors"
+import { invariant } from "motion-utils"
 import { frameloopDriver } from "./drivers/driver-frameloop"
 import { getFinalKeyframe } from "./waapi/utils/get-final-keyframe"
 import { isGenerator } from "../generators/utils/is-generator"
diff --git a/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts b/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts
index 2447b9e994..63ec8ade39 100644
--- a/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts
+++ b/packages/framer-motion/src/animation/animators/__tests__/MainThreadAnimation.test.ts
@@ -1,7 +1,7 @@
 import { MainThreadAnimation, animateValue } from "../MainThreadAnimation"
 import { reverseEasing } from "../../../easing/modifiers/reverse"
 import { nextFrame } from "../../../gestures/__tests__/utils"
-import { noop } from "../../../utils/noop"
+import { noop } from "motion-utils"
 import { ValueAnimationOptions } from "../../types"
 import { syncDriver } from "./utils"
 import { KeyframeResolver } from "../../../render/utils/KeyframesResolver"
diff --git a/packages/framer-motion/src/animation/animators/utils/can-animate.ts b/packages/framer-motion/src/animation/animators/utils/can-animate.ts
index 8f35fc2bc4..fefcb5f1f1 100644
--- a/packages/framer-motion/src/animation/animators/utils/can-animate.ts
+++ b/packages/framer-motion/src/animation/animators/utils/can-animate.ts
@@ -1,5 +1,5 @@
 import { ResolvedKeyframes } from "../../../render/utils/KeyframesResolver"
-import { warning } from "../../../utils/errors"
+import { warning } from "motion-utils"
 import { isGenerator } from "../../generators/utils/is-generator"
 import { AnimationGeneratorType } from "../../types"
 import { isAnimatable } from "../../utils/is-animatable"
diff --git a/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts b/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts
index 77090ed656..2887923abd 100644
--- a/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts
+++ b/packages/framer-motion/src/animation/animators/waapi/NativeAnimation.ts
@@ -2,8 +2,7 @@ import { startWaapiAnimation } from "."
 import { createGeneratorEasing } from "../../../easing/utils/create-generator-easing"
 import { ProgressTimeline } from "../../../render/dom/scroll/observe"
 import { browserNumberValueTypes } from "../../../render/dom/value-types/number-browser"
-import { invariant } from "../../../utils/errors"
-import { noop } from "../../../utils/noop"
+import { noop, invariant } from "motion-utils"
 import {
     millisecondsToSeconds,
     secondsToMilliseconds,
diff --git a/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts b/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts
index 0eb3a70637..74dafa0548 100644
--- a/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts
+++ b/packages/framer-motion/src/animation/animators/waapi/animate-elements.ts
@@ -1,12 +1,10 @@
-import { resolveElements } from "../../../render/dom/utils/resolve-element"
-import { invariant } from "../../../utils/errors"
+import { resolveElements, ElementOrSelector, AnimationScope } from "motion-dom"
+import { invariant } from "motion-utils"
 import { secondsToMilliseconds } from "../../../utils/time-conversion"
 import {
     AnimationPlaybackControls,
-    AnimationScope,
     DOMKeyframesDefinition,
     DynamicAnimationOptions,
-    ElementOrSelector,
 } from "../../types"
 import { getValueTransition } from "../../utils/get-value-transition"
 import { NativeAnimation } from "./NativeAnimation"
diff --git a/packages/framer-motion/src/animation/animators/waapi/animate-style.ts b/packages/framer-motion/src/animation/animators/waapi/animate-style.ts
index 59411ecec4..b0a96898ac 100644
--- a/packages/framer-motion/src/animation/animators/waapi/animate-style.ts
+++ b/packages/framer-motion/src/animation/animators/waapi/animate-style.ts
@@ -1,10 +1,9 @@
+import { AnimationScope, ElementOrSelector } from "motion-dom"
 import { GroupPlaybackControls } from "../../GroupPlaybackControls"
 import {
     AnimationPlaybackControls,
-    AnimationScope,
     DOMKeyframesDefinition,
     DynamicAnimationOptions,
-    ElementOrSelector,
 } from "../../types"
 import { animateElements } from "./animate-elements"
 
diff --git a/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts b/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts
index f56126e0ea..9c387f903c 100644
--- a/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts
+++ b/packages/framer-motion/src/animation/animators/waapi/utils/__tests__/linear.test.ts
@@ -1,4 +1,4 @@
-import { noop } from "../../../../../utils/noop"
+import { noop } from "motion-utils"
 import { generateLinearEasing } from "../linear"
 
 describe("generateLinearEasing", () => {
diff --git a/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts b/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts
index 0a46a60444..03a0ae4818 100644
--- a/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts
+++ b/packages/framer-motion/src/animation/generators/__tests__/keyframes.test.ts
@@ -1,4 +1,4 @@
-import { noop } from "../../../utils/noop"
+import { noop } from "motion-utils"
 import { easeInOut } from "../../../easing/ease"
 import { defaultOffset } from "../../../utils/offsets/default"
 import { convertOffsetToTimes } from "../../../utils/offsets/time"
diff --git a/packages/framer-motion/src/animation/generators/spring/find.ts b/packages/framer-motion/src/animation/generators/spring/find.ts
index c1b7bcebf7..1553a987a4 100644
--- a/packages/framer-motion/src/animation/generators/spring/find.ts
+++ b/packages/framer-motion/src/animation/generators/spring/find.ts
@@ -1,4 +1,4 @@
-import { warning } from "../../../utils/errors"
+import { warning } from "motion-utils"
 import { clamp } from "../../../utils/clamp"
 import { SpringOptions } from "../../types"
 import {
diff --git a/packages/framer-motion/src/animation/hooks/animation-controls.ts b/packages/framer-motion/src/animation/hooks/animation-controls.ts
index 4526d38df6..dd927a67c8 100644
--- a/packages/framer-motion/src/animation/hooks/animation-controls.ts
+++ b/packages/framer-motion/src/animation/hooks/animation-controls.ts
@@ -1,4 +1,4 @@
-import { invariant } from "../../utils/errors"
+import { invariant } from "motion-utils"
 import { setTarget } from "../../render/utils/setters"
 import type { VisualElement } from "../../render/VisualElement"
 import { AnimationControls, AnimationDefinition } from "../types"
diff --git a/packages/framer-motion/src/animation/hooks/use-animate-style.ts b/packages/framer-motion/src/animation/hooks/use-animate-style.ts
index 15a48de09d..3f86e8ef66 100644
--- a/packages/framer-motion/src/animation/hooks/use-animate-style.ts
+++ b/packages/framer-motion/src/animation/hooks/use-animate-style.ts
@@ -1,7 +1,7 @@
 import { useConstant } from "../../utils/use-constant"
 import { useUnmountEffect } from "../../utils/use-unmount-effect"
 import { createScopedWaapiAnimate } from "../animators/waapi/animate-style"
-import { AnimationScope } from "../types"
+import { AnimationScope } from "motion-dom"
 
 export function useAnimateMini<T extends Element = any>() {
     const scope: AnimationScope<T> = useConstant(() => ({
diff --git a/packages/framer-motion/src/animation/hooks/use-animate.ts b/packages/framer-motion/src/animation/hooks/use-animate.ts
index ba4bad60ce..a694e8d102 100644
--- a/packages/framer-motion/src/animation/hooks/use-animate.ts
+++ b/packages/framer-motion/src/animation/hooks/use-animate.ts
@@ -1,7 +1,7 @@
 import { useConstant } from "../../utils/use-constant"
 import { useUnmountEffect } from "../../utils/use-unmount-effect"
 import { createScopedAnimate } from "../animate"
-import { AnimationScope } from "../types"
+import { AnimationScope } from "motion-dom"
 
 export function useAnimate<T extends Element = any>() {
     const scope: AnimationScope<T> = useConstant(() => ({
diff --git a/packages/framer-motion/src/animation/optimized-appear/start.ts b/packages/framer-motion/src/animation/optimized-appear/start.ts
index 4e4abd91b4..d247247403 100644
--- a/packages/framer-motion/src/animation/optimized-appear/start.ts
+++ b/packages/framer-motion/src/animation/optimized-appear/start.ts
@@ -4,7 +4,7 @@ import { NativeAnimationOptions } from "../animators/waapi/types"
 import { optimizedAppearDataId } from "./data-id"
 import { handoffOptimizedAppearAnimation } from "./handoff"
 import { appearAnimationStore, AppearStoreEntry, appearComplete } from "./store"
-import { noop } from "../../utils/noop"
+import { noop } from "motion-utils"
 import "./types"
 import { getOptimisedAppearId } from "./get-appear-id"
 import { MotionValue } from "../../value"
diff --git a/packages/framer-motion/src/animation/sequence/create.ts b/packages/framer-motion/src/animation/sequence/create.ts
index 88cecc620e..034fd6b7c7 100644
--- a/packages/framer-motion/src/animation/sequence/create.ts
+++ b/packages/framer-motion/src/animation/sequence/create.ts
@@ -1,3 +1,4 @@
+import { AnimationScope } from "motion-dom"
 import { Easing } from "../../easing/types"
 import { createGeneratorEasing } from "../../easing/utils/create-generator-easing"
 import { defaultOffset } from "../../utils/offsets/default"
@@ -10,7 +11,6 @@ import { resolveSubjects } from "../animate/resolve-subjects"
 import { isGenerator } from "../generators/utils/is-generator"
 import { DynamicAnimationOptions, GeneratorFactory } from "../types"
 import {
-    AnimationScope,
     DOMKeyframesDefinition,
     Transition,
     UnresolvedValueKeyframe,
diff --git a/packages/framer-motion/src/animation/sequence/types.ts b/packages/framer-motion/src/animation/sequence/types.ts
index bf429e5531..5ea4331b0b 100644
--- a/packages/framer-motion/src/animation/sequence/types.ts
+++ b/packages/framer-motion/src/animation/sequence/types.ts
@@ -1,10 +1,10 @@
+import { ElementOrSelector } from "motion-dom"
 import { Easing } from "../../easing/types"
 import { GenericKeyframesTarget } from "../../types"
 import type { MotionValue } from "../../value"
 import { DynamicAnimationOptions } from "../types"
 import {
     DOMKeyframesDefinition,
-    ElementOrSelector,
     Transition,
     AnimationPlaybackOptions,
     UnresolvedValueKeyframe,
diff --git a/packages/framer-motion/src/animation/types.ts b/packages/framer-motion/src/animation/types.ts
index e572abe687..b28ff7ba7e 100644
--- a/packages/framer-motion/src/animation/types.ts
+++ b/packages/framer-motion/src/animation/types.ts
@@ -73,11 +73,6 @@ export interface ValueAnimationOptionsWithRenderContext<
     element?: VisualElement
 }
 
-export interface AnimationScope<T = any> {
-    readonly current: T
-    animations: AnimationPlaybackControls[]
-}
-
 export type StyleTransitions = {
     [K in keyof CSSStyleDeclarationWithTransform]?: Transition
 }
@@ -105,12 +100,6 @@ export interface DynamicAnimationOptions
     delay?: number | DynamicOption<number>
 }
 
-export type ElementOrSelector =
-    | Element
-    | Element[]
-    | NodeListOf<Element>
-    | string
-
 /**
  * @public
  */
diff --git a/packages/framer-motion/src/components/AnimatePresence/index.tsx b/packages/framer-motion/src/components/AnimatePresence/index.tsx
index 84c6b28770..8131f2c4c6 100644
--- a/packages/framer-motion/src/components/AnimatePresence/index.tsx
+++ b/packages/framer-motion/src/components/AnimatePresence/index.tsx
@@ -5,7 +5,7 @@ import * as React from "react"
 import { AnimatePresenceProps } from "./types"
 import { PresenceChild } from "./PresenceChild"
 import { LayoutGroupContext } from "../../context/LayoutGroupContext"
-import { invariant } from "../../utils/errors"
+import { invariant } from "motion-utils"
 import { useIsomorphicLayoutEffect } from "../../three-entry"
 import { useConstant } from "../../utils/use-constant"
 import { ComponentKey, getChildKey, onlyElements } from "./utils"
diff --git a/packages/framer-motion/src/components/AnimateSharedLayout.tsx b/packages/framer-motion/src/components/AnimateSharedLayout.tsx
index 44f8d09615..2048e4aa3e 100644
--- a/packages/framer-motion/src/components/AnimateSharedLayout.tsx
+++ b/packages/framer-motion/src/components/AnimateSharedLayout.tsx
@@ -1,4 +1,4 @@
-import { invariant } from "../utils/errors"
+import { invariant } from "motion-utils"
 import * as React from "react"
 import { useConstant } from "../utils/use-constant"
 import { LayoutGroup } from "./LayoutGroup"
diff --git a/packages/framer-motion/src/components/Reorder/Group.tsx b/packages/framer-motion/src/components/Reorder/Group.tsx
index 2ebde8cafe..a6eee5b1ca 100644
--- a/packages/framer-motion/src/components/Reorder/Group.tsx
+++ b/packages/framer-motion/src/components/Reorder/Group.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { invariant } from "../../utils/errors"
+import { invariant } from "motion-utils"
 import * as React from "react"
 import {
     forwardRef,
diff --git a/packages/framer-motion/src/components/Reorder/Item.tsx b/packages/framer-motion/src/components/Reorder/Item.tsx
index eb3d0d08ee..6c8df027ff 100644
--- a/packages/framer-motion/src/components/Reorder/Item.tsx
+++ b/packages/framer-motion/src/components/Reorder/Item.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { invariant } from "../../utils/errors"
+import { invariant } from "motion-utils"
 import * as React from "react"
 import { ReactHTML, FunctionComponent, useContext, forwardRef } from "react"
 import { ReorderContext } from "../../context/ReorderContext"
diff --git a/packages/framer-motion/src/dom.ts b/packages/framer-motion/src/dom.ts
index 7ed25421b7..275ec0df53 100644
--- a/packages/framer-motion/src/dom.ts
+++ b/packages/framer-motion/src/dom.ts
@@ -1,3 +1,6 @@
+export { noop, invariant } from "motion-utils"
+export { hover, isDragActive } from "motion-dom"
+
 export { motionValue, MotionValue } from "./value"
 export type { PassiveEffect, Subscriber } from "./value"
 export { animate, createScopedAnimate } from "./animation/animate"
@@ -34,7 +37,6 @@ export { transform } from "./utils/transform"
 export { clamp } from "./utils/clamp"
 export { delayInSeconds as delay, DelayedFunction } from "./utils/delay"
 export * from "./utils/distance"
-export * from "./utils/errors"
 export * from "./utils/interpolate"
 export { mix } from "./utils/mix"
 export { pipe } from "./utils/pipe"
diff --git a/packages/framer-motion/src/easing/cubic-bezier.ts b/packages/framer-motion/src/easing/cubic-bezier.ts
index f88e644e26..f0228b9cf6 100644
--- a/packages/framer-motion/src/easing/cubic-bezier.ts
+++ b/packages/framer-motion/src/easing/cubic-bezier.ts
@@ -16,7 +16,7 @@
     const x = easeOut(0.5); // returns 0.627...
 */
 
-import { noop } from "../utils/noop"
+import { noop } from "motion-utils"
 
 // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
 const calcBezier = (t: number, a1: number, a2: number) =>
diff --git a/packages/framer-motion/src/easing/utils/__tests__/map.test.ts b/packages/framer-motion/src/easing/utils/__tests__/map.test.ts
index 6361634859..cd2371cbda 100644
--- a/packages/framer-motion/src/easing/utils/__tests__/map.test.ts
+++ b/packages/framer-motion/src/easing/utils/__tests__/map.test.ts
@@ -1,7 +1,7 @@
 import { backIn } from "../../../easing/back"
 import { cubicBezier } from "../../../easing/cubic-bezier"
 import { easeInOut } from "../../../easing/ease"
-import { noop } from "../../../utils/noop"
+import { noop } from "motion-utils"
 import { easingDefinitionToFunction } from "../map"
 
 describe("easingDefinitionToFunction", () => {
diff --git a/packages/framer-motion/src/easing/utils/map.ts b/packages/framer-motion/src/easing/utils/map.ts
index 868ae70354..cacb4687a4 100644
--- a/packages/framer-motion/src/easing/utils/map.ts
+++ b/packages/framer-motion/src/easing/utils/map.ts
@@ -1,12 +1,11 @@
-import { invariant } from "../../utils/errors"
+import { invariant, noop } from "motion-utils"
 import { cubicBezier } from "../../easing/cubic-bezier"
-import { noop } from "../../utils/noop"
 import { easeIn, easeInOut, easeOut } from "../../easing/ease"
 import { circIn, circInOut, circOut } from "../../easing/circ"
 import { backIn, backInOut, backOut } from "../../easing/back"
 import { anticipate } from "../../easing/anticipate"
 import { Easing } from "../../easing/types"
-import { isBezierDefinition } from "./is-bezier-definition";
+import { isBezierDefinition } from "./is-bezier-definition"
 
 const easingLookup = {
     linear: noop,
diff --git a/packages/framer-motion/src/events/event-info.ts b/packages/framer-motion/src/events/event-info.ts
index 836f97b1b5..ba5996ac3a 100644
--- a/packages/framer-motion/src/events/event-info.ts
+++ b/packages/framer-motion/src/events/event-info.ts
@@ -6,14 +6,11 @@ export type EventListenerWithPointInfo = (
     info: EventInfo
 ) => void
 
-export function extractEventInfo(
-    event: PointerEvent,
-    pointType: "page" | "client" = "page"
-): EventInfo {
+export function extractEventInfo(event: PointerEvent): EventInfo {
     return {
         point: {
-            x: event[`${pointType}X`],
-            y: event[`${pointType}Y`],
+            x: event.pageX,
+            y: event.pageY,
         },
     }
 }
diff --git a/packages/framer-motion/src/frameloop/frame.ts b/packages/framer-motion/src/frameloop/frame.ts
index 55887f1ac6..3d7936c016 100644
--- a/packages/framer-motion/src/frameloop/frame.ts
+++ b/packages/framer-motion/src/frameloop/frame.ts
@@ -1,4 +1,4 @@
-import { noop } from "../utils/noop"
+import { noop } from "motion-utils"
 import { createRenderBatcher } from "./batcher"
 
 export const {
diff --git a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
index 0a0c9f93e9..f192dad62a 100644
--- a/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
+++ b/packages/framer-motion/src/gestures/drag/VisualElementDragControls.ts
@@ -1,7 +1,7 @@
-import { invariant } from "../../utils/errors"
+import { invariant } from "motion-utils"
+import { setDragLock } from "motion-dom"
 import { PanSession, PanInfo } from "../pan/PanSession"
 import { ResolvedConstraints } from "./types"
-import { Lock, getGlobalLock } from "./utils/lock"
 import { isRefObject } from "../../utils/is-ref-object"
 import { addPointerEvent } from "../../events/add-pointer-event"
 import {
@@ -57,10 +57,7 @@ export class VisualElementDragControls {
 
     private panSession?: PanSession
 
-    // This is a reference to the global drag gesture lock, ensuring only one component
-    // can "capture" the drag of one or both axes.
-    // TODO: Look into moving this into pansession?
-    private openGlobalLock: Lock | null = null
+    private openDragLock: VoidFunction | null = null
 
     isDragging = false
     private currentDirection: DragDirection | null = null
@@ -101,7 +98,7 @@ export class VisualElementDragControls {
             dragSnapToOrigin ? this.pauseAnimation() : this.stopAnimation()
 
             if (snapToCursor) {
-                this.snapToCursor(extractEventInfo(event, "page").point)
+                this.snapToCursor(extractEventInfo(event).point)
             }
         }
 
@@ -110,11 +107,12 @@ export class VisualElementDragControls {
             const { drag, dragPropagation, onDragStart } = this.getProps()
 
             if (drag && !dragPropagation) {
-                if (this.openGlobalLock) this.openGlobalLock()
-                this.openGlobalLock = getGlobalLock(drag)
+                if (this.openDragLock) this.openDragLock()
+
+                this.openDragLock = setDragLock(drag)
 
                 // If we don 't have the lock, don't start dragging
-                if (!this.openGlobalLock) return
+                if (!this.openDragLock) return
             }
 
             this.isDragging = true
@@ -175,7 +173,7 @@ export class VisualElementDragControls {
             } = this.getProps()
 
             // If we didn't successfully receive the gesture lock, early return.
-            if (!dragPropagation && !this.openGlobalLock) return
+            if (!dragPropagation && !this.openDragLock) return
 
             const { offset } = info
             // Attempt to detect drag direction if directionLock is true
@@ -261,9 +259,9 @@ export class VisualElementDragControls {
         this.panSession = undefined
 
         const { dragPropagation } = this.getProps()
-        if (!dragPropagation && this.openGlobalLock) {
-            this.openGlobalLock()
-            this.openGlobalLock = null
+        if (!dragPropagation && this.openDragLock) {
+            this.openDragLock()
+            this.openDragLock = null
         }
 
         animationState && animationState.setActive("whileDrag", false)
diff --git a/packages/framer-motion/src/gestures/drag/index.ts b/packages/framer-motion/src/gestures/drag/index.ts
index 3b468c78e5..107edcab1e 100644
--- a/packages/framer-motion/src/gestures/drag/index.ts
+++ b/packages/framer-motion/src/gestures/drag/index.ts
@@ -1,6 +1,6 @@
 import { Feature } from "../../motion/features/Feature"
 import type { VisualElement } from "../../render/VisualElement"
-import { noop } from "../../utils/noop"
+import { noop } from "motion-utils"
 import { VisualElementDragControls } from "./VisualElementDragControls"
 
 export class DragGesture extends Feature<HTMLElement> {
diff --git a/packages/framer-motion/src/gestures/drag/utils/lock.ts b/packages/framer-motion/src/gestures/drag/utils/lock.ts
deleted file mode 100644
index c92a0e6daa..0000000000
--- a/packages/framer-motion/src/gestures/drag/utils/lock.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-export type Lock = (() => void) | false
-
-export function createLock(name: string) {
-    let lock: null | string = null
-    return (): Lock => {
-        const openLock = (): void => {
-            lock = null
-        }
-        if (lock === null) {
-            lock = name
-            return openLock
-        }
-        return false
-    }
-}
-
-const globalHorizontalLock = createLock("dragHorizontal")
-const globalVerticalLock = createLock("dragVertical")
-
-export function getGlobalLock(
-    drag: boolean | "x" | "y" | "lockDirection"
-): Lock {
-    let lock: Lock = false
-    if (drag === "y") {
-        lock = globalVerticalLock()
-    } else if (drag === "x") {
-        lock = globalHorizontalLock()
-    } else {
-        const openHorizontal = globalHorizontalLock()
-        const openVertical = globalVerticalLock()
-        if (openHorizontal && openVertical) {
-            lock = () => {
-                openHorizontal()
-                openVertical()
-            }
-        } else {
-            // Release the locks because we don't use them
-            if (openHorizontal) openHorizontal()
-            if (openVertical) openVertical()
-        }
-    }
-    return lock
-}
-
-export function isDragActive() {
-    // Check the gesture lock - if we get it, it means no drag gesture is active
-    // and we can safely fire the tap gesture.
-    const openGestureLock = getGlobalLock(true)
-    if (!openGestureLock) return true
-    openGestureLock()
-    return false
-}
diff --git a/packages/framer-motion/src/gestures/hover.ts b/packages/framer-motion/src/gestures/hover.ts
index 6eb85a84bb..f4dc4b9d1f 100644
--- a/packages/framer-motion/src/gestures/hover.ts
+++ b/packages/framer-motion/src/gestures/hover.ts
@@ -1,41 +1,38 @@
-import { addPointerEvent } from "../events/add-pointer-event"
-import { pipe } from "../utils/pipe"
-import { isDragActive } from "./drag/utils/lock"
-import { EventInfo } from "../events/types"
 import type { VisualElement } from "../render/VisualElement"
 import { Feature } from "../motion/features/Feature"
 import { frame } from "../frameloop"
-
-function addHoverEvent(node: VisualElement<Element>, isActive: boolean) {
-    const eventName = isActive ? "pointerenter" : "pointerleave"
+import { hover } from "motion-dom"
+import { extractEventInfo } from "../events/event-info"
+
+function handleHoverEvent(
+    node: VisualElement<Element>,
+    event: PointerEvent,
+    isActive: boolean
+) {
     const callbackName = isActive ? "onHoverStart" : "onHoverEnd"
+    const props = node.getProps()
 
-    const handleEvent = (event: PointerEvent, info: EventInfo) => {
-        if (event.pointerType === "touch" || isDragActive()) return
-
-        const props = node.getProps()
-
-        if (node.animationState && props.whileHover) {
-            node.animationState.setActive("whileHover", isActive)
-        }
-
-        const callback = props[callbackName]
-        if (callback) {
-            frame.postRender(() => callback(event, info))
-        }
+    if (node.animationState && props.whileHover) {
+        node.animationState.setActive("whileHover", isActive)
     }
 
-    return addPointerEvent(node.current!, eventName, handleEvent, {
-        passive: !node.getProps()[callbackName],
-    })
+    const callback = props[callbackName]
+    if (callback) {
+        frame.postRender(() => callback(event, extractEventInfo(event)))
+    }
 }
 
 export class HoverGesture extends Feature<Element> {
     mount() {
-        this.unmount = pipe(
-            addHoverEvent(this.node, true),
-            addHoverEvent(this.node, false)
-        ) as VoidFunction
+        const { current } = this.node
+        if (current) {
+            this.unmount = hover(current, (startEvent) => {
+                handleHoverEvent(this.node, startEvent, true)
+
+                return (endEvent) =>
+                    handleHoverEvent(this.node, endEvent, false)
+            })
+        }
     }
 
     unmount() {}
diff --git a/packages/framer-motion/src/gestures/pan/index.ts b/packages/framer-motion/src/gestures/pan/index.ts
index a4f67ba4f4..574dd432ed 100644
--- a/packages/framer-motion/src/gestures/pan/index.ts
+++ b/packages/framer-motion/src/gestures/pan/index.ts
@@ -1,7 +1,7 @@
 import { PanInfo, PanSession } from "./PanSession"
 import { addPointerEvent } from "../../events/add-pointer-event"
 import { Feature } from "../../motion/features/Feature"
-import { noop } from "../../utils/noop"
+import { noop } from "motion-utils"
 import { getContextWindow } from "../../utils/get-context-window"
 import { frame } from "../../frameloop"
 
diff --git a/packages/framer-motion/src/gestures/press.ts b/packages/framer-motion/src/gestures/press.ts
index 68e6d212b8..d1256b1cdf 100644
--- a/packages/framer-motion/src/gestures/press.ts
+++ b/packages/framer-motion/src/gestures/press.ts
@@ -7,9 +7,9 @@ import { addDomEvent } from "../events/add-dom-event"
 import { addPointerEvent } from "../events/add-pointer-event"
 import { Feature } from "../motion/features/Feature"
 import { pipe } from "../utils/pipe"
-import { isDragActive } from "./drag/utils/lock"
+import { isDragActive } from "motion-dom"
 import { isNodeOrChild } from "./utils/is-node-or-child"
-import { noop } from "../utils/noop"
+import { noop } from "motion-utils"
 import { frame } from "../frameloop"
 
 function fireSyntheticPointerEvent(
diff --git a/packages/framer-motion/src/motion/index.tsx b/packages/framer-motion/src/motion/index.tsx
index 5885a6e5ba..ad0c4011cb 100644
--- a/packages/framer-motion/src/motion/index.tsx
+++ b/packages/framer-motion/src/motion/index.tsx
@@ -16,7 +16,7 @@ import { LayoutGroupContext } from "../context/LayoutGroupContext"
 import { LazyContext } from "../context/LazyContext"
 import { motionComponentSymbol } from "./utils/symbol"
 import { CreateVisualElement } from "../render/types"
-import { invariant, warning } from "../utils/errors"
+import { invariant, warning } from "motion-utils"
 import { featureDefinitions } from "./features/definitions"
 
 export interface MotionComponentConfig<Instance, RenderState> {
diff --git a/packages/framer-motion/src/projection/animation/mix-values.ts b/packages/framer-motion/src/projection/animation/mix-values.ts
index 6dddc66ab9..0373354400 100644
--- a/packages/framer-motion/src/projection/animation/mix-values.ts
+++ b/packages/framer-motion/src/projection/animation/mix-values.ts
@@ -3,7 +3,7 @@ import { EasingFunction } from "../../easing/types"
 import { ResolvedValues } from "../../render/types"
 import { progress as calcProgress } from "../../utils/progress"
 import { mixNumber } from "../../utils/mix/number"
-import { noop } from "../../utils/noop"
+import { noop } from "motion-utils"
 import { percent, px } from "../../value/types/numbers/units"
 
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"]
diff --git a/packages/framer-motion/src/projection/node/create-projection-node.ts b/packages/framer-motion/src/projection/node/create-projection-node.ts
index 032cb5a482..a94bf84f76 100644
--- a/packages/framer-motion/src/projection/node/create-projection-node.ts
+++ b/packages/framer-motion/src/projection/node/create-projection-node.ts
@@ -53,7 +53,7 @@ import { isSVGElement } from "../../render/dom/utils/is-svg-element"
 import { animateSingleValue } from "../../animation/animate/single-value"
 import { clamp } from "../../utils/clamp"
 import { frameSteps } from "../../frameloop/frame"
-import { noop } from "../../utils/noop"
+import { noop } from "motion-utils"
 import { time } from "../../frameloop/sync-time"
 import { microtask } from "../../frameloop/microtask"
 import { VisualElement } from "../../render/VisualElement"
diff --git a/packages/framer-motion/src/render/dom/resize/handle-element.ts b/packages/framer-motion/src/render/dom/resize/handle-element.ts
index 1655303145..7c20001852 100644
--- a/packages/framer-motion/src/render/dom/resize/handle-element.ts
+++ b/packages/framer-motion/src/render/dom/resize/handle-element.ts
@@ -1,5 +1,4 @@
-import { ElementOrSelector } from "../../../animation/types"
-import { resolveElements } from "../utils/resolve-element"
+import { ElementOrSelector, resolveElements } from "motion-dom"
 import { ResizeHandler } from "./types"
 
 const resizeHandlers = new WeakMap<Element, Set<ResizeHandler<Element>>>()
diff --git a/packages/framer-motion/src/render/dom/resize/index.ts b/packages/framer-motion/src/render/dom/resize/index.ts
index af126ce7ed..e071546b9d 100644
--- a/packages/framer-motion/src/render/dom/resize/index.ts
+++ b/packages/framer-motion/src/render/dom/resize/index.ts
@@ -1,4 +1,4 @@
-import { ElementOrSelector } from "../../../animation/types"
+import { ElementOrSelector } from "motion-dom"
 import { resizeElement } from "./handle-element"
 import { resizeWindow } from "./handle-window"
 import { ResizeHandler } from "./types"
diff --git a/packages/framer-motion/src/render/dom/scroll/index.ts b/packages/framer-motion/src/render/dom/scroll/index.ts
index 61345c55a4..7b9fc5f8bf 100644
--- a/packages/framer-motion/src/render/dom/scroll/index.ts
+++ b/packages/framer-motion/src/render/dom/scroll/index.ts
@@ -3,7 +3,7 @@ import { scrollInfo } from "./track"
 import { ProgressTimeline, observeTimeline } from "./observe"
 import { supportsScrollTimeline } from "./supports"
 import { AnimationPlaybackControls } from "../../../animation/types"
-import { noop } from "../../../utils/noop"
+import { noop } from "motion-utils"
 
 declare class ScrollTimeline implements ProgressTimeline {
     constructor(options: ScrollOptions)
diff --git a/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts b/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts
index 37e2cf0c08..b47be24033 100644
--- a/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts
+++ b/packages/framer-motion/src/render/dom/utils/css-variables-conversion.ts
@@ -1,4 +1,4 @@
-import { invariant } from "../../../utils/errors"
+import { invariant } from "motion-utils"
 import { isNumericalString } from "../../../utils/is-numerical-string"
 import { isCSSVariableToken, CSSVariableToken } from "./is-css-variable"
 
diff --git a/packages/framer-motion/src/render/dom/utils/resolve-element.ts b/packages/framer-motion/src/render/dom/utils/resolve-element.ts
deleted file mode 100644
index 42d798b798..0000000000
--- a/packages/framer-motion/src/render/dom/utils/resolve-element.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import type {
-    AnimationScope,
-    ElementOrSelector,
-} from "../../../animation/types"
-import { invariant } from "../../../utils/errors"
-
-export interface WithQuerySelectorAll {
-    querySelectorAll: Element["querySelectorAll"]
-}
-
-export type SelectorCache = { [key: string]: NodeListOf<Element> }
-
-export function resolveElements(
-    elements: ElementOrSelector,
-    scope?: AnimationScope,
-    selectorCache?: SelectorCache
-): Element[] {
-    if (typeof elements === "string") {
-        let root: WithQuerySelectorAll = document
-
-        if (scope) {
-            invariant(
-                Boolean(scope.current),
-                "Scope provided, but no element detected."
-            )
-            root = scope.current
-        }
-
-        if (selectorCache) {
-            selectorCache[elements] ??= root.querySelectorAll(elements)
-            elements = selectorCache[elements]
-        } else {
-            elements = root.querySelectorAll(elements)
-        }
-    } else if (elements instanceof Element) {
-        elements = [elements]
-    }
-
-    /**
-     * Return an empty array
-     */
-    return Array.from(elements || [])
-}
diff --git a/packages/framer-motion/src/render/dom/viewport/index.ts b/packages/framer-motion/src/render/dom/viewport/index.ts
index dfd62be8ce..7f9d614aaa 100644
--- a/packages/framer-motion/src/render/dom/viewport/index.ts
+++ b/packages/framer-motion/src/render/dom/viewport/index.ts
@@ -1,14 +1,13 @@
-import { ElementOrSelector } from "../../../animation/types"
-import { resolveElements } from "../utils/resolve-element"
+import { ElementOrSelector, resolveElements } from "motion-dom"
 
 export type ViewChangeHandler = (entry: IntersectionObserverEntry) => void
 
-type MarginValue = `${number}${'px' | '%'}`
+type MarginValue = `${number}${"px" | "%"}`
 type MarginType =
-    MarginValue |
-    `${MarginValue} ${MarginValue}` |
-    `${MarginValue} ${MarginValue} ${MarginValue}` |
-    `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`
+    | MarginValue
+    | `${MarginValue} ${MarginValue}`
+    | `${MarginValue} ${MarginValue} ${MarginValue}`
+    | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`
 
 export interface InViewOptions {
     root?: Element | Document
diff --git a/packages/framer-motion/src/three-entry.ts b/packages/framer-motion/src/three-entry.ts
index 3c5aa560b8..96b627c5b8 100644
--- a/packages/framer-motion/src/three-entry.ts
+++ b/packages/framer-motion/src/three-entry.ts
@@ -13,7 +13,6 @@ export {
     makeUseVisualState,
     VisualState,
 } from "./motion/utils/use-visual-state"
-export { isDragActive } from "./gestures/drag/utils/lock"
 export { addPointerEvent } from "./events/add-pointer-event"
 export { addPointerInfo } from "./events/event-info"
 export { isMotionValue } from "./value/utils/is-motion-value"
diff --git a/packages/framer-motion/src/utils/interpolate.ts b/packages/framer-motion/src/utils/interpolate.ts
index 54b48dbce6..4c4bedc4fd 100644
--- a/packages/framer-motion/src/utils/interpolate.ts
+++ b/packages/framer-motion/src/utils/interpolate.ts
@@ -1,9 +1,8 @@
-import { invariant } from "../utils/errors"
 import { EasingFunction } from "../easing/types"
 import { clamp } from "./clamp"
 import { pipe } from "./pipe"
 import { progress } from "./progress"
-import { noop } from "./noop"
+import { noop, invariant } from "motion-utils"
 import { mix } from "./mix"
 
 type Mix<T> = (v: number) => T
diff --git a/packages/framer-motion/src/utils/mix/color.ts b/packages/framer-motion/src/utils/mix/color.ts
index 9ac66dc6ed..b2f72a3107 100644
--- a/packages/framer-motion/src/utils/mix/color.ts
+++ b/packages/framer-motion/src/utils/mix/color.ts
@@ -1,5 +1,5 @@
 import { mixNumber } from "./number"
-import { warning } from "../errors"
+import { warning } from "motion-utils"
 import { hslaToRgba } from "../hsla-to-rgba"
 import { hex } from "../../value/types/color/hex"
 import { rgba } from "../../value/types/color/rgba"
diff --git a/packages/framer-motion/src/utils/mix/complex.ts b/packages/framer-motion/src/utils/mix/complex.ts
index 211fb0567b..dd319495e0 100644
--- a/packages/framer-motion/src/utils/mix/complex.ts
+++ b/packages/framer-motion/src/utils/mix/complex.ts
@@ -1,7 +1,7 @@
 import { mixNumber as mixNumberImmediate } from "./number"
 import { mixColor } from "./color"
 import { pipe } from "../pipe"
-import { warning } from "../errors"
+import { warning } from "motion-utils"
 import { HSLA, RGBA } from "../../value/types/types"
 import { color } from "../../value/types/color"
 import {
diff --git a/packages/framer-motion/src/value/use-inverted-scale.ts b/packages/framer-motion/src/value/use-inverted-scale.ts
index 0c1b9839f4..31fa3b0860 100644
--- a/packages/framer-motion/src/value/use-inverted-scale.ts
+++ b/packages/framer-motion/src/value/use-inverted-scale.ts
@@ -1,6 +1,6 @@
 import { useTransform } from "../value/use-transform"
 import { MotionValue } from "./"
-import { invariant, warning } from "../utils/errors"
+import { invariant, warning } from "motion-utils"
 import { useMotionValue } from "./use-motion-value"
 import { MotionContext } from "../context/MotionContext"
 import { useContext } from "react"
diff --git a/packages/framer-motion/src/value/use-scroll.ts b/packages/framer-motion/src/value/use-scroll.ts
index 6fcbcb1a39..46706fee3d 100644
--- a/packages/framer-motion/src/value/use-scroll.ts
+++ b/packages/framer-motion/src/value/use-scroll.ts
@@ -3,7 +3,7 @@ import { motionValue } from "."
 import { useConstant } from "../utils/use-constant"
 import { useEffect } from "react"
 import { useIsomorphicLayoutEffect } from "../three-entry"
-import { warning } from "../utils/errors"
+import { warning } from "motion-utils"
 import { scroll } from "../render/dom/scroll"
 import { ScrollInfoOptions } from "../render/dom/scroll/types"
 
diff --git a/packages/motion-dom/LICENSE.md b/packages/motion-dom/LICENSE.md
new file mode 100644
index 0000000000..2fb8bacf91
--- /dev/null
+++ b/packages/motion-dom/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 [Framer](https://www.framer.com?utm_source=motion-license) B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/motion-dom/package.json b/packages/motion-dom/package.json
new file mode 100644
index 0000000000..59f92648dd
--- /dev/null
+++ b/packages/motion-dom/package.json
@@ -0,0 +1,27 @@
+{
+    "name": "motion-dom",
+    "version": "11.13.0-beta.0",
+    "main": "./lib/index.js",
+    "types": "./types/index.d.ts",
+    "module": "./lib/index.js",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "require": "./dist/cjs/index.js",
+            "import": "./dist/es/index.mjs",
+            "default": "./lib/index.js"
+        },
+        "./hover": {
+            "types": "./types/gestures/hover.d.ts",
+            "require": "./dist/cjs/gestures/hover.js",
+            "import": "./dist/es/gestures/hover.mjs",
+            "default": "./lib/gestures/hover.js"
+        }
+    },
+    "scripts": {
+        "clean": "rm -rf types dist lib",
+        "build": "yarn clean && tsc -p . && rollup -c",
+        "dev": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\""
+    },
+    "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c"
+}
diff --git a/packages/motion-dom/rollup.config.mjs b/packages/motion-dom/rollup.config.mjs
new file mode 100644
index 0000000000..931d48864a
--- /dev/null
+++ b/packages/motion-dom/rollup.config.mjs
@@ -0,0 +1,94 @@
+import resolve from "@rollup/plugin-node-resolve"
+import replace from "@rollup/plugin-replace"
+import dts from "rollup-plugin-dts"
+import pkg from "./package.json" with { type: "json"}
+import tsconfig from "./tsconfig.json" with { type: "json" }
+import preserveDirectives from "rollup-plugin-preserve-directives";
+
+const config = {
+    input: "lib/index.js",
+}
+
+export const replaceSettings = (env) => {
+    const replaceConfig = env
+        ? {
+              "process.env.NODE_ENV": JSON.stringify(env),
+              preventAssignment: false,
+          }
+        : {
+              preventAssignment: false,
+          }
+
+    replaceConfig.__VERSION__ = `${pkg.version}`
+
+    return replace(replaceConfig)
+}
+
+const external = [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+    ...Object.keys(pkg.optionalDependencies || {}),
+    "react/jsx-runtime",
+]
+
+const cjs = Object.assign({}, config, {
+    input: "lib/index.js",
+    output: {
+        entryFileNames: `[name].js`,
+        dir: "dist/cjs",
+        format: "cjs",
+        exports: "named",
+        esModule: true
+    },
+    plugins: [resolve(), replaceSettings()],
+    external,
+    onwarn(warning, warn) {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+            return
+        }
+        warn(warning)
+    }
+})
+
+
+export const es = Object.assign({}, config, {
+    input: ["lib/index.js"],
+    output: {
+        entryFileNames: "[name].mjs",
+        format: "es",
+        exports: "named",
+        preserveModules: true,
+        dir: "dist/es",
+    },
+    plugins: [resolve(), replaceSettings(), preserveDirectives()],
+    external,
+    onwarn(warning, warn) {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+            return
+        }
+        warn(warning)
+    }
+})
+
+const typePlugins = [dts({compilerOptions: {...tsconfig, baseUrl:"types"}})]
+
+function createTypes(input, file) {   
+    return {
+        input,
+        output: {
+            format: "es",
+            file: file,
+        },
+        plugins: typePlugins,
+    }
+}
+
+
+const types = createTypes("types/index.d.ts", "dist/index.d.ts")
+
+// eslint-disable-next-line import/no-default-export
+export default [
+    cjs,
+    es,
+    types,
+]
diff --git a/packages/motion-dom/src/gestures/drag/state/is-active.ts b/packages/motion-dom/src/gestures/drag/state/is-active.ts
new file mode 100644
index 0000000000..dfed63f381
--- /dev/null
+++ b/packages/motion-dom/src/gestures/drag/state/is-active.ts
@@ -0,0 +1,8 @@
+export const isDragging = {
+    x: false,
+    y: false,
+}
+
+export function isDragActive() {
+    return isDragging.x || isDragging.y
+}
diff --git a/packages/motion-dom/src/gestures/drag/state/set-active.ts b/packages/motion-dom/src/gestures/drag/state/set-active.ts
new file mode 100644
index 0000000000..9ab65deddd
--- /dev/null
+++ b/packages/motion-dom/src/gestures/drag/state/set-active.ts
@@ -0,0 +1,23 @@
+import { isDragging } from "./is-active"
+
+export function setDragLock(axis: boolean | "x" | "y" | "lockDirection") {
+    if (axis === "x" || axis === "y") {
+        if (isDragging[axis]) {
+            return null
+        } else {
+            isDragging[axis] = true
+            return () => {
+                isDragging[axis] = false
+            }
+        }
+    } else {
+        if (isDragging.x || isDragging.y) {
+            return null
+        } else {
+            isDragging.x = isDragging.y = true
+            return () => {
+                isDragging.x = isDragging.y = false
+            }
+        }
+    }
+}
diff --git a/packages/motion-dom/src/gestures/hover.ts b/packages/motion-dom/src/gestures/hover.ts
new file mode 100644
index 0000000000..5f42fa7338
--- /dev/null
+++ b/packages/motion-dom/src/gestures/hover.ts
@@ -0,0 +1,44 @@
+import { ElementOrSelector, resolveElements } from "../utils/resolve-elements"
+import { isDragActive } from "./drag/state/is-active"
+
+export type OnHoverStartEvent = (event: PointerEvent) => void | OnHoverEndEvent
+export type OnHoverEndEvent = (event: PointerEvent) => void
+
+const filterEvents = (callback: OnHoverStartEvent) => {
+    return (event: PointerEvent) => {
+        if (event.pointerType === "touch" || isDragActive()) return
+        callback(event)
+    }
+}
+
+export function hover(
+    elementOrSelector: ElementOrSelector,
+    onHoverStart: OnHoverStartEvent
+) {
+    const elements = resolveElements(elementOrSelector)
+    const cancelGesture = new AbortController()
+
+    const options = { signal: cancelGesture.signal }
+
+    const onPointerEnter = filterEvents((enterEvent: PointerEvent) => {
+        if (enterEvent.pointerType === "touch") return
+
+        const { target } = enterEvent
+        const onHoverEnd = onHoverStart(enterEvent)
+
+        if (onHoverEnd && target) {
+            const onPointerLeave = filterEvents((leaveEvent: PointerEvent) => {
+                onHoverEnd(leaveEvent)
+                target.removeEventListener("pointerleave", onPointerLeave)
+            })
+
+            target.addEventListener("pointerleave", onPointerLeave, options)
+        }
+    })
+
+    elements.forEach((element) => {
+        element.addEventListener("pointerenter", onPointerEnter, options)
+    })
+
+    return () => cancelGesture.abort()
+}
diff --git a/packages/motion-dom/src/index.ts b/packages/motion-dom/src/index.ts
new file mode 100644
index 0000000000..e2af9d1eb9
--- /dev/null
+++ b/packages/motion-dom/src/index.ts
@@ -0,0 +1,5 @@
+export * from "./gestures/hover"
+
+export * from "./utils/resolve-elements"
+export * from "./gestures/drag/state/is-active"
+export * from "./gestures/drag/state/set-active"
diff --git a/packages/motion-dom/src/utils/resolve-elements.ts b/packages/motion-dom/src/utils/resolve-elements.ts
new file mode 100644
index 0000000000..6cc1799589
--- /dev/null
+++ b/packages/motion-dom/src/utils/resolve-elements.ts
@@ -0,0 +1,47 @@
+export type ElementOrSelector =
+    | Element
+    | Element[]
+    | NodeListOf<Element>
+    | string
+
+export interface WithQuerySelectorAll {
+    querySelectorAll: Element["querySelectorAll"]
+}
+
+export interface AnimationScope<T = any> {
+    readonly current: T
+    animations: any[] // TODO: Refactor to types package AnimationPlaybackControls[]
+}
+
+export interface SelectorCache {
+    [key: string]: NodeListOf<Element>
+}
+
+export function resolveElements(
+    elementOrSelector: ElementOrSelector,
+    scope?: AnimationScope,
+    selectorCache?: SelectorCache
+): Element[] {
+    if (elementOrSelector instanceof Element) {
+        return [elementOrSelector]
+    } else if (typeof elementOrSelector === "string") {
+        let root: WithQuerySelectorAll = document
+
+        if (scope) {
+            // TODO: Refactor to utils package
+            // invariant(
+            //     Boolean(scope.current),
+            //     "Scope provided, but no element detected."
+            // )
+            root = scope.current
+        }
+
+        const elements =
+            selectorCache?.[elementOrSelector] ??
+            root.querySelectorAll(elementOrSelector)
+
+        return elements ? Array.from(elements) : []
+    }
+
+    return Array.from(elementOrSelector)
+}
diff --git a/packages/motion-dom/tsconfig.json b/packages/motion-dom/tsconfig.json
new file mode 100644
index 0000000000..ee65a1289e
--- /dev/null
+++ b/packages/motion-dom/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "config/tsconfig.json",
+    "filesGlob": ["./src/**/*.ts"],
+    "exclude": [
+        "node_modules",
+        "build",
+        "**/__tests__/*",
+        "jest.setup.tsx",
+        "dev",
+        "types",
+        "dev/examples.framer",
+        "test",
+        "skins",
+        "dist",
+        "temp",
+        "api",
+        "cypress"
+    ],
+    "compilerOptions": {
+        "baseUrl": "src",
+        "declarationDir": "types",
+        "outDir": "lib",
+        "rootDir": "src"
+    }
+}
diff --git a/packages/motion-utils/LICENSE.md b/packages/motion-utils/LICENSE.md
new file mode 100644
index 0000000000..2fb8bacf91
--- /dev/null
+++ b/packages/motion-utils/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 [Framer](https://www.framer.com?utm_source=motion-license) B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/motion-utils/package.json b/packages/motion-utils/package.json
new file mode 100644
index 0000000000..d66b7f899b
--- /dev/null
+++ b/packages/motion-utils/package.json
@@ -0,0 +1,21 @@
+{
+    "name": "motion-utils",
+    "version": "11.13.0-beta.0",
+    "main": "./lib/index.js",
+    "types": "./types/index.d.ts",
+    "module": "./lib/index.js",
+    "exports": {
+        ".": {
+            "types": "./types/index.d.ts",
+            "require": "./dist/cjs/index.js",
+            "import": "./dist/es/index.mjs",
+            "default": "./lib/index.js"
+        }
+    },
+    "scripts": {
+        "clean": "rm -rf types dist lib",
+        "build": "yarn clean && tsc -p . && rollup -c",
+        "dev": "concurrently -c blue,red -n tsc,rollup --kill-others \"tsc --watch -p . --preserveWatchOutput\" \"rollup --config --watch --no-watch.clearScreen\""
+    },
+    "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c"
+}
diff --git a/packages/motion-utils/rollup.config.mjs b/packages/motion-utils/rollup.config.mjs
new file mode 100644
index 0000000000..931d48864a
--- /dev/null
+++ b/packages/motion-utils/rollup.config.mjs
@@ -0,0 +1,94 @@
+import resolve from "@rollup/plugin-node-resolve"
+import replace from "@rollup/plugin-replace"
+import dts from "rollup-plugin-dts"
+import pkg from "./package.json" with { type: "json"}
+import tsconfig from "./tsconfig.json" with { type: "json" }
+import preserveDirectives from "rollup-plugin-preserve-directives";
+
+const config = {
+    input: "lib/index.js",
+}
+
+export const replaceSettings = (env) => {
+    const replaceConfig = env
+        ? {
+              "process.env.NODE_ENV": JSON.stringify(env),
+              preventAssignment: false,
+          }
+        : {
+              preventAssignment: false,
+          }
+
+    replaceConfig.__VERSION__ = `${pkg.version}`
+
+    return replace(replaceConfig)
+}
+
+const external = [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+    ...Object.keys(pkg.optionalDependencies || {}),
+    "react/jsx-runtime",
+]
+
+const cjs = Object.assign({}, config, {
+    input: "lib/index.js",
+    output: {
+        entryFileNames: `[name].js`,
+        dir: "dist/cjs",
+        format: "cjs",
+        exports: "named",
+        esModule: true
+    },
+    plugins: [resolve(), replaceSettings()],
+    external,
+    onwarn(warning, warn) {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+            return
+        }
+        warn(warning)
+    }
+})
+
+
+export const es = Object.assign({}, config, {
+    input: ["lib/index.js"],
+    output: {
+        entryFileNames: "[name].mjs",
+        format: "es",
+        exports: "named",
+        preserveModules: true,
+        dir: "dist/es",
+    },
+    plugins: [resolve(), replaceSettings(), preserveDirectives()],
+    external,
+    onwarn(warning, warn) {
+        if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
+            return
+        }
+        warn(warning)
+    }
+})
+
+const typePlugins = [dts({compilerOptions: {...tsconfig, baseUrl:"types"}})]
+
+function createTypes(input, file) {   
+    return {
+        input,
+        output: {
+            format: "es",
+            file: file,
+        },
+        plugins: typePlugins,
+    }
+}
+
+
+const types = createTypes("types/index.d.ts", "dist/index.d.ts")
+
+// eslint-disable-next-line import/no-default-export
+export default [
+    cjs,
+    es,
+    types,
+]
diff --git a/packages/framer-motion/src/utils/errors.ts b/packages/motion-utils/src/errors.ts
similarity index 100%
rename from packages/framer-motion/src/utils/errors.ts
rename to packages/motion-utils/src/errors.ts
diff --git a/packages/motion-utils/src/index.ts b/packages/motion-utils/src/index.ts
new file mode 100644
index 0000000000..18534df27d
--- /dev/null
+++ b/packages/motion-utils/src/index.ts
@@ -0,0 +1,2 @@
+export * from "./errors"
+export * from "./noop"
diff --git a/packages/framer-motion/src/utils/noop.ts b/packages/motion-utils/src/noop.ts
similarity index 100%
rename from packages/framer-motion/src/utils/noop.ts
rename to packages/motion-utils/src/noop.ts
diff --git a/packages/motion-utils/tsconfig.json b/packages/motion-utils/tsconfig.json
new file mode 100644
index 0000000000..ee65a1289e
--- /dev/null
+++ b/packages/motion-utils/tsconfig.json
@@ -0,0 +1,25 @@
+{
+    "extends": "config/tsconfig.json",
+    "filesGlob": ["./src/**/*.ts"],
+    "exclude": [
+        "node_modules",
+        "build",
+        "**/__tests__/*",
+        "jest.setup.tsx",
+        "dev",
+        "types",
+        "dev/examples.framer",
+        "test",
+        "skins",
+        "dist",
+        "temp",
+        "api",
+        "cypress"
+    ],
+    "compilerOptions": {
+        "baseUrl": "src",
+        "declarationDir": "types",
+        "outDir": "lib",
+        "rootDir": "src"
+    }
+}
diff --git a/packages/motion/LICENSE.md b/packages/motion/LICENSE.md
new file mode 100644
index 0000000000..2fb8bacf91
--- /dev/null
+++ b/packages/motion/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 [Framer](https://www.framer.com?utm_source=motion-license) B.V.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/motion/package.json b/packages/motion/package.json
index 4983486d1a..d9c3105fd0 100644
--- a/packages/motion/package.json
+++ b/packages/motion/package.json
@@ -1,6 +1,6 @@
 {
     "name": "motion",
-    "version": "11.12.0",
+    "version": "11.13.0-beta.0",
     "description": "An animation library for JavaScript and React.",
     "main": "dist/cjs/index.js",
     "module": "dist/es/motion/lib/index.mjs",
@@ -70,7 +70,7 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^11.12.0",
+        "framer-motion": "^11.13.0-beta.0",
         "tslib": "^2.4.0"
     },
     "peerDependencies": {
@@ -89,5 +89,5 @@
             "optional": true
         }
     },
-    "gitHead": "eeb1cc452e2b468d838ec76fd501b131b383c5c9"
+    "gitHead": "9c70b0208d6492d195ce5fdb60ded6cae1a3245c"
 }
diff --git a/yarn.lock b/yarn.lock
index 4782cd785d..711aef7202 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6989,7 +6989,7 @@ __metadata:
     "@react-three/fiber": 8.2.2
     "@react-three/test-renderer": ^9.0.0
     "@rollup/plugin-commonjs": ^22.0.1
-    framer-motion: ^11.12.0
+    framer-motion: ^11.13.0-beta.0
     react-merge-refs: ^2.0.1
     three: ^0.137.0
   peerDependencies:
@@ -7000,11 +7000,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"framer-motion@^11.12.0, framer-motion@workspace:packages/framer-motion":
+"framer-motion@^11.13.0-beta.0, framer-motion@workspace:packages/framer-motion":
   version: 0.0.0-use.local
   resolution: "framer-motion@workspace:packages/framer-motion"
   dependencies:
     "@types/three": 0.137.0
+    motion-dom: ^11.13.0-beta.0
+    motion-utils: ^11.13.0-beta.0
     three: 0.137.0
     tslib: ^2.4.0
   peerDependencies:
@@ -10525,6 +10527,12 @@ __metadata:
   languageName: node
   linkType: hard
 
+"motion-dom@^11.13.0-beta.0, motion-dom@workspace:packages/motion-dom":
+  version: 0.0.0-use.local
+  resolution: "motion-dom@workspace:packages/motion-dom"
+  languageName: unknown
+  linkType: soft
+
 "motion-one@workspace:.":
   version: 0.0.0-use.local
   resolution: "motion-one@workspace:."
@@ -10585,11 +10593,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"motion-utils@^11.13.0-beta.0, motion-utils@workspace:packages/motion-utils":
+  version: 0.0.0-use.local
+  resolution: "motion-utils@workspace:packages/motion-utils"
+  languageName: unknown
+  linkType: soft
+
 "motion@workspace:packages/motion":
   version: 0.0.0-use.local
   resolution: "motion@workspace:packages/motion"
   dependencies:
-    framer-motion: ^11.12.0
+    framer-motion: ^11.13.0-beta.0
     tslib: ^2.4.0
   peerDependencies:
     "@emotion/is-prop-valid": "*"
@@ -10715,7 +10729,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "next-env@workspace:dev/next"
   dependencies:
-    framer-motion: ^11.12.0
+    framer-motion: ^11.13.0-beta.0
     next: 14.x
     react: ^18.3.1
     react-dom: ^18.3.1
@@ -12263,7 +12277,7 @@ __metadata:
     "@typescript-eslint/parser": ^7.2.0
     "@vitejs/plugin-react-swc": ^3.5.0
     eslint-plugin-react-refresh: ^0.4.6
-    framer-motion: ^11.12.0
+    framer-motion: ^11.13.0-beta.0
     react: ^18.3.1
     react-dom: ^18.3.1
     styled-components: ^6.1.11