added support for reduced motion

Author: Yugveer06

src/components/SnippetList.tsx

@@ -1,4 +1,4 @@
-import { motion, AnimatePresence } from "motion/react";
+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>
@@ -38,27 +40,27 @@ const SnippetList = () => {
             return (
               <motion.li
                 key={currentSnippet.title + idx}
-                initial={{ opacity: 0, y: 20 }}
                 layoutId={currentSnippet.title + (idx + 1).toString()}
+                initial={{ opacity: 0, y: 20 }}
                 animate={{
                   opacity: 1,
                   y: 0,
                   transition: {
-                    delay: 0.09 + idx * 0.05,
-                    duration: 0.2,
+                    delay: shouldReduceMotion ? 0 : 0.09 + idx * 0.05,
+                    duration: shouldReduceMotion ? 0 : 0.2,
                   },
                 }}
                 exit={{
                   opacity: 0,
                   y: -20,
                   transition: {
                     delay: idx * 0.01,
-                    duration: 0.09,
+                    duration: shouldReduceMotion ? 0 : 0.09,
                   },
                 }}
                 transition={{
                   type: "spring",
-                  duration: 0.5,
+                  duration: shouldReduceMotion ? 0 : 0.5,
                 }}
               >
                 <motion.button

src/components/SnippetModal.tsx

@@ -1,4 +1,4 @@
-import { motion } from "motion/react";
+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,14 +43,14 @@ 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"
         layoutId={snippet.title + snippet.idx?.toString()}
-        transition={{ type: "spring", duration: 0.5 }}
+        transition={{ type: "spring", duration: shouldReduceMotion ? 0 : 0.5 }}
       >
         <div className="modal__header">
           <h2 className="section-title">{snippet.title}</h2>