feat: migrate to motion and fix some animations

package-lock.json

@@ -25,6 +25,7 @@
         "framer-motion": "10.16.4",
         "howler": "2.2.4",
         "js-confetti": "0.12.0",
+        "motion": "12.23.12",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hotkeys-hook": "3.2.1",
@@ -20732,6 +20733,74 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.12.tgz",
+      "integrity": "sha512-8jCD8uW5GD1csOoqh1WhH1A6j5APHVE15nuBkFeRiMzYBdRwyAHmSP/oXSuW0WJPZRXTFdBoG4hY9TFWNhhwng==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.12",
+        "tslib": "^2.4.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
+    "node_modules/motion/node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "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
+        }
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",

package.json

@@ -41,6 +41,7 @@
     "framer-motion": "10.16.4",
     "howler": "2.2.4",
     "js-confetti": "0.12.0",
+    "motion": "12.23.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hotkeys-hook": "3.2.1",

src/components/buttons/unselect/unselect.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { BiUndo, BiTrash } from 'react-icons/bi/index';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { Tooltip } from '@/components/tooltip';

src/components/categories/categories.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 
 import { Category } from './category';
 import { Donate } from './donate';

src/components/modal/modal.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 import { IoClose } from 'react-icons/io5/index';
 import FocusTrap from 'focus-trap-react';
 

src/components/modals/breathing/exercise/exercise.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { padNumber } from '@/helpers/number';
 

src/components/snackbar/snackbar.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { mix, fade, slideY } from '@/lib/motion';
 

src/components/sounds/sound/favorite/favorite.tsx

@@ -1,5 +1,5 @@
 import { BiHeart, BiSolidHeart } from 'react-icons/bi/index';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 
 import { useSoundStore } from '@/stores/sound';
 import { cn } from '@/helpers/styles';

src/components/sounds/sounds.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 
 import { Sound } from './sound';
 import { useLocalStorage } from '@/hooks/use-local-storage';

src/components/toolbar/menu/menu.tsx

@@ -2,7 +2,7 @@ import { useState, useMemo, useCallback } from 'react';
 import { IoMenu, IoClose } from 'react-icons/io5/index';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { AnimatePresence, motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'motion/react';
 
 import {
   ShuffleItem,

src/components/toolbar/scroll-to-top/scroll-to-top.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { BiUpArrowAlt } from 'react-icons/bi/index';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'motion/react';
 
 import { mix, fade, slideY } from '@/lib/motion';
 
@@ -30,22 +30,20 @@ export function ScrollToTop() {
   const variants = mix(fade(), slideY(10, 0));
 
   return (
-    <AnimatePresence>
+    <motion.button
-      {isVisible ? (
+      animate={isVisible ? 'show' : 'hidden'}
-        <motion.button
+      aria-label="Scroll to top"
-          animate="show"
+      className={styles.button}
-          aria-label="Scroll to top"
+      exit="hidden"
-          className={styles.button}
+      initial="hidden"
-          exit="hidden"
+      variants={variants}
-          initial="hidden"
+      style={{
-          variants={variants}
+        pointerEvents: isVisible ? 'auto' : 'none',
-          onClick={scrollToTop}
+        visibility: isVisible ? 'visible' : 'hidden',
-        >
+      }}
-          <BiUpArrowAlt />
+      onClick={scrollToTop}
-        </motion.button>
+    >
-      ) : (
+      <BiUpArrowAlt />
-        <div />
+    </motion.button>
-      )}
-    </AnimatePresence>
   );
 }

src/components/tooltip/tooltip.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence } from 'motion/react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { slideX, slideY, mix, fade } from '@/lib/motion';

src/contexts/snackbar.tsx

@@ -5,7 +5,7 @@ import {
   useRef,
   useContext,
 } from 'react';
-import { AnimatePresence } from 'framer-motion';
+import { AnimatePresence } from 'motion/react';
 
 import { Snackbar } from '@/components/snackbar';