diff --git a/package-lock.json b/package-lock.json
index bc4dad3c..66d58886 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "quicksnip",
       "version": "0.0.0",
       "dependencies": {
-        "framer-motion": "^11.15.0",
+        "motion": "^11.15.0",
         "prismjs": "^1.29.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -3589,6 +3589,7 @@
       "version": "11.15.0",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.15.0.tgz",
       "integrity": "sha512-MLk8IvZntxOMg7lDBLw2qgTHHv664bYoYmnFTmE0Gm/FW67aOJk0WM3ctMcG+Xhcv+vh5uyyXwxvxhSeJzSe+w==",
+      "license": "MIT",
       "dependencies": {
         "motion-dom": "^11.14.3",
         "motion-utils": "^11.14.3",
@@ -4665,15 +4666,43 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/motion": {
+      "version": "11.15.0",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.15.0.tgz",
+      "integrity": "sha512-iZ7dwADQJWGsqsSkBhNHdI2LyYWU+hA1Nhy357wCLZq1yHxGImgt3l7Yv0HT/WOskcYDq9nxdedyl4zUv7UFFw==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^11.15.0",
+        "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": "11.14.3",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
-      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA=="
+      "integrity": "sha512-lW+D2wBy5vxLJi6aCP0xyxTxlTfiu+b+zcpVbGVFUxotwThqhdpPRSmX8xztAgtZMPMeU0WGVn/k1w4I+TbPqA==",
+      "license": "MIT"
     },
     "node_modules/motion-utils": {
       "version": "11.14.3",
       "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.14.3.tgz",
-      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ=="
+      "integrity": "sha512-Xg+8xnqIJTpr0L/cidfTTBFkvRw26ZtGGuIhA94J9PQ2p4mEa06Xx7QVYZH0BP+EpMSaDlu+q0I0mmvwADPsaQ==",
+      "license": "MIT"
     },
     "node_modules/ms": {
       "version": "2.1.3",
diff --git a/package.json b/package.json
index 4148b723..ff3e622e 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "snippets:consolidate": "node ./utils/consolidateSnippets.js"
   },
   "dependencies": {
-    "framer-motion": "^11.15.0",
+    "motion": "^11.15.0",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/components/SnippetList.tsx b/src/components/SnippetList.tsx
index eb5ef79d..1b96925b 100644
--- a/src/components/SnippetList.tsx
+++ b/src/components/SnippetList.tsx
@@ -1,4 +1,4 @@
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { useState } from "react";
 
 import { useAppContext } from "@contexts/AppContext";
@@ -13,6 +13,8 @@ const SnippetList = () => {
   const { fetchedSnippets } = useSnippets();
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  const shouldReduceMotion = useReducedMotion();
+
   if (!fetchedSnippets)
     return (
       <div>
@@ -34,41 +36,49 @@ const SnippetList = () => {
     <>
       <motion.ul role="list" className="snippets">
         <AnimatePresence mode="popLayout">
-          {fetchedSnippets.map((snippet, idx) => (
-            <motion.li
-              key={idx}
-              initial={{ opacity: 0, y: 20 }}
-              animate={{
-                opacity: 1,
-                y: 0,
-                transition: {
-                  delay: idx * 0.05,
-                  duration: 0.2,
-                },
-              }}
-              exit={{
-                opacity: 0,
-                y: -20,
-                transition: {
-                  delay: (fetchedSnippets.length - 1 - idx) * 0.01,
-                  duration: 0.09,
-                },
-              }}
-            >
-              <motion.button
-                className="snippet | flow"
-                data-flow-space="sm"
-                onClick={() => handleOpenModal(snippet)}
-                whileHover={{ scale: 1.01 }}
-                whileTap={{ scale: 0.98 }}
+          {fetchedSnippets.map((snippet, idx) => {
+            const uniqueId = `${language.lang}-${snippet.title}`;
+            return (
+              <motion.li
+                key={uniqueId}
+                layoutId={uniqueId}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  transition: {
+                    delay: shouldReduceMotion ? 0 : 0.09 + idx * 0.05,
+                    duration: shouldReduceMotion ? 0 : 0.2,
+                  },
+                }}
+                exit={{
+                  opacity: 0,
+                  y: -20,
+                  transition: {
+                    delay: idx * 0.01,
+                    duration: shouldReduceMotion ? 0 : 0.09,
+                  },
+                }}
+                transition={{
+                  ease: [0, 0.75, 0.25, 1],
+                  duration: shouldReduceMotion ? 0 : 0.25,
+                }}
               >
-                <div className="snippet__preview">
-                  <img src={language.icon} alt={language.lang} />
-                </div>
-                <h3 className="snippet__title">{snippet.title}</h3>
-              </motion.button>
-            </motion.li>
-          ))}
+                <motion.button
+                  className="snippet | flow"
+                  data-flow-space="sm"
+                  onClick={() => handleOpenModal(snippet)}
+                  whileHover={{ scale: 1.01 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  <div className="snippet__preview">
+                    <img src={language.icon} alt={language.lang} />
+                  </div>
+                  <h3 className="snippet__title">{snippet.title}</h3>
+                </motion.button>
+              </motion.li>
+            );
+          })}
         </AnimatePresence>
       </motion.ul>
 
diff --git a/src/components/SnippetModal.tsx b/src/components/SnippetModal.tsx
index b5e2379e..7055e8e9 100644
--- a/src/components/SnippetModal.tsx
+++ b/src/components/SnippetModal.tsx
@@ -1,4 +1,4 @@
-import { motion } from "framer-motion";
+import { motion, useReducedMotion } from "motion/react";
 import React from "react";
 import ReactDOM from "react-dom";
 
@@ -23,6 +23,8 @@ const SnippetModal: React.FC<Props> = ({
 }) => {
   const modalRoot = document.getElementById("modal-root");
 
+  const shouldReduceMotion = useReducedMotion();
+
   useEscapeKey(handleCloseModal);
 
   if (!modalRoot) {
@@ -41,16 +43,17 @@ const SnippetModal: React.FC<Props> = ({
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      transition={{ duration: 0.2 }}
+      transition={{ duration: shouldReduceMotion ? 0 : 0.2 }}
     >
       <motion.div
         key="modal-content"
         className="modal | flow"
         data-flow-space="lg"
-        initial={{ scale: 0.8, opacity: 0, y: 20 }}
-        animate={{ scale: 1, opacity: 1, y: 0 }}
-        exit={{ scale: 0.8, opacity: 0, y: 20 }}
-        transition={{ type: "spring", duration: 0.5 }}
+        layoutId={`${language}-${snippet.title}`}
+        transition={{
+          ease: [0, 0.75, 0.25, 1],
+          duration: shouldReduceMotion ? 0 : 0.3,
+        }}
       >
         <div className="modal__header">
           <h2 className="section-title">{snippet.title}</h2>