feat: disable background animations for users preferring reduced motion (#359)

Author: xPapla

app/routes/__root.tsx

@@ -21,6 +21,7 @@ import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { twMerge } from 'tailwind-merge'
 import { getThemeCookie, useThemeStore } from '~/components/ThemeToggle'
 import { useMounted } from '~/hooks/useMounted'
+import { usePrefersReducedMotion } from '~/utils/usePrefersReducedMotion'
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
@@ -173,8 +174,13 @@ function RootDocument({ children }: { children: React.ReactNode }) {
   const themeClass = themeCookie === 'dark' ? 'dark' : ''
 
   const canvasRef = React.useRef<HTMLCanvasElement>(null)
+  const prefersReducedMotion = usePrefersReducedMotion()
 
   React.useEffect(() => {
+    if (prefersReducedMotion !== false) {
+      return
+    }
+
     const canvas = canvasRef.current
 
     const morphDuration = 4000
@@ -317,7 +323,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         window.removeEventListener('resize', start)
       }
     }
-  }, [])
+  }, [prefersReducedMotion])
 
   const isHomePage = useRouterState({
     select: (s) => s.location.pathname === '/',

app/utils/usePrefersReducedMotion.ts

@@ -0,0 +1,27 @@
+import * as React from 'react'
+
+/**
+ * Hook that returns the user's preference for reduced motion.
+ * @returns null if the value is not yet determined or the user's preference for reduced motion.
+ */
+export const usePrefersReducedMotion = () => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = React.useState<
+    boolean | null
+  >(null)
+
+  React.useEffect(() => {
+    const mediaQueryList = window.matchMedia('(prefers-reduced-motion: reduce)')
+    setPrefersReducedMotion(mediaQueryList.matches)
+
+    const listener = (event: MediaQueryListEvent) => {
+      setPrefersReducedMotion(event.matches)
+    }
+
+    mediaQueryList.addEventListener('change', listener)
+    return () => {
+      mediaQueryList.removeEventListener('change', listener)
+    }
+  }, [])
+
+  return prefersReducedMotion
+}