diff --git a/packages/studio/src/components/TimelineToolbar.tsx b/packages/studio/src/components/TimelineToolbar.tsx
index 1e314ed4ef..6a4e5d2ee3 100644
--- a/packages/studio/src/components/TimelineToolbar.tsx
+++ b/packages/studio/src/components/TimelineToolbar.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
+import { Image, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 import {
   useEnableKeyframes,
   isPlayheadWithinTween,
@@ -80,6 +80,8 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
   const setTimelineSnapEnabled = usePlayerStore((s) => s.setTimelineSnapEnabled);
   const autoKeyframeEnabled = usePlayerStore((s) => s.autoKeyframeEnabled);
   const setAutoKeyframeEnabled = usePlayerStore((s) => s.setAutoKeyframeEnabled);
+  const thumbnailsEnabled = usePlayerStore((s) => s.thumbnailsEnabled);
+  const setThumbnailsEnabled = usePlayerStore((s) => s.setThumbnailsEnabled);
   // Subscribe so the add-beat button reacts to playhead movement and analysis load.
   const currentTime = usePlayerStore((s) => s.currentTime);
   const beatAnalysisReady = usePlayerStore((s) => s.beatAnalysis !== null);
@@ -357,6 +359,21 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
           })()}
         </div>
         <div className="flex items-center gap-0.5">
+          <Tooltip label={thumbnailsEnabled ? "Hide clip thumbnails" : "Show clip thumbnails"}>
+            <button
+              type="button"
+              aria-label={thumbnailsEnabled ? "Hide clip thumbnails" : "Show clip thumbnails"}
+              aria-pressed={thumbnailsEnabled}
+              onClick={() => setThumbnailsEnabled(!thumbnailsEnabled)}
+              className={`h-7 px-2 rounded-md text-[11px] font-medium transition-colors ${
+                thumbnailsEnabled
+                  ? "bg-studio-accent/10 text-studio-accent"
+                  : "text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200"
+              }`}
+            >
+              <Image size={16} aria-hidden="true" />
+            </button>
+          </Tooltip>
           <Tooltip label="Fit timeline to width">
             <button
               type="button"
diff --git a/packages/studio/src/hooks/useRenderClipContent.test.ts b/packages/studio/src/hooks/useRenderClipContent.test.ts
index 057cf04824..afee7e5792 100644
--- a/packages/studio/src/hooks/useRenderClipContent.test.ts
+++ b/packages/studio/src/hooks/useRenderClipContent.test.ts
@@ -5,13 +5,14 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
-import type { TimelineElement } from "../player/store/playerStore";
+import { usePlayerStore, type TimelineElement } from "../player/store/playerStore";
 import { normalizeCompositionSrc } from "./useRenderClipContent";
 import { useRenderClipContent } from "./useRenderClipContent";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
+  usePlayerStore.setState({ thumbnailsEnabled: false });
   document.body.innerHTML = "";
 });
 
