src/lib/components/BackgroundBlobs.svelte

@@ -5,9 +5,17 @@
   }
 
   let { accentColor, breakColor }: Props = $props();
+
+  let reducedMotion = $state(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
+  $effect(() => {
+    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handler = (e: MediaQueryListEvent) => { reducedMotion = e.matches; };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  });
 </script>
 
-<div class="pointer-events-none absolute inset-0 overflow-hidden">
+<div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
   <!-- Gradient blobs -->
   <div
     class="blob blob-1"
@@ -30,13 +38,15 @@
   <svg class="absolute inset-0 h-full w-full" style="opacity: 0.08; mix-blend-mode: overlay;">
     <filter id="grain-filter">
       <feTurbulence type="fractalNoise" baseFrequency="0.45" numOctaves="3" stitchTiles="stitch">
-        <animate
-          attributeName="seed"
-          from="0"
-          to="100"
-          dur="2s"
-          repeatCount="indefinite"
-        />
+        {#if !reducedMotion}
+          <animate
+            attributeName="seed"
+            from="0"
+            to="100"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        {/if}
       </feTurbulence>
     </filter>
     <rect width="100%" height="100%" filter="url(#grain-filter)" />