reduced motion shenanigans

Author: cakePhone

_includes/footer.liquid

@@ -40,7 +40,7 @@
     function animateCookie(timestamp, cookie, data) {
         // make a physics based animation
         const deltaTime = timestamp - data.startTime;
-        const gravity = 1; // Gravity effect
+        const gravity = 0.7; // Gravity effect
 
         data.velocity = {
             x: data.velocity.x * 0.99, // Simulate air resistance

_includes/post_layout.liquid

@@ -17,6 +17,8 @@
     </div>
 </body>
 <script>
-    document.getElementsByClassName('title-fade-out')[0].classList.add('gone');
+    setTimeout(() => {
+        document.getElementsByClassName('title-fade-out')[0].classList.add('gone');
+    }, 2000);
 </script>
 </html>

assets/css/global.css

@@ -154,3 +154,14 @@ a {
         font-size: 14pt;
     }
 }
+
+@media (prefers-reduced-motion: reduce) {
+    * {
+        animation: none !important;
+        transition: none !important;
+    }
+
+    body {
+        scroll-behavior: auto;
+    }
+}

assets/css/post.css

@@ -62,6 +62,17 @@
     }
 }
 
+@media (prefers-reduced-motion: reduce) {
+    .title-fade-out {
+        animation: none !important;
+        display: none !important;
+        visibility: hidden !important;
+        opacity: 0 !important;
+        pointer-events: none !important;
+        backdrop-filter: none !important;
+    }
+}
+
 .post-content {
     font-family: var(--ff-content);
     text-align: justify;

assets/js/bubble.js

@@ -143,6 +143,18 @@ function bubbleLifeLoop(currentTimestamp, bubbles) {
 
 document.addEventListener('DOMContentLoaded', () => {
     const bubblesElements = document.getElementsByClassName('bubble');
+
+    if (window.matchMedia(`(prefers-reduced-motion: reduce)`)) {
+        const angle_offset = Math.random() * TWO_PI;
+        // assign triangle position and return
+        for (let i = 0; i < bubblesElements.length; i++) {
+            const bubble = bubblesElements[i];
+            position = polarToCartesian({ magnitude: 50, angle: TWO_PI * i / 3 + angle_offset });
+            bubble.style.transform = `translate(${position.x}%, ${position.y}%)`;
+        }
+        return;
+    }
+
     const bubbleCount = bubblesElements.length;
 
     const data = new Array(bubbleCount).fill(null).map(() => ({
@@ -163,6 +175,7 @@ document.addEventListener('DOMContentLoaded', () => {
         };
     };
 
+
     // Start the animation loop
     requestAnimationFrame((timestamp) => {
         bubbleLifeLoop(timestamp, data);