From ccd40103a22d56bb46b4919873d2434854578a5b Mon Sep 17 00:00:00 2001
From: BenStullsBets <ben@benbetson.us>
Date: Tue, 30 Jun 2026 14:08:11 -0700
Subject: [PATCH] =?UTF-8?q?fix(speed):=20cap=20Video=20speed=20at=202x=20(?=
 =?UTF-8?q?>2x=20stutters=20=E2=80=94=20base=20loops=20not=20all-intra)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same root cause that retired reverse playback: the resting loop clips aren't
all-intra, so playbackRate >2x makes Safari stutter on inter-frame seeks. Narrow
both sliders (welcome + panel) + the tick datalist to 0–2x; default still 1x.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 simulator/e2e/tests/a11y.spec.ts | 10 +++++-----
 simulator/static/index.html      | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/simulator/e2e/tests/a11y.spec.ts b/simulator/e2e/tests/a11y.spec.ts
index 1fc0a18..f8d480a 100644
--- a/simulator/e2e/tests/a11y.spec.ts
+++ b/simulator/e2e/tests/a11y.spec.ts
@@ -49,7 +49,7 @@ test.describe("Task 4 — Photosensitivity notice", () => {
 });
 
 test.describe("Task 5 — Playback speed slider + Reduce motion", () => {
-  test("Speed is a 0–4x forward slider; the loop follows it (default 1x)", async ({ page }) => {
+  test("Speed is a 0–2x forward slider; the loop follows it (default 1x)", async ({ page }) => {
     await page.emulateMedia({ reducedMotion: "no-preference" });
     await page.goto("/");
     await enter(page);
@@ -57,17 +57,17 @@ test.describe("Task 5 — Playback speed slider + Reduce motion", () => {
     await expect(slider).toBeVisible();
     await expect(slider).toHaveValue("1");          // default = normal speed
     await expect(slider).toHaveAttribute("min", "0");
-    await expect(slider).toHaveAttribute("max", "4");
+    await expect(slider).toHaveAttribute("max", "2"); // capped at 2x — base clips aren't all-intra, so >2x stutters
   });
 
-  test("forward speed sets the loop video's playbackRate (up to 4x)", async ({ page }) => {
+  test("forward speed sets the loop video's playbackRate (up to 2x)", async ({ page }) => {
     await page.emulateMedia({ reducedMotion: "no-preference" });
     await page.goto("/");
     await enter(page);
-    await page.locator("#play-speed").fill("4");
+    await page.locator("#play-speed").fill("2");
     await expect
       .poll(() => page.locator("#vid-loop").evaluate((v: HTMLVideoElement) => v.playbackRate))
-      .toBe(4);
+      .toBe(2);
   });
 
   test("0x freezes the loop video", async ({ page }) => {
diff --git a/simulator/static/index.html b/simulator/static/index.html
index d058a4f..3f5141a 100644
--- a/simulator/static/index.html
+++ b/simulator/static/index.html
@@ -22,7 +22,7 @@
           <select id="welcome-lang" aria-label="Language"></select>
         </label>
         <label class="audio-level play-speed"><span data-i18n="speed.label">Video speed</span>
-          <input type="range" id="welcome-play-speed" min="0" max="4" step="any" value="1"
+          <input type="range" id="welcome-play-speed" min="0" max="2" step="any" value="1"
                  list="play-speed-ticks" aria-describedby="welcome-play-speed-val" />
           <span id="welcome-play-speed-val">1.00×</span>
         </label>
@@ -77,14 +77,14 @@
           <span id="audio-level-val">0</span>/10
         </label>
         <label class="audio-level play-speed"><span data-i18n="speed.label">Video speed</span>
-          <input type="range" id="play-speed" min="0" max="4" step="any" value="1"
+          <input type="range" id="play-speed" min="0" max="2" step="any" value="1"
                  list="play-speed-ticks" aria-describedby="play-speed-val" />
           <span id="play-speed-val">1.00×</span>
         </label>
         <datalist id="play-speed-ticks">
-          <option value="0"></option><option value="0.5"></option><option value="1"></option>
-          <option value="1.5"></option><option value="2"></option><option value="2.5"></option>
-          <option value="3"></option><option value="3.5"></option><option value="4"></option>
+          <option value="0"></option><option value="0.25"></option><option value="0.5"></option>
+          <option value="0.75"></option><option value="1"></option><option value="1.25"></option>
+          <option value="1.5"></option><option value="1.75"></option><option value="2"></option>
         </datalist>
         <label class="dev-switch" for="reduce-motion">
           <input type="checkbox" id="reduce-motion" />