Probably the biggest performance changes.

steps/index.html

@@ -160,12 +160,12 @@
         FULLSCREEN
         <span
           class="text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded">
-          (F11)
+          <br>(F11)
         </span>
       </button>
       <button id="explorer-btn" type="button"
         class="bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 shadow-sm hover:bg-gray-200 dark:hover:bg-gray-600 active:scale-95 active:shadow-inner font-medium rounded-lg text-xs px-4 py-2 transition-all">
-        Data-Explorer<br>(MATLAB-style)
+        Data-Explorer<br>(MATLAB)
         <span
           class="text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded">
           (i)

steps/src/dom.js

@@ -155,14 +155,14 @@ export function updateFrame(frame, forceVideoSeek) {
     updatePersistentOverlays(timeForUpdates);
   }
   // --- End of fix ---
-
-  if (appState.p5_instance) appState.p5_instance.redraw(); // Redraw radar sketch
+  // --- START: Conditional Redraw Logic ---
+  // Only force a redraw from here if the animation loop is NOT running.
+  // When playing, the animationLoop is responsible for redrawing.
+  if (!appState.isPlaying && appState.p5_instance) appState.p5_instance.redraw();
+  if (!appState.isPlaying && appState.speedGraphInstance) appState.speedGraphInstance.redraw();
   // --- NEW: Centralized Explorer Update ---
   throttledUpdateExplorer();
   // --- END: Centralized Explorer Update ---
-  if (appState.speedGraphInstance && !appState.isPlaying)
-    // Redraw speed graph if not playing.
-  appState.speedGraphInstance.redraw();
   const endTime = performance.now();
   appState.lastFrameRenderTime = endTime - startTime; // <-- End timer and update state
 
@@ -358,12 +358,15 @@ export function updatePersistentOverlays(currentMediaTime) {
     const targetRadarTimeMs = currentRadarFrame.timestampMs;
     const offsetMs = parseFloat(offsetInput.value) || 0;
     const driftMs = currentMediaTime * 1000 + offsetMs - targetRadarTimeMs;
-    const driftColor = Math.abs(driftMs) > 50 ? "#FF6347" : "#98FB98"; // Tomato red or Pale green
-    const colorMode = getCurrentColorMode();     
+    const driftColor = Math.abs(driftMs) > 50 ? "#FF6347" : "#98FB98"; // Tomato or Pale Green
+    const colorMode = getCurrentColorMode();
+    const fps = appState.fps;
+    const fpsColor = fps >= 58 && fps <= 62 ? "#98FB98" : "#FF6347"; // Pale Green or Tomato
 
     radarInfoOverlay.innerHTML = `
             Frame: ${appState.currentFrame + 1}
             Motion State: ${motionState}
+            | FPS: <b style="color: ${fpsColor};">${fps.toFixed(1)}</b>
             | Abs Time: ${formatUTCTime(absRadarTime)}
             | Color Mode: <b>${colorMode}</b>
             | Drift: <b style="color: ${driftColor};">${driftMs.toFixed(

steps/src/drawUtils.js

@@ -414,8 +414,7 @@ export function drawTrajectories(p, plotScales) {
       // --- END: New Dynamic Coloring Logic ---
     }
 
-    p.drawingContext.setLineDash([]);
-    p.pop();
+    p.pop(); // This was the missing pop call for each trajectory loop
   }
 }
 

steps/src/p5/radarSketch.js

@@ -45,6 +45,10 @@ export const radarSketch = function (p) {
   let isFirstFrame = true; // Flag to initialize smoothed position
   // --- END: Mouse Smoothing Variables ---
 
+  // --- START: FPS Calculation Variables ---
+  let lastFrameTime = 0;
+  // --- END: FPS Calculation Variables ---
+
   // Helper function to allow other sketches to access the static background
   p.getStaticBackground = function () {
     return staticBackgroundBuffer;
@@ -120,6 +124,21 @@ export const radarSketch = function (p) {
   };
 
   p.draw = function () {
+    // --- START: FPS Calculation & Display ---
+    const currentTime = p.millis();
+    if (lastFrameTime > 0) {
+      const delta = currentTime - lastFrameTime;
+      if (delta > 0) {
+        const currentFps = 1000 / delta;
+        // Use exponential moving average for smoothing
+        const smoothingFactor = 0.95;
+        appState.fps =
+          appState.fps * smoothingFactor + currentFps * (1 - smoothingFactor);
+      }
+    }
+    lastFrameTime = currentTime;
+    // --- END: FPS Calculation & Display ---
+
     // Set background color based on current theme (dark/light)
     p.background(
       document.documentElement.classList.contains("dark")

steps/src/state.js

@@ -2,6 +2,7 @@ export const appState = {
   zoomHideDelayTimeout: null, // Timeout before the hide countdown begins
   zoomCountdown: null, // Holds the number of seconds left before zoom hides
   zoomCountdownInterval: null, // The interval timer for the countdown
+  fps: 0, // To store the calculated FPS for performance monitoring
   isRawOnlyMode: false, // <-- ADD THIS LINE
 
   // Stores the parsed visualization data (radar frames, tracks, etc.)

steps/src/sync.js

@@ -71,8 +71,11 @@ export function animationLoop() {
   updatePersistentOverlays(currentMediaTime);
   updateDebugOverlay(currentMediaTime); 
 
-  // Redraw the speed graph if an instance exists
+  // --- START: Centralized Redraw Logic ---
+  // Explicitly redraw all active sketches in sync with the animation frame.
+  if (appState.p5_instance) appState.p5_instance.redraw();
   if (appState.speedGraphInstance) appState.speedGraphInstance.redraw();
+  // --- END: Centralized Redraw Logic ---
 
   // Request the next frame
   requestAnimationFrame(animationLoop);