playback flashes fixing

frontend/src/hooks/useReversePlayback.ts

@@ -367,9 +367,10 @@ export function useReversePlayback(
       () => video.removeEventListener('ended', onEnded),
     );
 
-    // Start playback to trigger buffering
+    // Start playback to trigger buffering, but from near the end
+    // to avoid showing frame 0 (which would flash the target page)
     video.muted = true;
-    video.currentTime = 0;
+    video.currentTime = actualDuration - 0.1;
     video.play().catch(() => undefined);
 
     // Fallback timeout

frontend/src/hooks/useTransitionPlayback.ts

@@ -215,6 +215,7 @@ export function useTransitionPlayback(
   const preloadRef = useRef(preload);
   const startReverseRef = useRef<(() => Promise<void>) | null>(null);
   const stopReverseRef = useRef<(() => void) | null>(null);
+  const isReverseModeRef = useRef(false);
 
   const sourceUrl = useMemo(() => {
     if (!transition) return '';
@@ -254,12 +255,13 @@ export function useTransitionPlayback(
       const video = videoRef.current;
       if (video) {
         video.pause();
-        // Seek back slightly to ensure last frame is visible
-        // Some browsers show black after 'ended' event when currentTime === duration
+        // For forward playback, always seek to near-end to preserve last frame
+        // (browsers may auto-reset to 0 on 'ended' event before our handler runs)
         if (
+          !isReverseModeRef.current &&
           video.duration &&
           Number.isFinite(video.duration) &&
-          video.currentTime >= video.duration - 0.1
+          video.duration > 0.1
         ) {
           video.currentTime = Math.max(0, video.duration - 0.05);
         }
@@ -383,6 +385,7 @@ export function useTransitionPlayback(
     setPhase('preparing');
 
     const isReverseMode = currentTransition.reverseMode === 'reverse';
+    isReverseModeRef.current = isReverseMode;
     const configuredDurationSec = Number(currentTransition.durationSec);
 
     const getMediaErrorDetails = () => {