Prevent eye movement if motion isn't preferred

Author: GRA0007

components/Eyes/Eyes.module.scss

@@ -63,6 +63,10 @@
     background: var(--surface);
     animation: blink 30s linear infinite var(--blink-delay);
     border-radius: inherit;
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
   }
 
   &::after {

components/Eyes/Eyes.tsx

@@ -29,11 +29,13 @@ const Eyes = () => {
   }, [])
 
   useEffect(() => {
-    document.body.addEventListener('pointermove', handleMouseMove)
-    document.body.addEventListener('focusin', handleFocusChange)
-    return () => {
-      document.body.removeEventListener('pointermove', handleMouseMove)
-      document.body.removeEventListener('focusin', handleFocusChange)
+    if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      document.body.addEventListener('pointermove', handleMouseMove)
+      document.body.addEventListener('focusin', handleFocusChange)
+      return () => {
+        document.body.removeEventListener('pointermove', handleMouseMove)
+        document.body.removeEventListener('focusin', handleFocusChange)
+      }
     }
   }, [])