Throttle render loop to 30fps for improved performance in garden animation. Updated frame handling in createGarden function to reduce CPU/GPU load while maintaining smooth visuals.

frontend/garden.js

@@ -31,6 +31,10 @@ const WET_RATE = 0.5; // growth-stages per second while damp
 const DRY_RATE = 0.1; // growth-stages per second while dry
 const WATER_BUMP = 0.18; // instant nudge each time you water
 
+// cap the render loop at 30fps — the garden animates gently, so there's no need
+// to redraw at the display's full 60/120Hz (keeps it light on the CPU/GPU).
+const FRAME_MS = 1000 / 30;
+
 // A cohesive, sunny GBC-ish palette.
 const P = {
   sky0: "#7ec8ff",
@@ -666,11 +670,12 @@ export function createGarden(root) {
   // --- loop ------------------------------------------------------------------
   function frame(now) {
     if (!running) return;
-    const dt = Math.min(0.05, (now - last) / 1000 || 0);
+    raf = requestAnimationFrame(frame);
+    if (now - last < FRAME_MS - 1) return; // throttle to ~30fps
+    const dt = Math.min(0.05, last ? (now - last) / 1000 : 0);
     last = now;
     update(dt);
     render();
-    raf = requestAnimationFrame(frame);
   }
 
   // --- input wiring ----------------------------------------------------------
@@ -771,13 +776,10 @@ export function createGarden(root) {
     start() {
       if (running) return;
       running = true;
-      last = 0;
+      last = 0; // 0 → the first frame renders immediately, then the gate kicks in
       updateCaption();
       window.addEventListener("keydown", onKey, true);
-      raf = requestAnimationFrame((now) => {
-        last = now;
-        frame(now);
-      });
+      raf = requestAnimationFrame(frame);
     },
     stop() {
       running = false;