From 4dd826a75f6ebc9ca6c35e0a95ee39a7351749a0 Mon Sep 17 00:00:00 2001
From: prince-pokharna <prince187p0kharna@gmail.com>
Date: Tue, 16 Jun 2026 17:35:10 +0530
Subject: [PATCH] feat(ally) : add prefers-reduced-motion support

---
 src/app/globals.css                      | 17 ++++++++
 src/app/layout.tsx                       | 51 +++++++++++++-----------
 src/components/layout/PageTransition.tsx | 15 ++++---
 src/hooks/useReducedMotion.ts            | 40 +++++++++++++++++++
 src/utils/motionPreferences.ts           |  0
 5 files changed, 94 insertions(+), 29 deletions(-)
 create mode 100644 src/hooks/useReducedMotion.ts
 create mode 100644 src/utils/motionPreferences.ts

diff --git a/src/app/globals.css b/src/app/globals.css
index 4194d31d..786b838d 100644
--- a/src/app/globals.css
+++ b/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;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e9a8aeee..2593bfc8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,6 +15,7 @@ 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 @@ export default function RootLayout({
         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>
   );
diff --git a/src/components/layout/PageTransition.tsx b/src/components/layout/PageTransition.tsx
index 1dc80531..cbdf6065 100644
--- a/src/components/layout/PageTransition.tsx
+++ b/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>
diff --git a/src/hooks/useReducedMotion.ts b/src/hooks/useReducedMotion.ts
new file mode 100644
index 00000000..1d16794e
--- /dev/null
+++ b/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;
+}
diff --git a/src/utils/motionPreferences.ts b/src/utils/motionPreferences.ts
new file mode 100644
index 00000000..e69de29b