diff --git a/src/components/onboarding/StepGalleryPreview.tsx b/src/components/onboarding/StepGalleryPreview.tsx
index 16118f0..292bdbd 100644
--- a/src/components/onboarding/StepGalleryPreview.tsx
+++ b/src/components/onboarding/StepGalleryPreview.tsx
@@ -3,19 +3,16 @@ import { FakeTile, ReplayButton } from "./fakes";
 
 const REVEAL_MS = 280;
 
+// Two rows (cols-4) keeps the explainer text visible without scrolling.
 const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] = [
   {},
   { favorite: true },
   {},
   { duration: "1:24" },
   { rating: 5 },
-  {},
   { favorite: true, rating: 3 },
-  {},
   { duration: "0:09" },
   {},
-  { rating: 4 },
-  {},
 ];
 
 const TILE_COUNT = TILE_PROPS.length;
diff --git a/src/components/onboarding/StepSearchDemo.tsx b/src/components/onboarding/StepSearchDemo.tsx
index e2a4545..35dd510 100644
--- a/src/components/onboarding/StepSearchDemo.tsx
+++ b/src/components/onboarding/StepSearchDemo.tsx
@@ -82,8 +82,10 @@ export function StepSearchDemo() {
         </span>
       </div>
 
-      {/* Results — fixed-width tiles, centered, so 1/2/3 results all look right */}
-      <div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}>
+      {/* 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"}`}>
         {demo.results.map((src, i) => (
           <div key={`${demoIndex}-${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" />