Update templates/index.html

templates/index.html

@@ -34,6 +34,23 @@
     let startingDebt = 0;
     let ratePerSecond = 0;
     let startTime = Date.now();
+    let currentDisplayDebt = 0;
+
+    function animateDebt() {
+      const now = Date.now();
+      const elapsed = (now - startTime) / 1000;
+      const targetDebt = startingDebt + (ratePerSecond * elapsed);
+
+      // Easing toward target
+      currentDisplayDebt += (targetDebt - currentDisplayDebt) * 0.05;
+
+      document.getElementById('debt').textContent = '$' + currentDisplayDebt.toLocaleString(undefined, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      });
+
+      requestAnimationFrame(animateDebt);
+    }
 
     fetch('/api/debt')
       .then(res => res.json())
@@ -41,22 +58,13 @@
         startingDebt = data.startingDebt;
         ratePerSecond = data.ratePerSecond;
         startTime = Date.now();
-        updateDebtDisplay();
-        setInterval(updateDebtDisplay, 100);
+        currentDisplayDebt = startingDebt;
+        animateDebt();
       })
       .catch(err => {
         document.getElementById('debt').textContent = 'Error loading data';
         console.error(err);
       });
-
-    function updateDebtDisplay() {
-      let elapsed = (Date.now() - startTime) / 1000;
-      let currentDebt = startingDebt + (ratePerSecond * elapsed);
-      document.getElementById('debt').textContent = '$' + currentDebt.toLocaleString(undefined, {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2
-      });
-    }
   </script>
 </body>
 </html>