From 4b7cc7b7615034cf37710f14b57a43511392b2f8 Mon Sep 17 00:00:00 2001
From: "Martin \"Nexii\" Pitt" <martin.r.pitt@gmail.com>
Date: Mon, 23 Dec 2024 19:18:02 +0000
Subject: [PATCH] Update main.js

Use the Web Animation API for cat rain instead

rAF loops run at 120Hz on, well, 120Hz displays, so the cats end up falling and spinning twice as fast. Now imagine how that felt like on a 240Hz display.
---
 main.js | 27 +++++++++------------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/main.js b/main.js
index 230c208..ed69d9f 100644
--- a/main.js
+++ b/main.js
@@ -113,28 +113,19 @@ function createCat() {
     cat.style.top = '-50px';
 
     document.body.appendChild(cat);
-
+    
     // Animate falling
-    let posY = -50;
     let rotation = Math.random() * 360;
     let speedY = 1 + Math.random() * 2;
     let speedRotation = -2 + Math.random() * 4;
-
-    function animate() {
-        posY += speedY;
-        rotation += speedRotation;
-        cat.style.top = posY + 'px';
-        cat.style.transform = `rotate(${rotation}deg)`;
-
-        // Remove when off screen
-        if (posY > window.innerHeight) {
-            cat.remove();
-        } else {
-            requestAnimationFrame(animate);
-        }
-    }
-
-    animate();
+    let distance = window.innerHeight;
+    
+    cat.animate([
+        { top: '-50px', rotate: `${rotation}deg` },
+        { top: `${distance}px`, rotate: `${rotation * speedRotation * 4}deg` },
+    ], {
+        duration: (distance / speedY * 8)
+    }).finished.then(() => cat.remove());
 }
 
 // Create new cats periodically