From a37b3b8f23ce47b70d83582d0f13a40474ad7ec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Gueraud?= <exadeci@gmail.com>
Date: Sat, 7 Feb 2026 17:18:05 +1100
Subject: [PATCH 1/2] app: add overlay mode

---
 src/components/Renderer.svelte     | 636 ++++++++++++++++++++++++++---
 src/components/Renderer/2d.ts      |  51 +++
 src/components/Renderer/overlay.ts | 122 ++++++
 src/components/VideoOverlay.svelte | 208 ++++++++++
 src/components/View.svelte         |   1 +
 5 files changed, 960 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Renderer/overlay.ts
 create mode 100644 src/components/VideoOverlay.svelte

diff --git a/src/components/Renderer.svelte b/src/components/Renderer.svelte
index 8c3113e..8417456 100644
--- a/src/components/Renderer.svelte
+++ b/src/components/Renderer.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { demoFile, demoRow } from '../lib/parse/float-control';
+  import { RowKey } from '../lib/parse/types';
+  import type { RowWithIndex } from '../lib/parse/types';
+  import { parse, supportedMimeTypeString } from '../lib/parse';
   import Picker from './Picker.svelte';
   import Button from './Button.svelte';
   import Input from './Input.svelte';
+  import VideoOverlay from './VideoOverlay.svelte';
   import { SvgImage } from './Renderer/svg';
   import rollSvg from '../assets/roll.svg?raw';
   import pitchSvg from '../assets/pitch.svg?raw';
@@ -16,7 +20,17 @@
     type Renderer,
   } from './Renderer/types';
   import { createRenderer } from './Renderer/render';
+  import { drawVideoOverlayHud } from './Renderer/2d';
+  import WebMWriter from '../lib/webm-writer2.js';
   import Pill from './Pill.svelte';
+  import {
+    OVERLAY_FIELD_DEFS,
+    DEFAULT_OVERLAY_FIELDS,
+    DEFAULT_OVERLAY_POSITION,
+    getDefaultItemPositions,
+    type OverlayPosition,
+    type FieldPositions,
+  } from './Renderer/overlay';
 
   const defaultFps = 20;
   const defaultWidth = 1080;
@@ -60,6 +74,81 @@
   // state
   let isRendering = $state(false);
 
+  // mode: render (board animation) vs overlay (stats on video)
+  let renderMode = new SavedState<'render' | 'overlay'>('renderMode', 'render');
+
+  // output folder (persisted to IndexedDB so it survives reload)
+  const OUTPUT_HANDLE_DB = 'float-renderer-output';
+  const OUTPUT_HANDLE_KEY = 'outputDirectory';
+
+  let outputDirectoryHandle = $state<FileSystemDirectoryHandle | null>(null);
+  let outputDirectoryName = $derived(outputDirectoryHandle?.name ?? null);
+
+  function saveOutputHandle(handle: FileSystemDirectoryHandle): void {
+    try {
+      const req = indexedDB.open(OUTPUT_HANDLE_DB, 1);
+      req.onupgradeneeded = () => req.result.createObjectStore('handles');
+      req.onsuccess = () => {
+        req.result.transaction('handles', 'readwrite').objectStore('handles').put(handle, OUTPUT_HANDLE_KEY);
+      };
+    } catch (e) {
+      console.warn('Could not save output folder:', e);
+    }
+  }
+
+  function loadOutputHandle(): Promise<FileSystemDirectoryHandle | null> {
+    return new Promise((resolve) => {
+      try {
+        const req = indexedDB.open(OUTPUT_HANDLE_DB, 1);
+        req.onupgradeneeded = () => req.result.createObjectStore('handles');
+        req.onsuccess = () => {
+          const tx = req.result.transaction('handles', 'readonly');
+          const get = tx.objectStore('handles').get(OUTPUT_HANDLE_KEY);
+          get.onsuccess = () => resolve(get.result ?? null);
+          get.onerror = () => resolve(null);
+        };
+        req.onerror = () => resolve(null);
+      } catch {
+        resolve(null);
+      }
+    });
+  }
+
+  async function chooseOutputFolder(): Promise<FileSystemDirectoryHandle | null> {
+    try {
+      const dir = await window.showDirectoryPicker({
+        id: 'output',
+        mode: 'readwrite',
+        startIn: 'videos',
+      });
+      outputDirectoryHandle = dir;
+      saveOutputHandle(dir);
+      return dir;
+    } catch (e) {
+      if ((e as Error).name !== 'AbortError') console.error(e);
+      return null;
+    }
+  }
+
+  async function getOutputDirectory(): Promise<FileSystemDirectoryHandle | null> {
+    if (outputDirectoryHandle) {
+      try {
+        if ('requestPermission' in outputDirectoryHandle && (outputDirectoryHandle as FileSystemDirectoryHandle).requestPermission) {
+          const perm = await (outputDirectoryHandle as FileSystemDirectoryHandle).requestPermission({ mode: 'readwrite' });
+          if (perm !== 'granted') {
+            outputDirectoryHandle = null;
+            return await chooseOutputFolder();
+          }
+        }
+        return outputDirectoryHandle;
+      } catch {
+        outputDirectoryHandle = null;
+        return await chooseOutputFolder();
+      }
+    }
+    return await chooseOutputFolder();
+  }
+
   // saved user input
   let interpolate = new SavedState('interpolate', false);
   let showRemoteTilt = new SavedState('showRemoteTilt', false);
@@ -80,6 +169,197 @@
   let inputStartingIndex = $state('');
   let inputEndingIndex = $state('');
 
