@@ -6,7 +6,7 @@
 		"dazzatron",
 		"kratos2k7"
 	],
-	"version": "2.28.2",
+	"version": "2.29.1",
 	"description": "A video editing library for creating and editing videos with Shotstack",
 	"type": "module",
 	"main": "dist/shotstack-studio.umd.js",
 
@@ -187,6 +187,21 @@ const edit = new Edit(templateJson, { html5Prerender: "on-play" });
 
 Captured frames are the same either way. Until the edit plays, the canvas shows each `html5` clip as a still of its frame at the playhead, in its layer and with its effects. Playback stays choppy until the frames are ready, so keep the default, `"on-load"`, for an edit that someone watches.
 
+`edit.getPendingCaptures()` returns `{ pending, total, progress }`: how many `html5` clips are still preparing smooth playback, out of those that will play pre-rendered frames, and how far along they are, from 0 to 1 by frames baked. Failed clips, and an `"on-play"` edit's clips before it plays, count in neither number. The timeline shows this as a ring around its play button and a ring in each preparing clip. A player of your own can read it on the capture events, and a few times a second in between, since progress moves without them:
+
+```typescript
+const showPreparing = () => {
+  const { pending, progress } = edit.getPendingCaptures();
+  ring.hidden = pending === 0;
+  ring.style.setProperty("--progress", String(progress));
+};
+edit.events.on("clip:captureStarted", showPreparing);
+edit.events.on("clip:captureCompleted", showPreparing);
+edit.events.on("clip:captureFailed", showPreparing);
+setInterval(showPreparing, 250);
+showPreparing();
+```
+
 #### Events
 
 Listen using string event names:
@@ -221,6 +236,9 @@ Available event names:
 | Duration | `duration:changed` |
 | Output | `output:resized`, `output:resolutionChanged`, `output:aspectRatioChanged`, `output:fpsChanged`, `output:formatChanged`, `output:destinationsChanged` |
 | Merge fields | `mergefield:changed` |
+| `html5` pre-rendering | `clip:captureStarted`, `clip:captureCompleted`, `clip:captureFailed` |
+
+A failed capture's `fallback` is `"static-placeholder"` when the clip shows a placeholder, or `"scaled-frames"` when a sharper pre-render failed and the clip keeps its current frames.
 
 ### Generating assets from prompts
 
 
@@ -1,6 +1,7 @@
 import { Player, PlayerType } from "@canvas/players/player";
 import type { Edit } from "@core/edit-session";
-import { EditEvent } from "@core/events/edit-events";
+import { EditEvent, InternalEvent } from "@core/events/edit-events";
+import type { PlaybackReadiness } from "@core/pending-captures";
 import type { ResolvedTiming } from "@core/timing/types";
 import { type Size } from "@layouts/geometry";
 import type { ResolvedClip } from "@schemas";
@@ -31,6 +32,7 @@ const SEEK_KEY = "__shotstackSeek" as const;
 const CAPTURE_SLICE_MS = 12;
 // A frame in flight holds its canvas until toBlob takes its pixels.
 const CAPTURE_MEMORY_BUDGET_BYTES = 256 * 1024 * 1024;
+const CAPTURE_PROGRESS_STEPS = 20;
 const BAKE_SCALES = [0.25, 0.5, 0.75, 1];
 
 function forceLayout(el: HTMLElement): void {
@@ -227,6 +229,14 @@ export class Html5Player extends Player {
 		}
 	}
 
