refactor(onboarding): play animations once with replay, fix search demo results

Two refinements from testing:
- the gallery-reveal, pipeline-drain, and search-typing animations looped
  forever; they now play once and stop, with a Replay button to re-run
- the search demo's result tiles didn't match the queries. Now: a filename
  search returns one exact file, '/s golden sunset over water' shows only
  ocean-sunset stills (added a second), and '/t landscape' shows the three
  actual landscapes (valleys + alpine lake), not a foggy forest

src/components/onboarding/StepGalleryPreview.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from "react";
-import { FakeTile } from "./fakes";
+import { FakeTile, ReplayButton } from "./fakes";
 
-const TILE_COUNT = 12;
+const REVEAL_MS = 280;
-const REVEAL_MS = 350;
 
 const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] = [
   {},
@@ -19,17 +18,20 @@ const TILE_PROPS: { favorite?: boolean; rating?: number; duration?: string }[] =
   {},
 ];
 
-/// Placeholder tiles "loading in" one by one, looping, to show how the grid
+const TILE_COUNT = TILE_PROPS.length;
-/// fills while thumbnails are generated.
+
+/// Placeholder tiles "loading in" once (skeleton → image), then stopping fully
+/// revealed with a replay control.
 export function StepGalleryPreview() {
   const [revealed, setRevealed] = useState(0);
 
   useEffect(() => {
-    const timer = setInterval(() => {
+    if (revealed >= TILE_COUNT) return;
-      setRevealed((current) => (current >= TILE_COUNT + 4 ? 0 : current + 1));
+    const timer = setTimeout(() => setRevealed((n) => n + 1), REVEAL_MS);
-    }, REVEAL_MS);
+    return () => clearTimeout(timer);
-    return () => clearInterval(timer);
+  }, [revealed]);
-  }, []);
+
+  const finished = revealed >= TILE_COUNT;
 
   return (
     <div>
@@ -44,16 +46,19 @@ export function StepGalleryPreview() {
         ))}
       </div>
 
-      <div className="mt-6 divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
+      <div className="mt-6 flex items-start justify-between gap-4">
-        <p className="py-2.5">
+        <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
+          <p className="pb-2.5">
             <span className="text-gray-300">Click any tile</span> to open the lightbox — keyboard navigation,
             zoom, inline tag editing, ratings, and a full video player.
           </p>
-        <p className="py-2.5">
+          <p className="pt-2.5">
             <span className="text-gray-300">The toolbar</span> filters by type, favorites, or rating, sorts by
             date/name/size, and switches grid density.
           </p>
         </div>
+        {finished ? <ReplayButton onClick={() => setRevealed(0)} /> : null}
+      </div>
     </div>
   );
 }

src/components/onboarding/StepPipeline.tsx

@@ -1,29 +1,40 @@
 import { useEffect, useState } from "react";
-import { FakeProgressBar, FakeStageTag } from "./fakes";
+import { FakeProgressBar, FakeStageTag, ReplayButton } from "./fakes";
 
 const STAGES = ["Thumbnails", "Metadata", "Embeddings", "Tags"] as const;
 const STAGE_TOTAL = 128;
-const TICK_MS = 90;
+const TICK_MS = 80;
-const STEP_PER_TICK = 6;
+const STEP_PER_TICK = 8;
 
