Migrate from framer-motion to motion/react

package.json

@@ -53,7 +53,6 @@
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
 		"croner": "^10.0.1",
-		"framer-motion": "^12.43.0",
 		"hash-wasm": "^4.12.0",
 		"ioredis": "^5.11.1",
 		"jpeg-js": "^0.4.4",
@@ -62,6 +61,7 @@
 		"lenis": "^1.3.25",
 		"lucide-react": "^1.27.0",
 		"lzma": "^2.3.2",
+		"motion": "^12.43.0",
 		"music-metadata": "^11.14.0",
 		"mysql2": "^3.23.2",
 		"next": "^16.2.12",

pnpm-lock.yaml

@@ -62,9 +62,6 @@ importers:
       croner:
         specifier: ^10.0.1
         version: 10.0.1
-      framer-motion:
-        specifier: ^12.43.0
-        version: 12.43.0([email protected]([email protected]))([email protected])
       hash-wasm:
         specifier: ^4.12.0
         version: 4.12.0
@@ -89,6 +86,9 @@ importers:
       lzma:
         specifier: ^2.3.2
         version: 2.3.2
+      motion:
+        specifier: ^12.43.0
+        version: 12.43.0([email protected]([email protected]))([email protected])
       music-metadata:
         specifier: ^11.14.0
         version: 11.14.0
@@ -4423,6 +4423,20 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-BQgQbSa9Hn3/mtbib0MK53y6JSANa+YKUKlaYnWzAVDH424RYQ5LVpV3pNiWH00BA2z4ojsSdMzqT7g2FQwjuQ==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -9565,6 +9579,14 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]([email protected]([email protected]))([email protected]):
+    dependencies:
+      framer-motion: 12.43.0([email protected]([email protected]))([email protected])
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.8
+      react-dom: 19.2.8([email protected])
+
   [email protected]: {}
 
   [email protected]: {}

src/components/admin/confirm-dialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Button } from "@/components/ui/button";

src/components/animated-counter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion, useInView } from "framer-motion";
+import { motion, useInView } from "motion/react";
 import { useEffect, useRef, useState } from "react";
 
 export function AnimatedCounter({

src/components/cms-info-popup.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
 
 const cmsDetails = [

src/components/mobile-nav.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import { type ReactNode, useRef, useState } from "react";
 import { FALLBACK_HOTEL_NAME } from "@/lib/brand";

src/components/motion-page-wrapper.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { usePathname } from "next/navigation";
 import type { ReactNode } from "react";
 import { pageTransition } from "@/lib/motion";

src/components/motion-reveal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import type { ReactNode } from "react";
 
 interface RevealProps {

src/components/nav-dropdown.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import { type ReactNode, useEffect, useRef, useState } from "react";
 import { dropdownVariants } from "@/lib/motion";

src/components/public/photo-lightbox.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useState } from "react";
 
 /**

src/components/public/radio-player.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useEventSource } from "@/lib/use-event-source";
 

src/components/typewriter-text.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { useEffect, useState } from "react";
 
 export function TypewriterText({

src/lib/motion.ts

@@ -1,4 +1,4 @@
-import type { Variants } from "framer-motion";
+import type { Variants } from "motion/react";
 
 export const pageTransition: Variants = {
 	initial: { opacity: 0, y: 8 },