From e09c5fabbd0d36fb32fe87f90d1dd5660e645389 Mon Sep 17 00:00:00 2001
From: Federico Bucchi <b.federico@gmail.com>
Date: Wed, 28 May 2025 17:02:29 -0700
Subject: [PATCH 1/2] Handle reduce motion

---
 assets/javascripts/new-javascripts/hero.js | 39 ++++++++++++++++++----
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/assets/javascripts/new-javascripts/hero.js b/assets/javascripts/new-javascripts/hero.js
index 22dd10894..652459ea5 100644
--- a/assets/javascripts/new-javascripts/hero.js
+++ b/assets/javascripts/new-javascripts/hero.js
@@ -1,5 +1,5 @@
 const heroAnimation = async () => {
-  const reduceMotion = document.body.classList.contains('reduced-motion')
+  const isReduceMotionEnabled = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   const urlParams = new URLSearchParams(location.search)
   const hasDebugParam = urlParams.has('debug')
 
@@ -135,11 +135,11 @@ const heroAnimation = async () => {
     logo.image = logoImage
     // init canvas for each swoop layer
     heroSwoops.forEach((swoop, i) => {
-      swoop.image = swoopImages[i]
-      const canvasData = initSwoops(swoop)
-      swoop.ctx = canvasData.ctx
-      swoop.pathInstance = canvasData.pathInstance
-    })
+      swoop.image = swoopImages[i];
+      const canvasData = initSwoops(swoop);
+      swoop.ctx = canvasData.ctx;
+      swoop.pathInstance = canvasData.pathInstance;
+    });
     // init logo canvas
     logo.ctx = initLogo(logo)
   } catch (error) {
@@ -147,6 +147,33 @@ const heroAnimation = async () => {
     throw error
   }
 
+  if (isReduceMotionEnabled) {
+    // Render final state immediately
+    heroSwoops.forEach((swoop) => {
+      const { ctx, pathInstance, image, canvas } = swoop;
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.lineDashOffset = 0;
+      ctx.stroke(pathInstance);
+      ctx.globalCompositeOperation = 'source-in';
+      ctx.drawImage(image, 0, 0);
+      ctx.globalCompositeOperation = 'source-over';
+    });
+
+    const {
+      ctx,
+      image,
+      canvas,
+      positionStart: [startX, startY],
+      positionEnd: [endX, endY],
+    } = logo;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.globalAlpha = 1;
+    const deltaX = endX - startX;
+    const deltaY = endY - startY;
+    ctx.drawImage(image, deltaX, deltaY);
+    return;
+  }
+
   const DURATION = 1000
 
   const tl = anime.createTimeline({

From b8a044c5b470a4c219d6409d79c38eda52f51c61 Mon Sep 17 00:00:00 2001
From: Federico Bucchi <b.federico@gmail.com>
Date: Thu, 29 May 2025 10:49:06 -0700
Subject: [PATCH 2/2] simplify disable motion

---
 assets/javascripts/new-javascripts/hero.js | 51 +++++++++-------------
 1 file changed, 20 insertions(+), 31 deletions(-)

diff --git a/assets/javascripts/new-javascripts/hero.js b/assets/javascripts/new-javascripts/hero.js
index 652459ea5..913a35b50 100644
--- a/assets/javascripts/new-javascripts/hero.js
+++ b/assets/javascripts/new-javascripts/hero.js
@@ -103,23 +103,35 @@ const heroAnimation = async () => {
     // Convert SVG path pulled from AE masks
     let pathInstance = new Path2D(path)
 
-    ctx.setLineDash([pathLength])
-    ctx.lineDashOffset = pathLength
+    if (!isReduceMotionEnabled) {
+      ctx.setLineDash([pathLength])
+      ctx.lineDashOffset = pathLength
 
-    if (hasDebugParam) {
-      ctx.strokeStyle = debugColor
-      ctx.stroke(pathInstance)
+      if (hasDebugParam) {
+        ctx.strokeStyle = debugColor
+        ctx.stroke(pathInstance)
+      }
+    } else {
+      ctx.drawImage(image, 0, 0)
     }
+
     return { ctx, pathInstance }
   }
 
-  const initLogo = ({ canvas, image, positionStart: [posX, posY] }) => {
+  const initLogo = ({ canvas, image, positionStart: [posX, posY], positionEnd: [endX, endY] }) => {
     const ctx = canvas.getContext('2d')
-    ctx.globalAlpha = 0
     // Same reason for conversion as initSwoops
     ctx.translate(posX - image.naturalWidth / 2, posY - image.naturalHeight / 2)
 
-    ctx.drawImage(image, 0, 0)
+    if (!isReduceMotionEnabled) {
+      ctx.globalAlpha = 0
+      ctx.drawImage(image, 0, 0)
+    } else {
+      ctx.globalAlpha = 1
+      const deltaX = endX - posX;
+      const deltaY = endY - posY;
+      ctx.drawImage(image, deltaX, deltaY);
+    }
 
     return ctx
   }
@@ -148,29 +160,6 @@ const heroAnimation = async () => {
   }
 
   if (isReduceMotionEnabled) {
-    // Render final state immediately
-    heroSwoops.forEach((swoop) => {
-      const { ctx, pathInstance, image, canvas } = swoop;
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.lineDashOffset = 0;
-      ctx.stroke(pathInstance);
-      ctx.globalCompositeOperation = 'source-in';
-      ctx.drawImage(image, 0, 0);
-      ctx.globalCompositeOperation = 'source-over';
-    });
-
-    const {
-      ctx,
-      image,
-      canvas,
-      positionStart: [startX, startY],
-      positionEnd: [endX, endY],
-    } = logo;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.globalAlpha = 1;
-    const deltaX = endX - startX;
-    const deltaY = endY - startY;
-    ctx.drawImage(image, deltaX, deltaY);
     return;
   }