diff --git a/pitch-deck/components/slides/SDKDemoSlide.tsx b/pitch-deck/components/slides/SDKDemoSlide.tsx
index b12b9e2..4565085 100644
--- a/pitch-deck/components/slides/SDKDemoSlide.tsx
+++ b/pitch-deck/components/slides/SDKDemoSlide.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { motion, AnimatePresence } from 'framer-motion'
 import Image from 'next/image'
 import { Language } from '@/lib/types'
@@ -43,6 +43,26 @@ export default function SDKDemoSlide({ lang }: SDKDemoSlideProps) {
   const [fullscreen, setFullscreen] = useState(false)
   const [autoPlay, setAutoPlay] = useState(true)
 
+  // Track which images have actually loaded so we never cross-fade to a blank
+  // frame. While the target image is still fetching, `shown` stays on the
+  // previous loaded one — this eliminates the flash of empty canvas the user
+  // hit on the first pass through the carousel.
+  const loadedRef = useRef<Set<number>>(new Set())
+  const [shown, setShown] = useState(0)
+
+  const handleLoaded = useCallback((idx: number) => {
+    loadedRef.current.add(idx)
+    // If the user is currently waiting on this image, reveal it immediately.
+    // Otherwise the preceding loaded image keeps showing — no blank flash.
+    if (idx === current) setShown(idx)
+  }, [current])
+
+  useEffect(() => {
+    if (loadedRef.current.has(current)) {
+      setShown(current)
+    }
+  }, [current])
+
   const next = useCallback(() => {
     setCurrent(i => (i + 1) % SCREENSHOTS.length)
   }, [])
@@ -101,25 +121,31 @@ export default function SDKDemoSlide({ lang }: SDKDemoSlideProps) {
                 </button>
               </div>
 
-              {/* Screenshot */}
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={current}
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.3 }}
-                >
-                  <Image
-                    src={`/screenshots/${shot.file}`}
-                    alt={de ? shot.de : shot.en}
-                    width={1920}
-                    height={1080}
-                    className="w-full h-auto"
-                    priority={current < 3}
-                  />
-                </motion.div>
-              </AnimatePresence>
+              {/* Screenshot stack — all images mount at once so we can cross-fade
+                  between them by toggling opacity. AnimatePresence mode="wait"
+                  unmounts before the next mounts, which forces a cold fetch and
+                  produces a blank frame; the stack avoids both. */}
+              <div className="relative aspect-[1920/1080] bg-black/40">
+                {SCREENSHOTS.map((s, idx) => (
+                  <div
+                    key={s.file}
+                    className="absolute inset-0 transition-opacity duration-300 ease-out"
+                    style={{ opacity: idx === shown ? 1 : 0 }}
+                    aria-hidden={idx !== shown}
+                  >
+                    <Image
+                      src={`/screenshots/${s.file}`}
+                      alt={de ? s.de : s.en}
+                      fill
+                      sizes="(max-width: 1024px) 100vw, 1024px"
+                      className="object-cover"
+                      priority={idx < 3}
+                      loading={idx < 3 ? undefined : 'eager'}
+                      onLoadingComplete={() => handleLoaded(idx)}
+                    />
+                  </div>
+                ))}
+              </div>
             </div>
 
             {/* Navigation arrows */}