The SDK Live Demo was janky: AnimatePresence mode="wait" unmounted the
current Image before mounting the next, so every advance forced a cold
fetch and left an empty black frame until the new image decoded. Only
the first three screenshots had priority; the rest fetched lazily, so
the first pass through the carousel repeatedly stalled.
Replaces the single swap-in/swap-out Image with a stack of 23 images
layered in an aspect-[1920/1080] container. Cross-fades are now pure
CSS opacity on always-mounted nodes, so there is no unmount and no gap.
Key details:
- priority on the first 3 (triggers <link rel="preload">); loading=eager
on the remaining 20 so the browser starts all fetches at mount rather
than deferring via IntersectionObserver.
- sizes="(max-width: 1024px) 100vw, 1024px" lets next/image serve the
actual displayed resolution instead of the 1920 hint — fewer bytes,
faster first paint.
- Load-gated reveal: a new `shown` state trails `current` until the
target image fires onLoadingComplete. If the user clicks ahead of
the network, the previous loaded screenshot stays visible — no more
black flashes before images arrive.
Second pass through the carousel is instant (images are in-cache).
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
The SDK live-demo slide renders a fake browser URL bar to frame each
screenshot. It used admin.breakpilot.ai, but the actual demo instance
investors should be able to reach lives on admin-dev.breakpilot.ai.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