-/// A looping, entirely fake render of the background-tasks bar: each stage
+/// A one-shot fake of the background-tasks bar: each stage drains in order,
-/// drains in order, then the cycle restarts.
+/// then it stops at "all done" with a replay control.
 export function StepPipeline() {
   const [stageIndex, setStageIndex] = useState(0);
-  const [done, setDone] = useState(0);
+  const [filled, setFilled] = useState(0);
+
+  const finished = stageIndex >= STAGES.length;
 
   useEffect(() => {
-    const timer = setInterval(() => {
+    if (finished) return;
-      setDone((current) => {
+    const timer = setTimeout(() => {
-        if (current + STEP_PER_TICK < STAGE_TOTAL) return current + STEP_PER_TICK;
+      // Read from the closure and call setters directly — nesting one setter
-        setStageIndex((stage) => (stage + 1) % STAGES.length);
+      // inside another's updater double-advances under React StrictMode.
-        return 0;
+      if (filled + STEP_PER_TICK < STAGE_TOTAL) {
-      });
+        setFilled(filled + STEP_PER_TICK);
+      } else {
+        setStageIndex(stageIndex + 1);
+        setFilled(0);
+      }
     }, TICK_MS);
-    return () => clearInterval(timer);
+    return () => clearTimeout(timer);
-  }, []);
+  }, [filled, stageIndex, finished]);
 
-  const remaining = STAGE_TOTAL - done;
+  const replay = () => {
+    setStageIndex(0);
+    setFilled(0);
+  };
+
+  const remaining = STAGE_TOTAL - filled;
 
   return (
     <div>
@@ -41,33 +52,38 @@ export function StepPipeline() {
       <div className="mt-3 rounded-lg border border-white/[0.07] bg-white/[0.02] px-4 py-3">
         <div className="flex items-center gap-3">
           <span className="relative flex h-1.5 w-1.5 shrink-0">
+            {!finished ? (
               <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-400 opacity-60" />
-            <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-blue-400" />
+            ) : null}
+            <span className={`relative inline-flex h-1.5 w-1.5 rounded-full ${finished ? "bg-emerald-400" : "bg-blue-400"}`} />
           </span>
           <span className="text-[13px] font-medium text-white/60">Holiday Photos</span>
           <div className="flex items-center gap-1.5">
             {STAGES.map((stage, i) => (
               <FakeStageTag
                 key={stage}
-                label={i === stageIndex ? `${stage} · ${remaining}` : stage}
+                label={!finished && i === stageIndex ? `${stage} · ${remaining}` : stage}
-                state={i < stageIndex ? "done" : i === stageIndex ? "active" : "waiting"}
+                state={finished || i < stageIndex ? "done" : i === stageIndex ? "active" : "waiting"}
               />
             ))}
           </div>
-          <FakeProgressBar fraction={done / STAGE_TOTAL} className="ml-auto w-24" />
+          <FakeProgressBar fraction={finished ? 1 : filled / STAGE_TOTAL} className="ml-auto w-24" />
         </div>
       </div>
 
-      <div className="mt-6 divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
+      <div className="mt-6 flex items-start justify-between gap-4">
-        <p className="py-2.5">
+        <div className="divide-y divide-white/[0.05] text-xs leading-relaxed text-gray-500">
+          <p className="pb-2.5">
             <span className="text-gray-300">It's all interruptible.</span> Close the app whenever you like —
             the queue picks up where it left off next launch.
           </p>
-        <p className="py-2.5">
+          <p className="pt-2.5">
             <span className="text-gray-300">Per-folder control.</span> Right-click a folder in the sidebar to
             pause its background work, and click the bar itself to expand a detailed per-folder view.
           </p>
         </div>
+        {finished ? <ReplayButton onClick={replay} /> : null}
+      </div>
     </div>
   );
 }

src/components/onboarding/StepSearchDemo.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import { SEARCH_RESULTS } from "./fakes";
+import { ReplayButton, SEARCH_RESULTS } from "./fakes";
 
 const DEMOS = [
   {
     query: "beach-day_042.jpg",
     mode: "Filename",
-    description: "Plain text matches file names — the default, instant search.",
+    description: "Plain text matches file names — the default, instant search. One name, one file.",
     results: SEARCH_RESULTS.filename,
   },
   {
@@ -25,25 +25,39 @@ const DEMOS = [
 const TYPE_MS = 55;
 const HOLD_MS = 2600;
 
-/// A mock search bar that "types" each demo query, shows fake results, and
+/// Types each demo query, shows matching results, advances through all three
-/// cycles to the next mode.
+/// modes once, then stops on the last with a replay control.
 export function StepSearchDemo() {
   const [demoIndex, setDemoIndex] = useState(0);
   const [typed, setTyped] = useState(0);
+  const [finished, setFinished] = useState(false);
 
   const demo = DEMOS[demoIndex];
+  const isLastDemo = demoIndex === DEMOS.length - 1;
 
   useEffect(() => {
+    if (finished) return;
     if (typed < demo.query.length) {
       const timer = setTimeout(() => setTyped((n) => n + 1), TYPE_MS);
       return () => clearTimeout(timer);
     }
+    // Fully typed: hold, then advance — or finish on the last demo.
     const timer = setTimeout(() => {
-      setDemoIndex((i) => (i + 1) % DEMOS.length);
+      if (isLastDemo) {
+        setFinished(true);
+      } else {
+        setDemoIndex((i) => i + 1);
         setTyped(0);
+      }
     }, HOLD_MS);
     return () => clearTimeout(timer);
-  }, [typed, demo.query.length]);
+  }, [typed, demo.query.length, isLastDemo, finished]);
+
+  const replay = () => {
+    setDemoIndex(0);
+    setTyped(0);
+    setFinished(false);
+  };
 
   const fullyTyped = typed >= demo.query.length;
 
@@ -61,23 +75,26 @@ export function StepSearchDemo() {
         </svg>
         <span className="text-sm text-white">
           {demo.query.slice(0, typed)}
-          <span className="animate-pulse text-gray-500">|</span>
+          {!finished ? <span className="animate-pulse text-gray-500">|</span> : null}
         </span>
         <span className="ml-auto shrink-0 rounded-md border border-sky-400/25 bg-sky-500/10 px-2 py-0.5 text-[11px] font-medium text-sky-300">
           {demo.mode}
         </span>
       </div>
 
-      {/* Fake results */}
+      {/* Results — fixed-width tiles, centered, so 1/2/3 results all look right */}
-      <div className={`mt-3 grid grid-cols-3 gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}>
+      <div className={`mt-3 flex flex-wrap justify-center gap-1.5 transition-opacity duration-300 ${fullyTyped ? "opacity-100" : "opacity-30"}`}>
         {demo.results.map((src, i) => (
-          <div key={`${demoIndex}-${i}`} className="aspect-square overflow-hidden rounded-xl bg-white/[0.04]">
+          <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" />
           </div>
         ))}
       </div>
 
-      <p className="mt-4 min-h-10 text-xs leading-relaxed text-gray-500">{demo.description}</p>
+      <div className="mt-4 flex min-h-10 items-start justify-between gap-4">
+        <p className="text-xs leading-relaxed text-gray-500">{demo.description}</p>
+        {finished ? <ReplayButton onClick={replay} /> : null}
+      </div>
     </div>
   );
 }

src/components/onboarding/fakes.tsx

@@ -3,6 +3,7 @@
 // demo progress — so new users see the real UI's shapes before their own
 // library exists.
 import sunset from "../../assets/onboarding/sunset.webp";
+import sunset2 from "../../assets/onboarding/sunset2.webp";
 import beach from "../../assets/onboarding/beach.webp";
 import landscape1 from "../../assets/onboarding/landscape1.webp";
 import landscape2 from "../../assets/onboarding/landscape2.webp";
@@ -37,11 +38,14 @@ export function fakeImage(index: number): string {
   return FAKE_IMAGES[index % FAKE_IMAGES.length];
 }
 
-// Curated result sets so each search demo returns thematically right images.
+// Result sets matched to what each query would genuinely return.
+// - filename: one exact file (a filename search hits a specific name)
+// - semantic "golden sunset over water": only the ocean-sunset stills
+// - tags "landscape": mountain valleys + the alpine lake (all landscapes)
 export const SEARCH_RESULTS = {
-  filename: [beach, dunes, sunset], // "beach-day_042.jpg"
+  filename: [beach],
-  semantic: [sunset, alpinelake, beach], // "golden sunset over water"
+  semantic: [sunset, sunset2],
-  tags: [landscape1, landscape2, forest], // "landscape"
+  tags: [landscape1, landscape2, alpinelake],
 } as const;
 
 // Abstract gradient blobs/ticks for the Explore & Timeline mini-previews,
@@ -133,6 +137,21 @@ export function FakeProgressBar({ fraction, className = "" }: { fraction: number
   );
 }
 
+export function ReplayButton({ onClick, label = "Replay" }: { onClick: () => void; label?: string }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="inline-flex items-center gap-1.5 rounded-md border border-white/10 bg-white/[0.04] px-2.5 py-1 text-[11px] text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-200"
+    >
+      <svg className="h-3 w-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12a7.5 7.5 0 0012.9 5.3M19.5 12A7.5 7.5 0 006.6 6.7M4.5 6.5v3h3M19.5 17.5v-3h-3" />
+      </svg>
+      {label}
+    </button>
+  );
+}
+
 export function formatBytes(bytes: number): string {
   if (bytes >= 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
   if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(0)} MB`;