feat(ally) : add prefers-reduced-motion support

src/app/globals.css

@@ -349,3 +349,20 @@ a {
 .markdown-body [width] {
   width: auto;
 }
+
+/*
+   ACCESSIBILITY: Respect prefers-reduced-motion OS preference
+   WCAG 2.3.3 — Animation from Interactions
+   This is a CSS-level safety net that works even before JS loads,
+   catching Tailwind animate classes and any CSS transitions.
+   */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

src/app/layout.tsx

@@ -6,15 +6,16 @@
 import { GamificationProvider } from '@/context/GamificationContext';
 import { RealTimeProvider } from '@/context/RealTimeContext';
 import { AnimatedBackground } from '@/components/AnimatedBackground';
 import BackgroundMesh from '@/components/layout/BackgroundMesh';
 import { ThemeProvider } from '@/components/providers/theme-provider';
 import { NotificationProvider } from '@/context/NotificationContext';
 import { SyncErrorListener } from '@/components/providers/sync-error-listener';
 import RouteAwareChrome from '@/components/layout/RouteAwareChrome';
 import 'github-markdown-css/github-markdown.css';
 import PageTrackerInit from '@/components/PageTrackerInit';
 import './globals.css';
 import '@/styles/resume-print.css';
+import { MotionConfig } from 'framer-motion';
 
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
 const spaceGrotesk = Space_Grotesk({
@@ -123,30 +124,32 @@
         className={`${inter.variable} ${spaceGrotesk.variable} ${barlowCondensed.variable}`}
         suppressHydrationWarning
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="dark"
-          enableSystem={false}
-          disableTransitionOnChange
-        >
-          <NotificationProvider>
-            <SyncErrorListener>
-              <script
-                type="application/ld+json"
-                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-              />
-              <AuthProvider>
-                <GamificationProvider>
-                  <RealTimeProvider>
-                    <AnimatedBackground />
-                    {/* <BackgroundMesh /> */}
-                    <RouteAwareChrome>{children}</RouteAwareChrome>
-                  </RealTimeProvider>
-                </GamificationProvider>
-              </AuthProvider>
-            </SyncErrorListener>
-          </NotificationProvider>
-        </ThemeProvider>
+        <MotionConfig reducedMotion="user">
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            enableSystem={false}
+            disableTransitionOnChange
+          >
+            <NotificationProvider>
+              <SyncErrorListener>
+                <script
+                  type="application/ld+json"
+                  dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+                />
+                <AuthProvider>
+                  <GamificationProvider>
+                    <RealTimeProvider>
+                      <AnimatedBackground />
+                      {/* <BackgroundMesh /> */}
+                      <RouteAwareChrome>{children}</RouteAwareChrome>
+                    </RealTimeProvider>
+                  </GamificationProvider>
+                </AuthProvider>
+              </SyncErrorListener>
+            </NotificationProvider>
+          </ThemeProvider>
+        </MotionConfig>
       </body>
     </html>
   );

src/components/layout/PageTransition.tsx

@@ -1,15 +1,20 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
 import { ReactNode } from 'react';
 
 export default function PageTransition({ children }: { children: ReactNode }) {
+  const shouldReduceMotion = useReducedMotion();
+
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: 20 }}
-      transition={{ duration: 0.5, ease: 'easeInOut' }}
+      initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
+      animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+      exit={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, y: 20 }}
+      transition={{
+        duration: shouldReduceMotion ? 0.2 : 0.5,
+        ease: 'easeInOut',
+      }}
     >
       {children}
     </motion.div>

src/hooks/useReducedMotion.ts

@@ -0,0 +1,40 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * React hook that reactively tracks the user's `prefers-reduced-motion`
+ * OS setting. Updates in real-time if the user changes their OS preference
+ * while the page is open.
+ *
+ * @returns boolean — true if user prefers reduced motion
+ *
+ * Usage:
+ *   const shouldReduceMotion = useReducedMotion();
+ */
+export function useReducedMotion(): boolean {
+  const [reducedMotion, setReducedMotion] = useState<boolean>(() => {
+    // SSR-safe: default to false on server
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    const handleChange = (event: MediaQueryListEvent) => {
+      setReducedMotion(event.matches);
+    };
+
+    // Modern API
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
+  return reducedMotion;
+}