+  // Video overlay: overlay ride stats on an imported video (preview + export as new file)
+  let overlayVideoFile = $state<File | undefined>(undefined);
+  let overlayVideoUrl = $state<string | undefined>(undefined);
+  let overlayTimeOffset = $state(0);
+  let overlayRows = $state<RowWithIndex[]>([]);
+  let overlaySelectedRowIndex = $state(0);
+  let overlayFieldsEnabled = new SavedState<Record<string, boolean>>('overlayFields', DEFAULT_OVERLAY_FIELDS);
+  let overlayPosition = new SavedState<OverlayPosition>('overlayPosition', DEFAULT_OVERLAY_POSITION);
+  let overlayFieldPositions = new SavedState<FieldPositions>('overlayFieldPositions', {});
+
+  const overlayItemsForPreview = $derived.by(() => {
+    const row = overlayRows[overlaySelectedRowIndex] ?? overlayRows[0];
+    if (!row) return [];
+    const enabled = OVERLAY_FIELD_DEFS.filter((def) => overlayFieldsEnabled.v[def.id]);
+    const defaultPositions = getDefaultItemPositions(overlayPosition.v, enabled.length);
+    return enabled.map((def, i) => {
+      const pos = overlayFieldPositions.v[def.id] ?? defaultPositions[i]!;
+      return {
+        id: def.id,
+        label: def.label,
+        value: def.getValue(row),
+        x: pos.x,
+        y: pos.y,
+      };
+    });
+  });
+
+  $effect(() => {
+    const f = overlayVideoFile;
+    const url = f ? URL.createObjectURL(f) : undefined;
+    overlayVideoUrl = url;
+    return () => {
+      if (url) URL.revokeObjectURL(url);
+    };
+  });
+
+  $effect(() => {
+    const rideFile = inputFile;
+    const videoFile = overlayVideoFile;
+    if (!rideFile || !videoFile) {
+      overlayRows = [];
+      return;
+    }
+    parse(rideFile).then((result) => {
+      overlayRows = result.data;
+    }).catch(() => {
+      overlayRows = [];
+    });
+  });
+
+  function rowAtTime(rows: RowWithIndex[], rideTime: number): RowWithIndex {
+    if (rows.length === 0) return null!;
+    if (rideTime <= rows[0]![RowKey.Time]) return rows[0]!;
+    if (rideTime >= rows[rows.length - 1]![RowKey.Time]) return rows[rows.length - 1]!;
+    let lo = 0;
+    let hi = rows.length - 1;
+    while (lo < hi - 1) {
+      const mid = (lo + hi) >> 1;
+      if (rows[mid]![RowKey.Time] <= rideTime) lo = mid;
+      else hi = mid;
+    }
+    const tLo = rows[lo]![RowKey.Time];
+    const tHi = rows[hi]![RowKey.Time];
+    return rideTime - tLo <= tHi - rideTime ? rows[lo]! : rows[hi]!;
+  }
+
+  async function renderVideoWithOverlay() {
+    if (!overlayVideoUrl || !inputFile || overlayRows.length === 0) {
+      alert('Please load both a ride file and a video first.');
+      return;
+    }
+    const dir = await getOutputDirectory();
+    if (!dir) return;
+    Notification.requestPermission();
+    const overlayFilename = filename ? `${filename} - overlay` : 'ride-overlay';
+
+    const video = document.createElement('video');
+    video.src = overlayVideoUrl;
+    video.crossOrigin = 'anonymous';
+    video.muted = true;
+    video.playsInline = true;
+
+    await new Promise<void>((resolve, reject) => {
+      video.onloadedmetadata = () => resolve();
+      video.onerror = () => reject(new Error('Failed to load video'));
+    });
+
+    const vw = video.videoWidth;
+    const vh = video.videoHeight;
+    const duration = video.duration;
+    const totalFrames = Math.ceil(duration * fps);
+    const frameDurationMicros = (1_000_000 / fps) | 0;
+
+    const canvas = document.createElement('canvas');
+    canvas.width = vw;
+    canvas.height = vh;
+    const ctx = canvas.getContext('2d')!;
+
+    const fileHandle = await dir!.getFileHandle(`${overlayFilename}.webm`, { create: true });
+    const fileWritableStream = await fileHandle.createWritable();
+    const webmWriter = new WebMWriter({
+      fileWriter: fileWritableStream,
+      codec: 'VP8',
+      width: vw,
+      height: vh,
+      frameRate: fps,
+    });
+
+    const encoderConfig: VideoEncoderConfig = {
+      codec: 'vp8',
+      width: vw,
+      height: vh,
+      bitrate: 2_000_000,
+      framerate: fps,
+    };
+    const { supported } = await VideoEncoder.isConfigSupported(encoderConfig);
+    if (!supported) {
+      await fileWritableStream.close();
+      alert('VP8 encoding is not supported in this browser.');
+      return;
+    }
+
+    const encoder = new VideoEncoder({
+      output: (chunk) => webmWriter.addFrame(chunk),
+      error: (e) => console.error('Video overlay encoder error:', e),
+    });
+    encoder.configure(encoderConfig);
+
+    isRendering = true;
+    if (elProgressBar1 && elProgressBar2 && elProgressText1 && elProgressText2) {
+      elProgressBar1.max = 1;
+      elProgressBar1.value = 0;
+      elProgressBar2.max = totalFrames;
+      elProgressBar2.value = 0;
+      elProgressText1.textContent = 'Video overlay';
+      elProgressText2.textContent = '0% (0 frames)';
+    }
+
+    function seekVideo(t: number): Promise<void> {
+      return new Promise((resolve) => {
+        video.onseeked = () => resolve();
+        video.currentTime = t;
+      });
+    }
+
+    try {
+      for (let i = 0; i < totalFrames && isRendering; i++) {
+        const T = i / fps;
+        const rideTime = T - overlayTimeOffset;
+        const row = rowAtTime(overlayRows, rideTime);
+        await seekVideo(T);
+        ctx.drawImage(video, 0, 0);
+        const enabled = OVERLAY_FIELD_DEFS.filter((def) => overlayFieldsEnabled.v[def.id]);
+        const defaultPositions = getDefaultItemPositions(overlayPosition.v, enabled.length);
+        const hudItems = enabled.map((def, i) => {
+          const pos = overlayFieldPositions.v[def.id] ?? defaultPositions[i]!;
+          return { label: def.label, value: def.getValue(row), x: pos.x, y: pos.y };
+        });
+        drawVideoOverlayHud(ctx, vw, vh, { items: hudItems });
+        const frame = new VideoFrame(canvas, { timestamp: i * frameDurationMicros });
+        encoder.encode(frame, { keyFrame: i % 30 === 0 });
+        frame.close();
+        if (elProgressBar2 && elProgressText2) {
+          elProgressBar2.value = i + 1;
+          elProgressText2.textContent = `${(((i + 1) / totalFrames) * 100).toFixed(1)}% (${i + 1} frames)`;
+        }
+        if (i % 30 === 0) {
+          await new Promise((r) => setTimeout(r, 0));
+        }
+      }
+
+      await encoder.flush();
+      encoder.close();
+      await webmWriter.complete();
+      await fileWritableStream.close();
+      if (elProgressBar1 && elProgressBar2) {
+        elProgressBar1.value = elProgressBar1.max;
+        elProgressBar2.value = elProgressBar2.max;
+      }
+      if (elLogOutput) elLogOutput.textContent += 'Video overlay export finished.\n';
+      if (Notification.permission === 'granted') {
+        new Notification('Video overlay export finished');
+      }
+    } catch (err) {
+      console.error('Video overlay export failed:', err);
+      alert(`Export failed: ${err instanceof Error ? err.message : String(err)}`);
+    } finally {
+      isRendering = false;
+    }
+  }
+
   // derived values
   let startingIndex = $derived(inputStartingIndex ? parseInt(inputStartingIndex, 10) : 0);
   let endingIndex = $derived(inputEndingIndex ? parseInt(inputEndingIndex, 10) : 0);
@@ -90,16 +370,17 @@
     inputGapThresholdSecs.v ? parseInt(inputGapThresholdSecs.v, 10) : defaultGapThresholdSecs,
   );
 
-  // when relevant values change, update debug
+  // when relevant values change, update debug (only in render mode)
   $effect(() => {
+    if (renderMode.v !== 'render') return;
     width;
     height;
     showRemoteTilt.v;
     use3dRenderer.v;
     renderInUi.v;
-    backgroundColor.v;
     boardPosition3d.v;
     boardPosition3dRaised.v;
+    backgroundColor.v;
     drawDebug();
   });
 
