Enable landing page animation on touch devices

Author: callumalpass

DESIGN.md

@@ -59,9 +59,8 @@ mobile text region begins.
 
 Only the homepage particle field moves. Its transformations explain the current
 chapter. Reduced-motion preferences place the particles directly into each
-formation. Coarse-pointer screens up to 820px use the same static formations to
-reduce battery use during the mobile reading journey. Interior pages do not use
-decorative animation.
+formation. The particle field otherwise animates on both pointer and touch
+screens. Interior pages do not use decorative animation.
 
 ## Language
 

public/mdbase-murmuration.js

@@ -3,9 +3,7 @@
       const canvas = document.querySelector("#diagram");
       const context = canvas.getContext("2d", { alpha: true });
       const chapters = [...document.querySelectorAll(".chapter")];
-      const reduceMotion =
-        matchMedia("(prefers-reduced-motion: reduce)").matches
-        || matchMedia("(max-width: 820px) and (pointer: coarse)").matches;
+      const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
       const particleCount = 361;
       const cellSize = 104;
       const particles = [];

scripts/sync-sources.mjs

@@ -402,22 +402,11 @@ function addThemeAwareCanvasPalette(source) {
 
       function draw(now)`
   );
-  const motionPreference =
-    '      const reduceMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;';
-  if (!withParticles.includes(motionPreference)) {
-    throw new Error("Could not find the prototype motion preference");
-  }
-  const withMobileMotion = withParticles.replace(
-    motionPreference,
-    `      const reduceMotion =
-        matchMedia("(prefers-reduced-motion: reduce)").matches
-        || matchMedia("(max-width: 820px) and (pointer: coarse)").matches;`
-  );
   const initialization = "      resize();\n      updateScrollState();";
-  if (!withMobileMotion.includes(initialization)) {
+  if (!withParticles.includes(initialization)) {
     throw new Error("Could not find the prototype initialization");
   }
-  const withInitialization = withMobileMotion.replace(
+  const withInitialization = withParticles.replace(
     initialization,
     "      syncPalette();\n      resize();\n      updateScrollState();"
   );