+	private emitCaptureProgress(): void {
+		try {
+			this.edit.getInternalEvents().emit(InternalEvent.CaptureProgressChanged, { clipId: this.clipId });
+		} catch (emitErr) {
+			console.warn("[Html5Player] failed to emit CaptureProgressChanged:", emitErr);
+		}
+	}
+
 	private emitCaptureCompleted(frameCount: number): void {
 		try {
 			this.edit.getInternalEvents().emit(EditEvent.ClipCaptureCompleted, {
@@ -341,6 +351,8 @@ export class Html5Player extends Player {
 
 	private transitionToCapturing(): void {
 		this.mode = "capturing";
+		this.captureFramesDone = 0;
+		this.captureFramesTotal = 0;
 		if (!this.liveStill) this.mountLoadingGraphic();
 		this.emitCaptureStarted();
 	}
@@ -360,21 +372,51 @@ export class Html5Player extends Player {
 			return this.captureInFlight;
 		}
 		const queuedFor = this.contentHash;
-		const capture: Promise<Blob[] | null> = Html5Player.captureChain
-			.then(() => {
-				// A content change while this waited in the queue would bake the new content at this capture's floor.
-				if (this.disposed || this.contentHash !== queuedFor) return null;
-				return this.runCapture(minScale);
-			})
+		const previous = Html5Player.captureChain;
+		// Cached frames cost no bake, so they never wait in the queue behind one.
+		const capture: Promise<Blob[] | null> = this.bakeScale(minScale)
+			.then(scale => this.adoptCachedBake(scale))
+			.then(
+				cached =>
+					cached ??
+					previous.then(() => {
+						// A content change while this waited in the queue would bake the new content at this capture's floor.
+						if (this.disposed || this.contentHash !== queuedFor) return null;
+						return this.runCapture(minScale);
+					})
+			)
 			.finally(() => {
 				// A content change frees the slot, and a newer capture may hold it by now.
 				if (this.captureInFlight === capture) this.captureInFlight = null;
 			});
 		this.captureInFlight = capture;
-		Html5Player.captureChain = capture.catch(() => undefined);
+		// A cache hit settles early, so the next bake waits on the whole queue, not just this capture.
+		Html5Player.captureChain = Promise.allSettled([previous, capture]).then(() => undefined);
 		return capture;
 	}
 
+	// After a tick, an active clip's global transform is the size the canvas shows it at. An inactive clip's own
+	// transform isn't applied, so its bake reads only the viewport's zoom and may re-bake once the clip is active.
+	private async bakeScale(minScale: number): Promise<number> {
+		await nextFrame();
+		return Math.max(bakeScaleFor(this.onScreenScale()), minScale);
+	}
+
+	private async adoptCachedBake(scale: number): Promise<Blob[] | null> {
+		const { contentHash } = this;
+		if (!contentHash) return null;
+		const stale = (): boolean => this.disposed || this.contentHash !== contentHash;
+		const cacheKey = `${contentHash}@${scale}`;
+		const cached = await html5CacheGet(cacheKey);
+		if (stale() || !cached) return null;
+		this.captureFramesTotal = cached.frameCount;
+		this.captureFramesDone = cached.frameCount;
+		this.captureFps = cached.fps;
+		if (!(await this.adoptBake(cached.pngs, cacheKey, scale, stale))) return null;
+		this.emitCaptureCompleted(cached.frameCount);
+		return cached.pngs;
+	}
+
 	// A re-bake passes the scale it was started for, so a later, smaller sample can't bake softer frames.
 	private async runCapture(minScale: number = 0): Promise<Blob[] | null> {
 		if (!this.iframe || !this.iframe.contentDocument || !this.iframe.contentWindow) return null;
@@ -383,23 +425,13 @@ export class Html5Player extends Player {
 		if (!contentHash) return null;
 		const stale = (): boolean => this.disposed || this.contentHash !== contentHash;
 
-		// After a tick, an active clip's global transform is the size the canvas shows it at. An inactive clip's own
-		// transform isn't applied, so its bake reads only the viewport's zoom and may re-bake once the clip is active.
-		await nextFrame();
+		const scale = await this.bakeScale(minScale);
 		if (stale()) return null;
-		const scale = Math.max(bakeScaleFor(this.onScreenScale()), minScale);
-		const cacheKey = `${contentHash}@${scale}`;
-
-		const cached = await html5CacheGet(cacheKey);
+		// The display scale can change while a clip waits in the queue, which can turn up a cached bake at the new scale.
+		const cached = await this.adoptCachedBake(scale);
+		if (cached) return cached;
 		if (stale()) return null;
-		if (cached) {
-			this.captureFramesTotal = cached.frameCount;
-			this.captureFramesDone = cached.frameCount;
-			this.captureFps = cached.fps;
-			if (!(await this.adoptBake(cached.pngs, cacheKey, scale, stale))) return null;
-			this.emitCaptureCompleted(cached.frameCount);
-			return cached.pngs;
-		}
+		const cacheKey = `${contentHash}@${scale}`;
 
 		// An earlier capture may have seeked this iframe, and a seeked animation can leave state
 		// a fresh page lacks (GSAP writes start values inline once a tween has
@@ -425,6 +457,7 @@ export class Html5Player extends Player {
 		let lastSvg = "";
 		let lastFrame: Promise<Blob> | null = null;
 		let issued = 0;
+		let progressStep = 0;
 		let sliceStart = -Infinity;
 		// Frames publish in order, so the oldest in flight gates the window.
 		while (blobs.length < frameCount) {
@@ -450,6 +483,12 @@ export class Html5Player extends Player {
 				if (stale()) return null;
 				blobs.push(frame);
 				this.captureFramesDone += 1;
+				// Steps, not frames: enough for a ring to fill smoothly, and bounded whatever the frame count.
+				const step = Math.floor((this.captureFramesDone / frameCount) * CAPTURE_PROGRESS_STEPS);
+				if (step > progressStep) {
+					progressStep = step;
+					this.emitCaptureProgress();
+				}
 			}
 		}
 
@@ -761,8 +800,8 @@ export class Html5Player extends Player {
 		} catch (err) {
 			if (this.disposed || this.contentHash !== newHash) return;
 			console.warn("[Html5Player] reload iframe load failed:", err);
-			this.emitCaptureFailed(err, "static-placeholder");
 			this.transitionToFailed();
+			this.emitCaptureFailed(err, "static-placeholder");
 		}
 	}
 
@@ -795,6 +834,21 @@ export class Html5Player extends Player {
 		this.fallbackGraphic = null;
 	}
 
+	public override getPlaybackReadiness(): PlaybackReadiness {
+		if (this.disposed || this.fallbackGraphic) return null;
+		// Frames count from adoption, when captureCompleted fires; playback takes over a decode later, with no event.
+		const adopted = !!this.capturedFrames && this.capturedHash === `${this.contentHash}@${this.capturedScale}`;
+		if (adopted || this.mode === "playback") return "ready";
+		if (this.mode === "capturing") return "pending";
+		// An edit that pre-renders on play bakes nothing until it plays.
+		return this.edit.getHtml5Prerender() === "on-load" || this.hasTriggeredCapture ? "pending" : null;
+	}
+
+	public override getCaptureProgress(): number {
+		if (this.getPlaybackReadiness() !== "pending") return 1;
+		return this.captureFramesTotal > 0 ? this.captureFramesDone / this.captureFramesTotal : 0;
+	}
+
 	public override update(deltaTime: number, elapsed: number): void {
 		super.update(deltaTime, elapsed);
 		this.triggerCaptureIfNeeded();
@@ -831,16 +885,19 @@ export class Html5Player extends Player {
 				if (this.disposed || this.contentHash !== hashAtStart) return;
 				const fresh = !!frames && frames.length > 0 && this.capturedHash === `${hashAtStart}@${this.capturedScale}`;
 				if (!fresh) {
-					if (this.mode === "capturing") this.transitionToFailed();
+					if (this.mode !== "capturing") return;
+					this.transitionToFailed();
+					this.emitCaptureFailed(new Error("The capture produced no frames"), "static-placeholder");
 					return;
 				}
 				await this.transitionToPlayback();
 			})
 			.catch(err => {
 				if (this.disposed || this.contentHash !== hashAtStart) return;
 				console.warn("[Html5Player] capture failed:", err);
-				this.emitCaptureFailed(err, "static-placeholder");
+				// Listeners redraw on the failure, so the clip shows it first.
 				if (this.mode === "capturing") this.transitionToFailed();
+				this.emitCaptureFailed(err, "static-placeholder");
 			});
 	}
 
 
@@ -5,6 +5,7 @@ import { WipeFilter } from "@animations/wipe-filter";
 import { type Edit } from "@core/edit-session";
 import { InternalEvent } from "@core/events/edit-events";
 import { calculateContainerScale, calculateFitScale, calculateSpriteTransform, type FitMode } from "@core/layout/fit-system";
+import { type PlaybackReadiness } from "@core/pending-captures";
 import {
 	type AliasReference,
 	type ResolvedTiming,
@@ -575,6 +576,15 @@ export abstract class Player extends Entity {
 		};
 	}
 
+	// Only players that pre-render frames can play choppily while they prepare.
+	public getPlaybackReadiness(): PlaybackReadiness {
+		return null;
+	}
+
+	public getCaptureProgress(): number {
+		return 1;
+	}
+
 	public isActive(): boolean {
 		// playbackTime is in seconds, matching clip start/end
 		return this.edit.playbackTime >= this.getStart() && this.edit.playbackTime < this.getEnd();
 
@@ -172,8 +172,8 @@ export class Canvas {
 			this.currentZoom = Math.min(Math.max(newZoom, this.minZoom), this.maxZoom);
 
 			const stageCenter = {
-				x: this.application.canvas.width / 2,
-				y: this.application.canvas.height / 2
+				x: this.viewportSize.width / 2,
+				y: this.viewportSize.height / 2
 			};
 
 			const distanceFromCenter = {
@@ -239,9 +239,10 @@ export class Canvas {
 			return;
 		}
 
+		// In CSS pixels: the canvas element's own width counts device pixels.
 		this.viewportContainer.position = {
-			x: this.application.canvas.width / 2 - (this.edit.size.width * this.currentZoom) / 2,
-			y: this.application.canvas.height / 2 - (this.edit.size.height * this.currentZoom) / 2
+			x: this.viewportSize.width / 2 - (this.edit.size.width * this.currentZoom) / 2,
+			y: this.viewportSize.height / 2 - (this.edit.size.height * this.currentZoom) / 2
 		};
 
 		this.syncContentTransforms();
@@ -380,7 +381,9 @@ export class Canvas {
 			target,
 			...(frame ? { frame } : {}),
 			format: pixiFormat,
-			quality: options.quality ?? 0.85
+			quality: options.quality ?? 0.85,
+			// Captures stay in output pixels whatever the screen's density.
+			resolution: 1
 		});
 	}
 
@@ -623,6 +626,9 @@ export class Canvas {
 			width: this.viewportSize.width,
 			height: this.viewportSize.height,
 			antialias: true,
+			// Draws at the screen's pixel density, so text and frames stay sharp on phones and retina screens. 2 caps the fill cost on 3x phones.
+			resolution: Math.min(window.devicePixelRatio || 1, 2),
+			autoDensity: true,
 			powerPreference: "high-performance",
 			eventFeatures: {
 				globalMove: true, // Required for drag handling in SelectionHandles
 
@@ -19,6 +19,7 @@ export interface ClipComponentOptions {
 	getClipError?: (trackIndex: number, clipIndex: number) => { error: string; assetType: string } | null;
 	/** Get generation state for a clip (while an AI asset is being generated) */
 	getClipGenerationState?: (clipId: string) => { status: "generating" | "failed"; error?: string } | undefined;
+	getClipCaptureProgress?: (clipId: string) => number | null;
 	/** Reference to attached luma (if this clip has a mask) */
 	attachedLuma?: LumaRef;
 	/** Callback when mask badge is clicked - passes the CONTENT clip indices */
@@ -235,12 +236,19 @@ export class ClipComponent {
 		const state = clipId ? this.options.getClipGenerationState?.(clipId) : undefined;
 		const generating = state?.status === "generating";
 
+		const progress = clipId ? (this.options.getClipCaptureProgress?.(clipId) ?? null) : null;
+		const preparing = progress !== null;
+
 		this.element.classList.toggle("ss-clip--generating", generating);
-		if (generating) this.element.setAttribute("aria-busy", "true");
+		this.element.classList.toggle("ss-clip--preparing", preparing);
+		if (preparing) this.element.style.setProperty("--ss-capture-progress", String(progress));
+		if (generating || preparing) this.element.setAttribute("aria-busy", "true");
 		else this.element.removeAttribute("aria-busy");
 
 		this.element.classList.toggle("ss-clip--error", state?.status === "failed" || this.currentError !== null);
-		this.element.title = state?.status === "failed" ? (state.error ?? "Generation failed") : "";
+		let title = preparing ? "Preparing smooth playback" : "";
+		if (state?.status === "failed") title = state.error ?? "Generation failed";
+		this.element.title = title;
 	}
 
 	/** Show/hide error state based on clip error */