From 969aff1e25c26b0ea7827a0857b416dfe02cef66 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 19 Feb 2026 21:35:22 +0200
Subject: [PATCH] feat: respect prefers-reduced-motion for Framer Motion
 animations

---
 src/App.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1487820..d6b525b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,7 @@ import { invoke } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
-import { motion, AnimatePresence } from "framer-motion";
+import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
 import TaskLists from "markdown-it-task-lists";
 import sup from "markdown-it-sup";
 import sub from "markdown-it-sub";
@@ -39,7 +39,6 @@ const md: MarkdownIt = new MarkdownIt({
 }).use(TaskLists).use(sup).use(sub).use(mark);
 
 const materialEase = [0.4, 0, 0.2, 1] as const;
-const smoothTransition = { duration: 0.2, ease: materialEase };
 
 // Saved selection range — set in mousedown (before browser clears it), read in contextmenu handler
 let _savedSelectionRange: Range | null = null;
@@ -361,6 +360,11 @@ function App() {
   const shortcutsModalRef = useRef<HTMLDivElement>(null);
   const aboutModalRef = useRef<HTMLDivElement>(null);
 
+  const prefersReducedMotion = useReducedMotion();
+  const smoothTransition = prefersReducedMotion
+    ? { duration: 0 }
+    : { duration: 0.2, ease: materialEase };
+
   useFocusTrap(showShortcutsModal, shortcutsModalRef);
   useFocusTrap(showAboutModal, aboutModalRef);
 
@@ -1052,7 +1056,7 @@ function App() {
         {isDraggingOver && (
           <motion.div className="drop-zone" role="region" aria-label="Drop zone for markdown files" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.15, ease: materialEase }}>
             <motion.div className="drop-zone-content" initial={{ opacity: 0, scale: 0.92, y: 8 }} animate={{ opacity: 1, scale: 1, y: 0 }} exit={{ opacity: 0, scale: 0.92, y: 8 }} transition={{ duration: 0.2, ease: materialEase }}>
-              <motion.div className="drop-zone-icon-wrapper" animate={{ y: [0, -6, 0] }} transition={{ duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}>
+              <motion.div className="drop-zone-icon-wrapper" animate={prefersReducedMotion ? {} : { y: [0, -6, 0] }} transition={prefersReducedMotion ? { duration: 0 } : { duration: 1.5, repeat: Infinity, ease: 'easeInOut' }}>
                 <FileDown size={40} strokeWidth={1.5} />
               </motion.div>
               <div className="drop-zone-text">Drop markdown file here</div>
@@ -1208,7 +1212,7 @@ function App() {
                   <article className="markdown-content" style={{ maxWidth: contentWidth }} dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
                 ) : (
                   <motion.div className="welcome-screen" initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} transition={smoothTransition}>
-                    <motion.div className="welcome-icon" animate={{ y: [0, -5, 0] }} transition={{ duration: 2, repeat: Infinity }}><FolderOpen size={64} /></motion.div>
+                    <motion.div className="welcome-icon" animate={prefersReducedMotion ? {} : { y: [0, -5, 0] }} transition={prefersReducedMotion ? { duration: 0 } : { duration: 2, repeat: Infinity }}><FolderOpen size={64} /></motion.div>
                     <h1 className="welcome-title">Vesper</h1>
                     <p className="welcome-subtitle">A beautiful markdown reader</p>
                     <button className="welcome-button" onClick={handleOpenDialog}>Open File (Ctrl+O)</button>