diff --git a/src/components/onboarding/StepSearchDemo.tsx b/src/components/onboarding/StepSearchDemo.tsx
index 35dd510..be81f3e 100644
--- a/src/components/onboarding/StepSearchDemo.tsx
+++ b/src/components/onboarding/StepSearchDemo.tsx
@@ -84,10 +84,16 @@ export function StepSearchDemo() {
 
       {/* Results — hidden (not greyed) until the query finishes typing, so it
           doesn't look like the app is reading the user's mind. Space is held
-          by the invisible tiles so the layout doesn't jump when they appear. */}
-      <div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}>
+          by the invisible tiles so the layout doesn't jump when they appear.
+          Keyed by demoIndex so switching demos remounts the row fresh at
+          opacity-0 instead of fading the new images out from the previous
+          demo's visible state. */}
+      <div
+        key={demoIndex}
+        className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-0"}`}
+      >
         {demo.results.map((src, i) => (
-          <div key={`${demoIndex}-${i}`} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
+          <div key={i} className="aspect-square w-36 overflow-hidden rounded-xl bg-white/[0.04]">
             <img src={src} alt="" className="h-full w-full object-cover" />
           </div>
         ))}