diff --git a/js/src/features/particles/media-particle-view.tsx b/js/src/features/particles/media-particle-view.tsx
index 78cdcaa..1d5d0a2 100644
--- a/js/src/features/particles/media-particle-view.tsx
+++ b/js/src/features/particles/media-particle-view.tsx
@@ -94,7 +94,12 @@ export const MediaParticleView = forwardRef<MediaParticleHandle, MediaParticleVi
   const handleTimeUpdate = (e: React.SyntheticEvent<HTMLAudioElement | HTMLVideoElement>) => {
     const { currentTime: time, duration } = e.currentTarget;
     setCurrentTime(time);
-    if (duration > 0) onProgress?.(time / duration);
+    // WebM files from MediaRecorder (screen recordings) often report Infinity/NaN
+    // duration until fully buffered — fall back to the known duration from metadata.
+    const effectiveDuration = Number.isFinite(duration) && duration > 0
+      ? duration
+      : particle.properties.duration_ms / 1000;
+    if (effectiveDuration > 0) onProgress?.(time / effectiveDuration);
   };
 
   const attachmentOverlay = attachments.length > 0 && (