@@ -106,6 +107,8 @@ describe("useRenderClipContent", () => {
   });
 
   it("passes empty labels to thumbnail content so TimelineClip owns clip names", () => {
+    usePlayerStore.setState({ thumbnailsEnabled: true });
+
     const cases: Array<{ content: ReactNode; type: unknown }> = [
       {
         content: renderClipContent({
diff --git a/packages/studio/src/hooks/useRenderClipContent.ts b/packages/studio/src/hooks/useRenderClipContent.ts
index 0e01c381fa..b3c7dc079a 100644
--- a/packages/studio/src/hooks/useRenderClipContent.ts
+++ b/packages/studio/src/hooks/useRenderClipContent.ts
@@ -5,6 +5,7 @@ import type { TimelineElement } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
 import { ImageThumbnail } from "../player/components/ImageThumbnail";
 import { encodePreviewPath, resolveMediaPreviewUrl } from "../player/components/thumbnailUtils";
+import { usePlayerStore } from "../player/store/playerStore";
 
 export function normalizeCompositionSrc(
   compSrc: string,
@@ -87,6 +88,9 @@ export function useRenderClipContent({
   activePreviewUrl,
   effectiveTimelineDuration,
 }: UseRenderClipContentOptions) {
+  // Self-sourced (not threaded via App) so the toggle gates generation without
+  // App.tsx plumbing. Off by default -> plain clip bars, snappy timeline (#2428).
+  const thumbnailsEnabled = usePlayerStore((s) => s.thumbnailsEnabled);
   return useCallback(
     // Pre-existing clip-content dispatcher; reduced by extracting renderAudioClip.
     // fallow-ignore-next-line complexity
@@ -94,6 +98,12 @@ export function useRenderClipContent({
       const pid = projectIdRef.current;
       if (!pid) return null;
 
+      // Thumbnail generation disabled (perf) -> plain clip bars. Audio still shows
+      // its waveform (cheap, not a frame thumbnail). Toggle: timeline toolbar.
+      if (!thumbnailsEnabled) {
+        return el.tag === "audio" ? renderAudioClip(el, pid, style.label) : null;
+      }
+
       let compSrc = el.compositionSrc;
       if (compSrc) {
         compSrc = normalizeCompositionSrc(compSrc, pid, window.location.origin);
@@ -182,6 +192,6 @@ export function useRenderClipContent({
 
       return null;
     },
-    [projectIdRef, compIdToSrc, activePreviewUrl, effectiveTimelineDuration],
+    [projectIdRef, compIdToSrc, activePreviewUrl, effectiveTimelineDuration, thumbnailsEnabled],
   );
 }
diff --git a/packages/studio/src/player/store/playerStore.ts b/packages/studio/src/player/store/playerStore.ts
index 665a63beee..d8efeecdb3 100644
--- a/packages/studio/src/player/store/playerStore.ts
+++ b/packages/studio/src/player/store/playerStore.ts
@@ -122,6 +122,7 @@ interface PlayerState {
   loopEnabled: boolean;
   /** Timeline zoom: 'fit' auto-scales to viewport, 'manual' uses manualZoomPercent */
   zoomMode: ZoomMode;
+  thumbnailsEnabled: boolean;
   /** Timeline zoom percent relative to the fit width when in manual mode */
   manualZoomPercent: number;
   /**
@@ -218,6 +219,7 @@ interface PlayerState {
     >,
   ) => void;
   setZoomMode: (mode: ZoomMode) => void;
+  setThumbnailsEnabled: (enabled: boolean) => void;
   setManualZoomPercent: (percent: number) => void;
   bumpZEditVersion: () => void;
   setInPoint: (time: number | null) => void;
@@ -291,9 +293,7 @@ interface BeatHistoryEntry {
   label: string;
 }
 
-// Lightweight pub-sub for current time during playback.
-// Bypasses React state so the RAF loop can update the playhead/time display
-// without triggering re-renders on every frame.
+// Lightweight pub-sub avoids React re-renders on every playback frame.
 type TimeListener = (time: number) => void;
 const _timeListeners = new Set<TimeListener>();
 export const liveTime = {
@@ -316,6 +316,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   audioMuted: readStudioUiPreferences().audioMuted ?? false,
   loopEnabled: false,
   zoomMode: "fit",
+  thumbnailsEnabled: readStudioUiPreferences().thumbnailsEnabled ?? false,
   manualZoomPercent: 100,
   zEditVersion: 0,
   timelinePps: 100,
@@ -448,6 +449,10 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
     writeStudioUiPreferences({ audioMuted: muted });
     set({ audioMuted: muted });
   },
+  setThumbnailsEnabled: (enabled) => {
+    writeStudioUiPreferences({ thumbnailsEnabled: enabled });
+    set({ thumbnailsEnabled: enabled });
+  },
   setLoopEnabled: (enabled) => set({ loopEnabled: enabled }),
   setZoomMode: (mode) => set({ zoomMode: mode }),
   clearSelectedElementIds: () => set({ selectedElementIds: new Set() }),
@@ -582,11 +587,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
     }),
 }));
 
-// Bug-bash aid: expose the store so a reproduction can dump live state from the
-// console, e.g. `__playerStore.getState().selectedElementId`. Harmless read
-// handle; no behavioural effect.
-// Only in dev. `import.meta.env` may be undefined in non-Vite bundlers (Next.js
-// Turbopack), so guard the access like the telemetry client does.
+// Dev-only bug-bash handle; guard import.meta.env for non-Vite bundlers.
 function isDevBuild(): boolean {
   try {
     return import.meta.env.DEV === true;
diff --git a/packages/studio/src/utils/studioUiPreferences.ts b/packages/studio/src/utils/studioUiPreferences.ts
index 6548a58eba..b66eea8e5e 100644
--- a/packages/studio/src/utils/studioUiPreferences.ts
+++ b/packages/studio/src/utils/studioUiPreferences.ts
@@ -10,6 +10,7 @@ export interface StudioUiPreferences {
   timelineHeight?: number;
   playbackRate?: number;
   audioMuted?: boolean;
+  thumbnailsEnabled?: boolean;
   previewZoom?: StoredPreviewZoomState;
   recentBlocks?: string[];
   snapEnabled?: boolean;
@@ -70,6 +71,9 @@ function readStorage(storage: Storage | null): StudioUiPreferences {
     if (typeof parsed.audioMuted === "boolean") {
       preferences.audioMuted = parsed.audioMuted;
     }
+    if (typeof parsed.thumbnailsEnabled === "boolean") {
+      preferences.thumbnailsEnabled = parsed.thumbnailsEnabled;
+    }
     if (isRecord(parsed.previewZoom)) {
       const { zoomPercent, panX, panY } = parsed.previewZoom;
       if (
diff --git a/packages/studio/vite.browser.ts b/packages/studio/vite.browser.ts
index 9d1482cdfb..2489ca95cd 100644
--- a/packages/studio/vite.browser.ts
+++ b/packages/studio/vite.browser.ts
@@ -1,6 +1,8 @@
 // Shared Puppeteer browser management and thumbnail generation for Studio dev server.
 
-import { existsSync } from "node:fs";
+import { existsSync, readdirSync } from "node:fs";
+import { homedir } from "node:os";
+import { join } from "node:path";
 import { createHash } from "node:crypto";
 import {
   createStudioDevRenderBodyScripts,
@@ -14,18 +16,66 @@ import { seekThumbnailPreview } from "./vite.thumbnail";
 let _browser: import("puppeteer-core").Browser | null = null;
 let _browserLaunchPromise: Promise<import("puppeteer-core").Browser> | null = null;
 
-const CHROME_PATHS = [
+// Installed system browsers (Chrome/Chromium-family), macOS + Linux.
+const CHROME_APP_PATHS = [
   "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+  "/Applications/Google Chrome Canary.app/Contents/MacOS/Google Chrome Canary",
+  "/Applications/Chromium.app/Contents/MacOS/Chromium",
+  "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser",
+  "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge",
   "/usr/bin/google-chrome",
+  "/usr/bin/google-chrome-stable",
+  "/usr/bin/chromium",
   "/usr/bin/chromium-browser",
 ];
 
+// Chrome-for-Testing downloaded by Puppeteer (or `npx puppeteer browsers install`).
+// Layout: <cacheDir>/chrome/<platform>-<version>/chrome-<platform>/<executable>.
+// Prefer the highest version so a stale early build doesn't win.
+// fallow-ignore-next-line complexity
+function findPuppeteerCacheChrome(): string | undefined {
+  const cacheRoot = process.env.PUPPETEER_CACHE_DIR || join(homedir(), ".cache", "puppeteer");
+  const chromeRoot = join(cacheRoot, "chrome");
+  let versionDirs: string[];
+  try {
+    versionDirs = readdirSync(chromeRoot);
+  } catch {
+    return undefined; // no cache dir
+  }
+  const buildOrder = (dir: string): number => {
+    const parts = (dir.split("-").pop() ?? "").split(".").map((n) => Number.parseInt(n, 10) || 0);
+    return parts.reduce((acc, n) => acc * 100000 + n, 0);
+  };
+  const relCandidates = [
+    "chrome-mac-arm64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
+    "chrome-mac-x64/Google Chrome for Testing.app/Contents/MacOS/Google Chrome for Testing",
+    "chrome-linux64/chrome",
+  ];
+  for (const dir of versionDirs.sort((a, b) => buildOrder(b) - buildOrder(a))) {
+    for (const rel of relCandidates) {
+      const exe = join(chromeRoot, dir, rel);
+      if (existsSync(exe)) return exe;
+    }
+  }
+  return undefined;
+}
+
+/** Resolve a Chrome/Chromium executable: env override → system install → Puppeteer cache. */
+function resolveChromeExecutable(): string | undefined {
+  const envOverride = [
+    process.env.PUPPETEER_EXECUTABLE_PATH,
+    process.env.CHROME_PATH,
+    process.env.CHROME_BIN,
+  ].find((p): p is string => !!p && existsSync(p));
+  return envOverride ?? CHROME_APP_PATHS.find((p) => existsSync(p)) ?? findPuppeteerCacheChrome();
+}
+
 async function getSharedBrowser(): Promise<import("puppeteer-core").Browser | null> {
   if (_browser?.connected) return _browser;
   if (_browserLaunchPromise) return _browserLaunchPromise;
   _browserLaunchPromise = (async () => {
     const puppeteer = await import("puppeteer-core");
-    const executablePath = CHROME_PATHS.find((p) => existsSync(p));
+    const executablePath = resolveChromeExecutable();
     if (!executablePath) return null;
     _browser = await puppeteer.default.launch({
       headless: true,
@@ -46,9 +96,9 @@ async function getSharedBrowser(): Promise<import("puppeteer-core").Browser | nu
   return _browserLaunchPromise;
 }
 
-/** The system Chrome executable path (undefined if not found). */
+/** The Chrome/Chromium executable path (undefined if none found). */
 export function findSystemChrome(): string | undefined {
-  return CHROME_PATHS.find((p) => existsSync(p));
+  return resolveChromeExecutable();
 }
 
 // In-flight thumbnail dedup