@@ -174,25 +455,20 @@
   });
 
   async function chooseOutputAndRender() {
-    Notification.requestPermission();
-
     if (!filename) {
       alert('Please enter a filename!');
       return;
     }
-
-    const directoryHandle = await window.showDirectoryPicker({
-      id: 'output',
-      mode: 'readwrite',
-      startIn: 'videos',
-    });
+    const directoryHandle = await getOutputDirectory();
+    if (!directoryHandle) return;
+    Notification.requestPermission();
 
     const canvas = document.createElement('canvas').transferControlToOffscreen();
     isRendering = true;
     worker.postMessage(
       {
         type: 'start',
-        directoryHandle,
+        directoryHandle: directoryHandle,
         fps,
         width,
         height,
@@ -288,6 +564,9 @@
 
   const images: Record<string, ImageBitmap> = {};
   onMount(async () => {
+    const savedHandle = await loadOutputHandle();
+    if (savedHandle) outputDirectoryHandle = savedHandle;
+
     // NOTE: web workers can't render SVGs, even though the spec says they should
     // so we render them in the UI thread here to a bitmap, and pass that to the worker
     // See: https://stackoverflow.com/a/79196371/5552584
@@ -456,7 +735,7 @@
         </div>
         <div class="relative max-w-2xl mx-auto">
           <p class="text-xl md:text-2xl text-slate-300 font-light tracking-wide">
-            Convert your
+            {renderMode.v === 'overlay' ? 'Overlay' : 'Convert'} your
             <span class="text-transparent bg-gradient-to-r from-emerald-400 to-cyan-400 bg-clip-text font-semibold"
               >recorded ride</span
             >
@@ -497,36 +776,161 @@
               </div>
             </div>
           </div>
-          <!-- Action Buttons -->
-          <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-6 shadow-lg backdrop-blur-sm">
-            <h2 class="text-lg font-semibold text-slate-100 mb-4">🎯 Actions</h2>
-            <div class="space-y-3">
-              <Button
-                onclick={() => chooseOutputAndRender()}
-                class="w-full bg-blue-600/80 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-blue-500/25 {isRendering
-                  ? 'opacity-50 cursor-not-allowed'
-                  : ''}"
-                disabled={isRendering}
+          <!-- Mode: Render vs Overlay -->
+          <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-4 shadow-lg backdrop-blur-sm">
+            <h2 class="text-sm font-semibold text-slate-300 mb-2">Mode</h2>
+            <div class="flex rounded-lg overflow-hidden border border-slate-600 bg-slate-900/50 p-0.5">
+              <button
+                type="button"
+                class="flex-1 py-2 px-3 text-sm font-medium rounded-md transition-colors {renderMode.v === 'render'
+                  ? 'bg-slate-600 text-white'
+                  : 'text-slate-400 hover:text-slate-200'}"
+                onclick={() => (renderMode.v = 'render')}
+              >
+                Render
+              </button>
+              <button
+                type="button"
+                class="flex-1 py-2 px-3 text-sm font-medium rounded-md transition-colors {renderMode.v === 'overlay'
+                  ? 'bg-slate-600 text-white'
+                  : 'text-slate-400 hover:text-slate-200'}"
+                onclick={() => (renderMode.v = 'overlay')}
               >
-                {isRendering ? '🎬 Rendering...' : '🎬 Choose Output & Render'}
+                Overlay
+              </button>
+            </div>
+          </div>
+
+          <!-- Output folder (shared) -->
+          <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-4 shadow-lg backdrop-blur-sm">
+            <h2 class="text-sm font-semibold text-slate-300 mb-2">Output folder</h2>
+            <div class="flex flex-wrap items-center gap-2">
+              <Button onclick={() => chooseOutputFolder()} class="bg-slate-600 hover:bg-slate-500 text-white text-sm">
+                {outputDirectoryName ? 'Change folder' : 'Choose folder'}
               </Button>
-              <div class="grid grid-cols-2 gap-3">
-                <Button
-                  onclick={() => stop()}
-                  class="disabled:opacity-50 disabled:cursor-not-allowed w-full bg-red-600/80 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-red-500/25"
-                  disabled={!isRendering}
+              <span class="text-sm font-mono text-slate-400 truncate max-w-[200px]" title={outputDirectoryName ?? ''}>
+                {outputDirectoryName ?? 'No folder selected'}
+              </span>
+            </div>
+          </div>
+
+          <!-- Ride file (overlay mode only) -->
+          {#if renderMode.v === 'overlay'}
+            <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-4 shadow-lg backdrop-blur-sm">
+              <h2 class="text-sm font-semibold text-slate-300 mb-2">Ride file</h2>
+              <div class="flex flex-wrap items-center gap-2">
+                <label
+                  class="cursor-pointer inline-flex items-center gap-2 rounded bg-slate-600 hover:bg-slate-500 px-3 py-2 text-sm font-medium text-white w-fit"
                 >
-                  ❌ Cancel
-                </Button>
+                  {inputFile ? 'Change ride file' : 'Choose ride file'}
+                  <input
+                    type="file"
+                    accept={supportedMimeTypeString}
+                    class="hidden"
+                    onchange={(e) => {
+                      const f = e.currentTarget.files?.[0];
+                      if (f) inputFile = f;
+                      e.currentTarget.value = '';
+                    }}
+                  />
+                </label>
                 <Button
                   onclick={() => clear()}
-                  class="disabled:opacity-50 disabled:cursor-not-allowed w-full bg-slate-600/80 hover:bg-slate-600 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-slate-500/25"
+                  class="disabled:opacity-50 disabled:cursor-not-allowed bg-slate-600/80 hover:bg-slate-600 text-white text-sm"
                   disabled={!inputFile}
                 >
-                  📁 Choose another file
+                  📁 Clear file
                 </Button>
+                <span
+                  class="text-sm font-mono text-slate-400 truncate max-w-[200px]"
+                  title={inputFile?.name ?? ''}
+                >
+                  {inputFile?.name ?? 'No ride file selected'}
+                </span>
               </div>
             </div>
+          {/if}
+
+          <!-- Actions (content by mode) -->
+          <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-6 shadow-lg backdrop-blur-sm">
+            <h2 class="text-lg font-semibold text-slate-100 mb-4">🎯 Actions</h2>
+            {#if renderMode.v === 'render'}
+              <div class="space-y-3">
+                <Button
+                  onclick={() => chooseOutputAndRender()}
+                  class="w-full bg-blue-600/80 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-blue-500/25 {isRendering
+                    ? 'opacity-50 cursor-not-allowed'
+                    : ''}"
+                  disabled={isRendering}
+                >
+                  {isRendering ? '🎬 Rendering...' : '🎬 Render'}
+                </Button>
+                <div class="grid grid-cols-2 gap-3">
+                  <Button
+                    onclick={() => stop()}
+                    class="disabled:opacity-50 disabled:cursor-not-allowed w-full bg-red-600/80 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg"
+                    disabled={!isRendering}
+                  >
+                    ❌ Cancel
+                  </Button>
+                  <Button
+                    onclick={() => clear()}
+                    class="disabled:opacity-50 disabled:cursor-not-allowed w-full bg-slate-600/80 hover:bg-slate-600 text-white font-medium py-2 px-4 rounded-lg"
+                    disabled={!inputFile}
+                  >
+                    📁 Clear file
+                  </Button>
+                </div>
+              </div>
+            {:else}
+              <div class="space-y-3">
+                {#if overlayVideoUrl && overlayRows.length > 0}
+                  <Button
+                    onclick={() => renderVideoWithOverlay()}
+                    class="w-full bg-blue-600/80 hover:bg-blue-600 text-white font-medium py-3 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-blue-500/25 {isRendering
+                      ? 'opacity-50 cursor-not-allowed'
+                      : ''}"
+                    disabled={isRendering}
+                  >
+                    {isRendering ? '🎬 Exporting…' : '🎬 Export video with overlay'}
+                  </Button>
+                  <div class="grid grid-cols-2 gap-3">
+                    <Button
+                      onclick={() => (isRendering = false)}
+                      class="disabled:opacity-50 disabled:cursor-not-allowed w-full bg-red-600/80 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg"
+                      disabled={!isRendering}
+                    >
+                      ❌ Cancel
+                    </Button>
+                    <Button
+                      onclick={() => (overlayVideoFile = undefined)}
+                      class="disabled:opacity-50 disabled:cursor-not-allowed w-full bg-slate-600/80 hover:bg-slate-600 text-white font-medium py-2 px-4 rounded-lg"
+                      disabled={!overlayVideoFile}
+                    >
+                      📁 Clear video
+                    </Button>
+                  </div>
+                {:else}
+                  {#if !inputFile}
+                    <p class="text-sm text-slate-500">Load a ride file above first.</p>
+                  {:else}
+                    <label class="cursor-pointer inline-flex items-center gap-2 rounded bg-cyan-600 hover:bg-cyan-500 px-3 py-2 text-sm font-medium text-white w-fit">
+                      Load video
+                      <input
+                        type="file"
+                        accept="video/*"
+                        class="hidden"
+                        onchange={(e) => {
+                          const f = e.currentTarget.files?.[0];
+                          if (f) overlayVideoFile = f;
+                          e.currentTarget.value = '';
+                        }}
+                      />
+                    </label>
+                  {/if}
+                {/if}
+              </div>
+            {/if}
           </div>
 
           <!-- Progress Section -->
@@ -558,43 +962,159 @@
             </div>
           </div>
 
-          <!-- Output Settings -->
+          <!-- Settings (content by mode) -->
           <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-6 shadow-lg backdrop-blur-sm">
-            {@render outputSettings()}
+            {#if renderMode.v === 'render'}
+              {@render outputSettings()}
+            {:else}
+              <h2 class="text-lg font-semibold text-slate-100 mb-4">🎬 Overlay settings</h2>
+              <div class="space-y-4">
+                <div>
+                  <p class="text-sm text-slate-400 mb-2">Fields to show</p>
+                  <div class="flex flex-wrap gap-x-4 gap-y-1">
+                    {#each OVERLAY_FIELD_DEFS as def}
+                      <label class="inline-flex items-center gap-1.5 text-sm text-slate-300 cursor-pointer">
+                        <input
+                          type="checkbox"
+                          checked={overlayFieldsEnabled.v[def.id] ?? false}
+                          onchange={() => {
+                            overlayFieldsEnabled.v = { ...overlayFieldsEnabled.v, [def.id]: !overlayFieldsEnabled.v[def.id] };
+                          }}
+                        />
+                        {def.label}
+                      </label>
+                    {/each}
+                  </div>
+                </div>
+                <p class="text-sm text-slate-500">Drag fields on the preview to move them. Position is used when exporting.</p>
+                <div>
+                  <p class="text-sm text-slate-400 mb-2">Default position (for new fields)</p>
+                  <div class="flex flex-wrap gap-3">
+                    <label class="text-sm text-slate-300">
+                      Vertical
+                      <select
+                        class="ml-2 rounded border border-slate-600 bg-slate-900 px-2 py-1 text-slate-200 text-sm"
+                        value={overlayPosition.v.vertical}
+                        onchange={(e) => {
+                          const vertical = (e.currentTarget.value || 'bottom') as OverlayPosition['vertical'];
+                          overlayPosition.v = { ...overlayPosition.v, vertical };
+                        }}
+                      >
+                        <option value="top">Top</option>
+                        <option value="center">Center</option>
+                        <option value="bottom">Bottom</option>
+                      </select>
+                    </label>
+                    <label class="text-sm text-slate-300">
+                      Horizontal
+                      <select
+                        class="ml-2 rounded border border-slate-600 bg-slate-900 px-2 py-1 text-slate-200 text-sm"
+                        value={overlayPosition.v.horizontal}
+                        onchange={(e) => {
+                          const horizontal = (e.currentTarget.value || 'left') as OverlayPosition['horizontal'];
+                          overlayPosition.v = { ...overlayPosition.v, horizontal };
+                        }}
+                      >
+                        <option value="left">Left</option>
+                        <option value="center">Center</option>
+                        <option value="right">Right</option>
+                      </select>
+                    </label>
+                    <Button
+                      onclick={() => (overlayFieldPositions.v = {})}
+                      class="bg-slate-600 hover:bg-slate-500 text-white text-sm"
+                    >
+                      Reset custom positions
+                    </Button>
+                  </div>
+                </div>
+                <Input
+                  id="overlay-fps"
+                  label="FPS"
+                  type="number"
+                  defaultValue={inputFps.v}
+                  placeholder={`${defaultFps}`}
+                  onblur={(e) => (inputFps.v = e.currentTarget.value)}
+                />
+                <div class="flex flex-wrap items-center gap-2">
+                  <label for="overlay-time-offset" class="text-sm text-slate-300">Time offset (s):</label>
+                  <input
+                    id="overlay-time-offset"
+                    type="number"
+                    step="0.5"
+                    class="w-20 rounded border border-slate-600 bg-slate-900 px-2 py-1 text-slate-200 font-mono text-sm"
+                    bind:value={overlayTimeOffset}
+                  />
+                  <span class="text-xs text-slate-500">Ride start = video time − offset</span>
+                </div>
+              </div>
+            {/if}
           </div>
         </div>
 
-        <!-- Right Column -->
+        <!-- Right Column (Preview first, then Log) -->
         <div class="space-y-3">
-          <!-- Log Output -->
-          <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-6 shadow-lg backdrop-blur-sm">
-            <h2 class="text-lg font-semibold text-slate-100 mb-4">📝 Log Output</h2>
-            <pre
-              bind:this={elLogOutput}
-              class="h-[300px] w-full p-4 text-xs font-mono bg-slate-950/80 text-green-400 rounded-lg overflow-y-auto border border-slate-700/50 scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-slate-800"></pre>
-          </div>
-
-          <!-- Preview -->
+          <!-- Preview (content by mode) -->
           <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-6 shadow-lg backdrop-blur-sm">
             <h2 class="text-lg font-semibold text-slate-100 mb-4">
-              🎨 Render Preview
-              {#if renderInUi.v}
-                <Pill text="live" appearance="rose" class="animate-pulse" />
+              {#if renderMode.v === 'render'}
+                🎨 Render Preview
+                {#if renderInUi.v}
+                  <Pill text="live" appearance="rose" class="animate-pulse" />
+                {/if}
+              {:else}
+                🎨 Overlay preview
               {/if}
             </h2>
-            {#if import.meta.env.DEV}
-              <div class="flex items-center justify-between mb-2">
-                <Button onclick={() => (fullscreenPreview.v = true)} class="bg-blue-600/80 hover:bg-blue-600">
-                  Fullscreen Preview
-                </Button>
+            {#if renderMode.v === 'render'}
+              {#if import.meta.env.DEV}
+                <div class="flex items-center justify-between mb-2">
+                  <Button onclick={() => (fullscreenPreview.v = true)} class="bg-blue-600/80 hover:bg-blue-600">
+                    Fullscreen Preview
+                  </Button>
+                </div>
+              {/if}
+              <div
+                bind:this={elDemoContainer}
+                class="relative flex justify-center items-center h-[400px] bg-slate-900/50 border border-slate-600/50 rounded-lg overflow-hidden"
+              >
+                <!-- Preview canvas will be inserted here -->
+              </div>
+            {:else}
+              <div
+                class="relative flex justify-center items-center min-h-[280px] bg-slate-900/50 border border-slate-600/50 rounded-lg overflow-hidden"
+              >
+                {#if overlayVideoUrl && overlayRows.length > 0}
+                  <VideoOverlay
+                    videoUrl={overlayVideoUrl}
+                    rows={overlayRows}
+                    selectedRowIndex={overlaySelectedRowIndex}
+                    setSelectedRowIndex={(i) => (overlaySelectedRowIndex = i)}
+                    timeOffset={overlayTimeOffset}
+                    overlayItems={overlayItemsForPreview}
+                    onPositionChange={(id, x, y) => {
+                      overlayFieldPositions.v = { ...overlayFieldPositions.v, [id]: { x, y } };
+                    }}
+                  />
+                {:else}
+                  <p class="text-slate-500 text-sm p-4 text-center">
+                    {#if !inputFile}
+                      Load a ride file, then load a video to preview.
+                    {:else}
+                      Load a video to preview overlay.
+                    {/if}
+                  </p>
+                {/if}
               </div>
             {/if}
-            <div
-              bind:this={elDemoContainer}
-              class="relative flex justify-center items-center h-[400px] bg-slate-900/50 border border-slate-600/50 rounded-lg overflow-hidden"
-            >
-              <!-- Preview canvas will be inserted here -->
-            </div>
+          </div>
+
+          <!-- Log Output -->
+          <div class="bg-slate-800/50 border border-slate-700/50 rounded-lg p-6 shadow-lg backdrop-blur-sm">
+            <h2 class="text-lg font-semibold text-slate-100 mb-4">📝 Log Output</h2>
+            <pre
+              bind:this={elLogOutput}
+              class="h-[300px] w-full p-4 text-xs font-mono bg-slate-950/80 text-green-400 rounded-lg overflow-y-auto border border-slate-700/50 scrollbar-thin scrollbar-thumb-slate-600 scrollbar-track-slate-800"></pre>
           </div>
         </div>
       </div>
diff --git a/src/components/Renderer/2d.ts b/src/components/Renderer/2d.ts
index f2eda6c..6ce2f5a 100644
--- a/src/components/Renderer/2d.ts
+++ b/src/components/Renderer/2d.ts
@@ -539,3 +539,54 @@ function drawFootpad(params: FootpadParams) {
     ctx.restore();
   }
 }
+
+export interface VideoOverlayHudOptions {
+  /** Each item has label, value, and position in 0–1 (relative to canvas size) */
+  items: { label: string; value: string; x: number; y: number }[];
+}
+
+/** Draw overlay HUD on a canvas (e.g. over a video frame). Used when exporting video with burned-in stats. */
+export function drawVideoOverlayHud(
+  ctx: Ctx,
+  width: number,
+  height: number,
+  options: VideoOverlayHudOptions,
+): void {
+  const { items } = options;
+  if (items.length === 0) return;
+
+  // Use smaller padding so export box size matches preview (preview uses ~16px / tailwind px-4)
+  const pad = Math.min(width, height) * 0.015;
+  const fontSize = Math.max(14, Math.min(width, height) * 0.04);
+  const boxHeight = fontSize * 2.2;
+
+  ctx.font = getCtxFont(fontSize);
+  ctx.textBaseline = 'middle';
+
+  for (const { label, value, x, y } of items) {
+    const boxWidth = ctx.measureText(label + ' ').width + ctx.measureText(value).width + pad * 2;
+    // Position in pixels; clamp so box stays fully inside frame (avoids "a few px too far right")
+    let px = x * width;
+    let py = y * height;
+    if (px + boxWidth > width) px = width - boxWidth;
+    if (px < 0) px = 0;
+    if (py + boxHeight > height) py = height - boxHeight;
+    if (py < 0) py = 0;
+
+    ctx.fillStyle = 'rgba(15, 23, 42, 0.85)';
+    ctx.strokeStyle = 'rgba(71, 85, 105, 0.6)';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.roundRect(px, py, boxWidth, boxHeight, 8);
+    ctx.fill();
+    ctx.stroke();
+
+    ctx.fillStyle = colors.fgSubtle;
+    ctx.textAlign = 'left';
+    ctx.fillText(label, px + pad * 0.5, py + boxHeight / 2);
+
+    ctx.fillStyle = colors.fg;
+    ctx.textAlign = 'right';
+    ctx.fillText(value, px + boxWidth - pad * 0.5, py + boxHeight / 2);
+  }
+}
diff --git a/src/components/Renderer/overlay.ts b/src/components/Renderer/overlay.ts
new file mode 100644
index 0000000..8f045df
--- /dev/null
+++ b/src/components/Renderer/overlay.ts
@@ -0,0 +1,122 @@
+import { RowKey, type RowWithIndex } from '../../lib/parse/types';
+
+export type OverlayVertical = 'top' | 'center' | 'bottom';
+export type OverlayHorizontal = 'left' | 'center' | 'right';
+
+export interface OverlayPosition {
+  vertical: OverlayVertical;
+  horizontal: OverlayHorizontal;
+}
+
+export const DEFAULT_OVERLAY_POSITION: OverlayPosition = {
+  vertical: 'bottom',
+  horizontal: 'left',
+};
+
+export interface OverlayFieldDef {
+  id: string;
+  label: string;
+  getValue: (row: RowWithIndex) => string;
+}
+
+export const OVERLAY_FIELD_DEFS: OverlayFieldDef[] = [
+  { id: 'speed', label: 'Speed', getValue: (r) => `${r[RowKey.Speed].toFixed(1)} km/h` },
+  { id: 'duty', label: 'Duty', getValue: (r) => `${Math.abs(r[RowKey.Duty]).toFixed(0)}%` },
+  { id: 'elevation', label: 'Elevation', getValue: (r) => `${r[RowKey.Altitude].toFixed(0)} m` },
+  { id: 'voltage', label: 'Voltage', getValue: (r) => `${r[RowKey.Voltage].toFixed(1)} V` },
+  { id: 'currentMotor', label: 'Current Motor', getValue: (r) => `${r[RowKey.CurrentMotor].toFixed(1)} A` },
+  { id: 'tempMotor', label: 'Temp Motor', getValue: (r) => `${r[RowKey.TempMotor].toFixed(0)} °C` },
+  { id: 'tempMosfet', label: 'Temp Mosfet', getValue: (r) => `${r[RowKey.TempMosfet].toFixed(0)} °C` },
+  { id: 'pitch', label: 'Pitch', getValue: (r) => `${r[RowKey.TruePitch].toFixed(1)}°` },
+  { id: 'roll', label: 'Roll', getValue: (r) => `${r[RowKey.Roll].toFixed(1)}°` },
+];
+
+export const DEFAULT_OVERLAY_FIELDS: Record<string, boolean> = {
+  speed: true,
+  duty: true,
+  elevation: true,
+};
+
+/** CSS classes for positioning the overlay container (Tailwind-style: insets + flex). */
+export function getOverlayPositionClasses(pos: OverlayPosition): string {
+  const v = pos.vertical === 'top' ? 'top-4' : pos.vertical === 'bottom' ? 'bottom-4' : 'top-1/2 -translate-y-1/2';
+  const h =
+    pos.horizontal === 'left'
+      ? 'left-4'
+      : pos.horizontal === 'right'
+        ? 'right-4'
+        : 'left-1/2 -translate-x-1/2';
+  const flex =
+    pos.vertical === 'top'
+      ? 'flex-col'
+      : pos.vertical === 'bottom'
+        ? 'flex-col-reverse'
+        : 'flex-col';
+  return `${v} ${h} flex ${flex} gap-2`;
+}
+
+/** Pixel position for canvas drawing: returns { x, y, stackDown } where (x,y) is top-left of first box and stackDown means next box is at y + boxHeight + gap. */
+export function getOverlayPositionPixels(
+  pos: OverlayPosition,
+  width: number,
+  height: number,
+  boxWidth: number,
+  boxHeight: number,
+  gap: number,
+  itemCount: number,
+): { x: number; y: number; stackDown: boolean } {
+  const pad = Math.min(width, height) * 0.03;
+  const totalHeight = itemCount * boxHeight + (itemCount - 1) * gap;
+
+  let x: number;
+  if (pos.horizontal === 'left') x = pad;
+  else if (pos.horizontal === 'right') x = width - pad - boxWidth;
+  else x = (width - boxWidth) / 2;
+
+  let y: number;
+  let stackDown: boolean;
+  if (pos.vertical === 'top') {
+    y = pad;
+    stackDown = true;
+  } else if (pos.vertical === 'bottom') {
+    y = height - pad - totalHeight;
+    stackDown = true; // next box below (higher y)
+  } else {
+    y = (height - totalHeight) / 2;
+    stackDown = true;
+  }
+  return { x, y, stackDown };
+}
+
+const PAD_FRAC = 0.03;
+const BOX_HEIGHT_FRAC = 0.06;
+const GAP_FRAC = 0.02;
+const BOX_WIDTH_FRAC = 0.28;
+
+/** Default (x, y) in 0–1 for each item when stacked at the given position. Used when no custom position is set. */
+export function getDefaultItemPositions(
+  pos: OverlayPosition,
+  itemCount: number,
+): { x: number; y: number }[] {
+  const result: { x: number; y: number }[] = [];
+  let x: number;
+  if (pos.horizontal === 'left') x = PAD_FRAC;
+  else if (pos.horizontal === 'right') x = 1 - PAD_FRAC - BOX_WIDTH_FRAC;
+  else x = 0.5 - BOX_WIDTH_FRAC / 2;
+
+  for (let i = 0; i < itemCount; i++) {
+    let y: number;
+    if (pos.vertical === 'top') {
+      y = PAD_FRAC + i * (BOX_HEIGHT_FRAC + GAP_FRAC);
+    } else if (pos.vertical === 'bottom') {
+      y = 1 - PAD_FRAC - (itemCount - i) * BOX_HEIGHT_FRAC - (itemCount - 1 - i) * GAP_FRAC;
+    } else {
+      const totalH = itemCount * BOX_HEIGHT_FRAC + (itemCount - 1) * GAP_FRAC;
+      y = 0.5 - totalH / 2 + i * (BOX_HEIGHT_FRAC + GAP_FRAC);
+    }
+    result.push({ x, y });
+  }
+  return result;
+}
+
+export type FieldPositions = Record<string, { x: number; y: number }>;
diff --git a/src/components/VideoOverlay.svelte b/src/components/VideoOverlay.svelte
new file mode 100644
index 0000000..26b30d3
--- /dev/null
+++ b/src/components/VideoOverlay.svelte
@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { RowKey, type RowWithIndex } from '../lib/parse/types';
+
+  interface OverlayItem {
+    id: string;
+    label: string;
+    value: string;
+    x: number;
+    y: number;
+  }
+
+  interface Props {
+    /** Video source URL (e.g. from URL.createObjectURL(file)) */
+    videoUrl: string;
+    /** All rows from the ride (must have time-ordered data) */
+    rows: RowWithIndex[];
+    /** Current row index in the full rows array (we sync from video time) */
+    selectedRowIndex: number;
+    /** Called when video time changes so parent can update selected index */
+    setSelectedRowIndex: (index: number) => void;
+    /** Time offset in seconds: rideTime = videoCurrentTime - timeOffset (video starts after ride start when > 0) */
+    timeOffset?: number;
+    /** Overlay items with position (x, y in 0–1) */
+    overlayItems?: OverlayItem[];
+    /** Called when user drags a field to a new position */
+    onPositionChange?: (id: string, x: number, y: number) => void;
+  }
+
+  let {
+    videoUrl,
+    rows,
+    selectedRowIndex,
+    setSelectedRowIndex,
+    timeOffset = 0,
+    overlayItems = [],
+    onPositionChange,
+  }: Props = $props();
+
+  let videoEl = $state<HTMLVideoElement | null>(null);
+  let overlayContainerEl = $state<HTMLDivElement | null>(null);
+  let draggingId = $state<string | null>(null);
+  let dragOffsetX = $state(0);
+  let dragOffsetY = $state(0);
+  let dragX = $state(0);
+  let dragY = $state(0);
+
+  /** Match the video's object-contain display area so (x,y) 0-1 match export coordinates */
+  let displayRect = $state<{ left: number; top: number; width: number; height: number } | null>(null);
+
+  function updateDisplayRect() {
+    const v = videoEl;
+    if (!v || v.videoWidth === 0 || v.videoHeight === 0) {
+      displayRect = null;
+      return;
+    }
+    const vw = v.videoWidth;
+    const vh = v.videoHeight;
+    const ew = v.clientWidth;
+    const eh = v.clientHeight;
+    const scale = Math.min(ew / vw, eh / vh);
+    const w = vw * scale;
+    const h = vh * scale;
+    const left = (ew - w) / 2;
+    const top = (eh - h) / 2;
+    displayRect = { left, top, width: w, height: h };
+  }
+
+  $effect(() => {
+    const v = videoEl;
+    if (!v) return;
+    const onLoad = () => updateDisplayRect();
+    v.addEventListener('loadedmetadata', onLoad);
+    v.addEventListener('loadeddata', onLoad);
+    v.addEventListener('resize', onLoad);
+    const ro = new ResizeObserver(onLoad);
+    ro.observe(v);
+    updateDisplayRect();
+    return () => {
+      v.removeEventListener('loadedmetadata', onLoad);
+      v.removeEventListener('loadeddata', onLoad);
+      v.removeEventListener('resize', onLoad);
+      ro.disconnect();
+    };
+  });
+
+  function clamp01(n: number) {
+    return Math.max(0.01, Math.min(0.99, n));
+  }
+
+  function startDrag(e: PointerEvent, item: OverlayItem) {
+    if (!onPositionChange || !overlayContainerEl) return;
+    const rect = overlayContainerEl.getBoundingClientRect();
+    const boxX = item.x * rect.width;
+    const boxY = item.y * rect.height;
+    draggingId = item.id;
+    dragOffsetX = e.clientX - rect.left - boxX;
+    dragOffsetY = e.clientY - rect.top - boxY;
+    dragX = item.x;
+    dragY = item.y;
+    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+  }
+
+  function onDragMove(e: PointerEvent) {
+    if (!draggingId || !overlayContainerEl) return;
+    const rect = overlayContainerEl.getBoundingClientRect();
+    dragX = clamp01((e.clientX - rect.left - dragOffsetX) / rect.width);
+    dragY = clamp01((e.clientY - rect.top - dragOffsetY) / rect.height);
+  }
+
+  function endDrag(e: PointerEvent) {
+    if (draggingId && onPositionChange) {
+      onPositionChange(draggingId, dragX, dragY);
+    }
+    draggingId = null;
+    (e.target as HTMLElement).releasePointerCapture?.(e.pointerId);
+  }
+
+  /** Find row index whose time is closest to rideTime (seconds) */
+  function rowIndexAtTime(rideTime: number): number {
+    if (rows.length === 0) return 0;
+    if (rideTime <= rows[0]![RowKey.Time]) return 0;
+    if (rideTime >= rows[rows.length - 1]![RowKey.Time]) return rows.length - 1;
+    let lo = 0;
+    let hi = rows.length - 1;
+    while (lo < hi - 1) {
+      const mid = (lo + hi) >> 1;
+      const t = rows[mid]![RowKey.Time];
+      if (t <= rideTime) lo = mid;
+      else hi = mid;
+    }
+    const tLo = rows[lo]![RowKey.Time];
+    const tHi = rows[hi]![RowKey.Time];
+    return rideTime - tLo <= tHi - rideTime ? lo : hi;
+  }
+
+  function onTimeUpdate() {
+    const v = videoEl;
+    if (!v || rows.length === 0) return;
+    const rideTime = v.currentTime - timeOffset;
+    if (rideTime < 0) {
+      setSelectedRowIndex(0);
+      return;
+    }
+    const idx = rowIndexAtTime(rideTime);
+    if (idx !== selectedRowIndex) setSelectedRowIndex(idx);
+  }
+
+  function onSeeked() {
+    onTimeUpdate();
+  }
+
+  $effect(() => {
+    const v = videoEl;
+    if (!v) return;
+    v.addEventListener('timeupdate', onTimeUpdate);
+    v.addEventListener('seeked', onSeeked);
+    return () => {
+      v.removeEventListener('timeupdate', onTimeUpdate);
+      v.removeEventListener('seeked', onSeeked);
+    };
+  });
+
+  const currentRow = $derived(rows[selectedRowIndex] ?? rows[0]);
+</script>
+
+<div class="video-overlay-container relative w-full h-full bg-black overflow-hidden rounded-lg">
+  <!-- svelte-ignore a11y_media_has_caption - user-provided ride video, no captions -->
+  <video
+    bind:this={videoEl}
+    class="block w-full h-full object-contain"
+    src={videoUrl}
+    controls
+    crossorigin="anonymous"
+    playsinline
+  ></video>
+  {#if overlayItems.length > 0}
+    <div
+      bind:this={overlayContainerEl}
+      class="video-overlay-hud absolute pointer-events-none"
+      style={displayRect
+        ? `left: ${displayRect.left}px; top: ${displayRect.top}px; width: ${displayRect.width}px; height: ${displayRect.height}px;`
+        : 'inset: 0;'}
+      aria-hidden="true"
+    >
+      {#each overlayItems as item}
+        {@const isDragging = draggingId === item.id}
+        {@const x = isDragging ? dragX : item.x}
+        {@const y = isDragging ? dragY : item.y}
+        <div
+          class="absolute w-fit max-w-[85%] flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-900/85 backdrop-blur border border-slate-600/50 cursor-grab active:cursor-grabbing select-none pointer-events-auto touch-none {isDragging
+            ? 'ring-2 ring-cyan-400'
+            : ''}"
+          style="left: {x * 100}%; top: {y * 100}%; transform: translate(0, 0);"
+          role="button"
+          tabindex="-1"
+          onpointerdown={(e) => onPositionChange && startDrag(e, item)}
+          onpointermove={onDragMove}
+          onpointerup={endDrag}
+          onpointercancel={endDrag}
+          onpointerleave={(e) => e.buttons === 0 && endDrag(e)}
+        >
+          <span class="text-slate-400 text-sm font-medium">{item.label}</span>
+          <span class="text-white font-mono font-bold text-lg tabular-nums">{item.value}</span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
diff --git a/src/components/View.svelte b/src/components/View.svelte
index cdaac22..04af3ea 100644
--- a/src/components/View.svelte
+++ b/src/components/View.svelte
@@ -271,6 +271,7 @@
       </div>
     </Modal>
   {/if}
+
   <div
     class="sticky top-[--header-height] h-[--grid-width] z-50 border-b
     wide:relative wide:top-[unset] wide:h-[unset] wide:border-b-0"

From 3bd62a367d65340733764a054703e27457160f90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABtan=20Gueraud?= <exadeci@gmail.com>
Date: Sat, 7 Feb 2026 17:32:10 +1100
Subject: [PATCH 2/2] app: add colors options for overlay

---
 src/components/Renderer.svelte     | 65 +++++++++++++++++++++++++-----
 src/components/Renderer/2d.ts      | 11 +++--
 src/components/VideoOverlay.svelte | 14 +++++--
 3 files changed, 73 insertions(+), 17 deletions(-)

diff --git a/src/components/Renderer.svelte b/src/components/Renderer.svelte
index 8417456..531f90d 100644
--- a/src/components/Renderer.svelte
+++ b/src/components/Renderer.svelte
@@ -178,6 +178,8 @@
   let overlayFieldsEnabled = new SavedState<Record<string, boolean>>('overlayFields', DEFAULT_OVERLAY_FIELDS);
   let overlayPosition = new SavedState<OverlayPosition>('overlayPosition', DEFAULT_OVERLAY_POSITION);
   let overlayFieldPositions = new SavedState<FieldPositions>('overlayFieldPositions', {});
+  let overlayBackgroundColor = new SavedState<string>('overlayBackgroundColor', 'rgba(15, 23, 42, 0.85)');
+  let overlayTextColor = new SavedState<string>('overlayTextColor', '#e2e8f0');
 
   const overlayItemsForPreview = $derived.by(() => {
     const row = overlayRows[overlaySelectedRowIndex] ?? overlayRows[0];
@@ -327,7 +329,11 @@
           const pos = overlayFieldPositions.v[def.id] ?? defaultPositions[i]!;
           return { label: def.label, value: def.getValue(row), x: pos.x, y: pos.y };
         });
-        drawVideoOverlayHud(ctx, vw, vh, { items: hudItems });
+        drawVideoOverlayHud(ctx, vw, vh, {
+          items: hudItems,
+          backgroundColor: overlayBackgroundColor.v,
+          textColor: overlayTextColor.v,
+        });
         const frame = new VideoFrame(canvas, { timestamp: i * frameDurationMicros });
         encoder.encode(frame, { keyFrame: i % 30 === 0 });
         frame.close();
@@ -1028,14 +1034,17 @@
                     </Button>
                   </div>
                 </div>
-                <Input
-                  id="overlay-fps"
-                  label="FPS"
-                  type="number"
-                  defaultValue={inputFps.v}
-                  placeholder={`${defaultFps}`}
-                  onblur={(e) => (inputFps.v = e.currentTarget.value)}
-                />
+                <div>
+                  <Input
+                    id="overlay-fps"
+                    label="Output FPS"
+                    type="number"
+                    defaultValue={inputFps.v}
+                    placeholder={`${defaultFps}`}
+                    onblur={(e) => (inputFps.v = e.currentTarget.value)}
+                  />
+                  <p class="text-xs text-slate-500 mt-1">Match your source video’s frame rate (e.g. 24, 25, 30) for 1:1 quality.</p>
+                </div>
                 <div class="flex flex-wrap items-center gap-2">
                   <label for="overlay-time-offset" class="text-sm text-slate-300">Time offset (s):</label>
                   <input
@@ -1047,6 +1056,42 @@
                   />
                   <span class="text-xs text-slate-500">Ride start = video time − offset</span>
                 </div>
+                <div class="flex flex-wrap items-center gap-4">
+                  <div class="flex items-center gap-2">
+                    <label for="overlay-bg-color" class="text-sm text-slate-300">Background:</label>
+                    <input
+                      id="overlay-bg-color"
+                      type="text"
+                      class="w-40 rounded border border-slate-600 bg-slate-900 px-2 py-1 text-slate-200 font-mono text-sm"
+                      placeholder="rgba(15, 23, 42, 0.85)"
+                      bind:value={overlayBackgroundColor.v}
+                    />
+                    <input
+                      type="color"
+                      class="h-8 w-8 cursor-pointer rounded border border-slate-600"
+                      value={overlayBackgroundColor.v.startsWith('#') ? overlayBackgroundColor.v : '#0f172a'}
+                      oninput={(e) => (overlayBackgroundColor.v = e.currentTarget.value)}
+                      title="Pick background color"
+                    />
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <label for="overlay-text-color" class="text-sm text-slate-300">Text:</label>
+                    <input
+                      id="overlay-text-color"
+                      type="text"
+                      class="w-28 rounded border border-slate-600 bg-slate-900 px-2 py-1 text-slate-200 font-mono text-sm"
+                      placeholder="#e2e8f0"
+                      bind:value={overlayTextColor.v}
+                    />
+                    <input
+                      type="color"
+                      class="h-8 w-8 cursor-pointer rounded border border-slate-600"
+                      value={overlayTextColor.v.startsWith('#') ? overlayTextColor.v : '#e2e8f0'}
+                      oninput={(e) => (overlayTextColor.v = e.currentTarget.value)}
+                      title="Pick text color"
+                    />
+                  </div>
+                </div>
               </div>
             {/if}
           </div>
@@ -1092,6 +1137,8 @@
                     setSelectedRowIndex={(i) => (overlaySelectedRowIndex = i)}
                     timeOffset={overlayTimeOffset}
                     overlayItems={overlayItemsForPreview}
+                    overlayBackgroundColor={overlayBackgroundColor.v}
+                    overlayTextColor={overlayTextColor.v}
                     onPositionChange={(id, x, y) => {
                       overlayFieldPositions.v = { ...overlayFieldPositions.v, [id]: { x, y } };
                     }}
diff --git a/src/components/Renderer/2d.ts b/src/components/Renderer/2d.ts
index 6ce2f5a..cf1c323 100644
--- a/src/components/Renderer/2d.ts
+++ b/src/components/Renderer/2d.ts
@@ -543,6 +543,10 @@ function drawFootpad(params: FootpadParams) {
 export interface VideoOverlayHudOptions {
   /** Each item has label, value, and position in 0–1 (relative to canvas size) */
   items: { label: string; value: string; x: number; y: number }[];
+  /** Background color for each field box (CSS color, e.g. rgba(15,23,42,0.85)) */
+  backgroundColor?: string;
+  /** Text color for label and value (CSS color) */
+  textColor?: string;
 }
 
 /** Draw overlay HUD on a canvas (e.g. over a video frame). Used when exporting video with burned-in stats. */
@@ -552,7 +556,7 @@ export function drawVideoOverlayHud(
   height: number,
   options: VideoOverlayHudOptions,
 ): void {
-  const { items } = options;
+  const { items, backgroundColor = 'rgba(15, 23, 42, 0.85)', textColor = colors.fg } = options;
   if (items.length === 0) return;
 
   // Use smaller padding so export box size matches preview (preview uses ~16px / tailwind px-4)
@@ -573,7 +577,7 @@ export function drawVideoOverlayHud(
     if (py + boxHeight > height) py = height - boxHeight;
     if (py < 0) py = 0;
 
-    ctx.fillStyle = 'rgba(15, 23, 42, 0.85)';
+    ctx.fillStyle = backgroundColor;
     ctx.strokeStyle = 'rgba(71, 85, 105, 0.6)';
     ctx.lineWidth = 2;
     ctx.beginPath();
@@ -581,11 +585,10 @@ export function drawVideoOverlayHud(
     ctx.fill();
     ctx.stroke();
 
-    ctx.fillStyle = colors.fgSubtle;
+    ctx.fillStyle = textColor;
     ctx.textAlign = 'left';
     ctx.fillText(label, px + pad * 0.5, py + boxHeight / 2);
 
-    ctx.fillStyle = colors.fg;
     ctx.textAlign = 'right';
     ctx.fillText(value, px + boxWidth - pad * 0.5, py + boxHeight / 2);
   }
diff --git a/src/components/VideoOverlay.svelte b/src/components/VideoOverlay.svelte
index 26b30d3..e774d70 100644
--- a/src/components/VideoOverlay.svelte
+++ b/src/components/VideoOverlay.svelte
@@ -22,6 +22,10 @@
     timeOffset?: number;
     /** Overlay items with position (x, y in 0–1) */
     overlayItems?: OverlayItem[];
+    /** Background color for all overlay fields (CSS color) */
+    overlayBackgroundColor?: string;
+    /** Text color for all overlay fields (CSS color) */
+    overlayTextColor?: string;
     /** Called when user drags a field to a new position */
     onPositionChange?: (id: string, x: number, y: number) => void;
   }
@@ -33,6 +37,8 @@
     setSelectedRowIndex,
     timeOffset = 0,
     overlayItems = [],
+    overlayBackgroundColor = 'rgba(15, 23, 42, 0.85)',
+    overlayTextColor = '#e2e8f0',
     onPositionChange,
   }: Props = $props();
 
@@ -187,10 +193,10 @@
         {@const x = isDragging ? dragX : item.x}
         {@const y = isDragging ? dragY : item.y}
         <div
-          class="absolute w-fit max-w-[85%] flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-900/85 backdrop-blur border border-slate-600/50 cursor-grab active:cursor-grabbing select-none pointer-events-auto touch-none {isDragging
+          class="absolute w-fit max-w-[85%] flex items-center gap-2 px-4 py-2 rounded-lg backdrop-blur border border-slate-600/50 cursor-grab active:cursor-grabbing select-none pointer-events-auto touch-none {isDragging
             ? 'ring-2 ring-cyan-400'
             : ''}"
-          style="left: {x * 100}%; top: {y * 100}%; transform: translate(0, 0);"
+          style="left: {x * 100}%; top: {y * 100}%; transform: translate(0, 0); background: {overlayBackgroundColor}; color: {overlayTextColor};"
           role="button"
           tabindex="-1"
           onpointerdown={(e) => onPositionChange && startDrag(e, item)}
@@ -199,8 +205,8 @@
           onpointercancel={endDrag}
           onpointerleave={(e) => e.buttons === 0 && endDrag(e)}
         >
-          <span class="text-slate-400 text-sm font-medium">{item.label}</span>
-          <span class="text-white font-mono font-bold text-lg tabular-nums">{item.value}</span>
+          <span class="text-sm font-medium opacity-90">{item.label}</span>
+          <span class="font-mono font-bold text-lg tabular-nums">{item.value}</span>
         </div>
       {/each}
     </div>