feat(mosaic): horizontal scrolling rows, random order, click-through links

- Rewrite mosaic as 3 horizontal rows with alternating scroll directions
- Each row scrolls at different speeds for organic feel
- Images preserve aspect ratio, fade in on load, hidden on error
- Click opens story on mediastorm.com (link from nav_config API)
- Hover pauses row, shows tooltip with formatted metadata
- Randomized query suggestions on landing page
- Autofocus on search input
- Stats: "100+ Awards" instead of "4 Emmy Awards"

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/app.css

@@ -33,3 +33,21 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+@keyframes scroll-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes scroll-right {
+  from {
+    transform: translateX(-50%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

frontend/src/lib/Landing.svelte

@@ -10,13 +10,36 @@
   let { onsearch }: Props = $props();
   let stories: LandingStory[] = $state([]);
 
-  const EXAMPLE_QUERIES = [
+  const ALL_QUERIES = [
     "Emmy-winning documentaries",
     "Photo essays about Africa",
     "Stories about climate change",
     "Most awarded documentaries",
+    "War and conflict stories",
+    "Multimedia projects from 2010s",
+    "Stories about immigration",
+    "Sports documentaries",
+    "Stories about music",
+    "Environmental stories",
+    "Stories from the Middle East",
+    "Health and medicine stories",
+    "Stories about education",
+    "Portrait-driven stories",
+    "Stories from Asia",
+    "Social justice documentaries",
   ];
 
+  function pickRandom(arr: string[], count: number): string[] {
+    const copy = [...arr];
+    for (let i = copy.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [copy[i], copy[j]] = [copy[j], copy[i]];
+    }
+    return copy.slice(0, count);
+  }
+
+  const EXAMPLE_QUERIES = pickRandom(ALL_QUERIES, 4);
+
   $effect(() => {
     fetchStories().then((s) => (stories = s));
   });
@@ -45,8 +68,8 @@
         <div class="stat-label">Years</div>
       </div>
       <div class="stat">
-        <div class="stat-value">4</div>
-        <div class="stat-label">Emmy Awards</div>
+        <div class="stat-value">100+</div>
+        <div class="stat-label">Awards</div>
       </div>
     </div>
 
@@ -81,6 +104,7 @@
       rgba(0, 0, 0, 0.4) 100%
     );
     z-index: 1;
+    pointer-events: none;
   }
 
   .center {
@@ -92,6 +116,11 @@
     justify-content: center;
     z-index: 2;
     padding: 40px 24px;
+    pointer-events: none;
+  }
+
+  .center :global(*) {
+    pointer-events: auto;
   }
 
   .logo {

frontend/src/lib/Mosaic.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import type { LandingStory } from "./api/client";
 
   interface Props {
@@ -10,15 +11,34 @@
   let hoveredStory: LandingStory | null = $state(null);
   let mouseX = $state(0);
   let mouseY = $state(0);
-  let columns: LandingStory[][] = $state([]);
-  let columnCount = $state(5);
-  let animationReady = $state(false);
-  let columnDurations: number[] = $state([]);
-  let pausedColumn: number | null = $state(null);
+  let pausedRow: number | null = $state(null);
+
+  let tooltipMeta = $derived.by(() => {
+    if (!hoveredStory) return "";
+    return [
+      hoveredStory.year ? String(hoveredStory.year) : "",
+      hoveredStory.media_type ? formatMediaType(hoveredStory.media_type) : "",
+      hoveredStory.awards_count > 0 ? `${hoveredStory.awards_count} Award${hoveredStory.awards_count > 1 ? "s" : ""}` : "",
+    ].filter(Boolean).join(" · ");
+  });
+
+  const MEDIA_TYPE_LABELS: Record<string, string> = {
+    client_work: "Client Work",
+    documentary: "Documentary",
+    crisis_guide: "Crisis Guide",
+    workshop: "Workshop",
+  };
+
+  function formatMediaType(raw: string): string {
+    return MEDIA_TYPE_LABELS[raw] || raw.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase());
+  }
 
-  const SCROLL_SPEED = 15; // px per second
-  const GAP = 3; // px between images
-  const TARGET_HEIGHT_MULTIPLIER = 1.5;
+  let containerEl: HTMLDivElement | undefined;
+  let built = false;
+
+  const ROW_SPEEDS = [12, 35, 20]; // px/s
+  const ROW_COUNT = 3;
+  const GAP = 3;
 
   function shuffle(arr: LandingStory[]): LandingStory[] {
     const copy = [...arr];
@@ -29,50 +49,105 @@
     return copy;
   }
 
-  function getColumnCount(): number {
-    if (typeof window === "undefined") return 5;
-    if (window.innerWidth <= 640) return 2;
-    if (window.innerWidth <= 1024) return 3;
-    return 5;
+  function getRowCount(): number {
+    return ROW_COUNT;
   }
 
-  function distributeToColumns(
-    items: LandingStory[],
-    numCols: number,
-  ): LandingStory[][] {
-    const cols: LandingStory[][] = Array.from({ length: numCols }, () => []);
-    const heights: number[] = new Array(numCols).fill(0);
-
-    // Estimate aspect ratio from poster images — assume 3:2 as default
-    // Actual heights will be measured after render
-    const estimatedRatio = 2 / 3;
-    const colWidth = 1; // normalized, all columns equal width
-
-    for (const item of items) {
-      // Find shortest column
-      let minIdx = 0;
-      for (let c = 1; c < numCols; c++) {
-        if (heights[c] < heights[minIdx]) minIdx = c;
-      }
-      cols[minIdx].push(item);
-      heights[minIdx] += colWidth * estimatedRatio + GAP;
+  function distributeToRows(items: LandingStory[], numRows: number): LandingStory[][] {
+    const rows: LandingStory[][] = Array.from({ length: numRows }, () => []);
+    for (let i = 0; i < items.length; i++) {
+      rows[i % numRows].push(items[i]);
     }
+    return rows;
+  }
+
+  function buildAndRender(storiesList: LandingStory[]) {
+    if (!containerEl || storiesList.length === 0) return;
+
+    const rowHeight = Math.floor(window.innerHeight / ROW_COUNT);
+    const numRows = getRowCount();
+    const shuffled = shuffle(storiesList);
+    const rows = distributeToRows(shuffled, numRows);
+
+    containerEl.innerHTML = "";
+
+    rows.forEach((rowStories, rowIdx) => {
+      // Outer wrapper — clips overflow, fixed height
+      const wrapper = document.createElement("div");
+      wrapper.style.cssText = `overflow:hidden;height:${rowHeight}px;flex-shrink:0;`;
+
+      // Inner track — holds all images, width:max-content, this gets animated
+      const track = document.createElement("div");
+      track.style.cssText = `display:flex;gap:${GAP}px;width:max-content;will-change:transform;`;
+
+      // Images twice for seamless loop
+      for (let pass = 0; pass < 2; pass++) {
+        for (const story of rowStories) {
+          const link = document.createElement("a");
+          link.href = story.link;
+          link.target = "_blank";
+          link.rel = "noopener";
+          const estimatedWidth = Math.round(rowHeight * 1.5);
+          link.style.cssText = `display:block;flex-shrink:0;height:${rowHeight}px;width:${estimatedWidth}px;overflow:hidden;`;
+
+          const img = document.createElement("img");
+          img.src = story.poster;
+          img.alt = story.name;
+          img.loading = "lazy";
+          img.style.cssText = `width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 0.5s,transform 0.4s;`;
+
+          img.onload = () => {
+            img.style.opacity = "0.55";
+            // Adjust cell width to real aspect ratio
+            const realWidth = Math.round(rowHeight * (img.naturalWidth / img.naturalHeight));
+            link.style.width = `${realWidth}px`;
+          };
+          img.onerror = () => { link.style.display = "none"; };
+
+          link.addEventListener("mouseenter", (e) => {
+            hoveredStory = story;
+            pausedRow = rowIdx;
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+            if (img.complete && img.naturalWidth > 0) {
+              img.style.opacity = "0.8";
+              img.style.transform = "scale(1.05)";
+            }
+          });
+
+          link.addEventListener("mouseleave", () => {
+            hoveredStory = null;
+            pausedRow = null;
+            if (img.complete && img.naturalWidth > 0) {
+              img.style.opacity = "0.55";
+              img.style.transform = "";
+            }
+          });
+
+          link.appendChild(img);
+          track.appendChild(link);
+        }
+      }
 
-    return cols;
-  }
-
-  function buildColumns() {
-    columnCount = getColumnCount();
-    const shuffled = shuffle(stories);
-    columns = distributeToColumns(shuffled, columnCount);
-    animationReady = false;
-  }
+      wrapper.appendChild(track);
+      containerEl!.appendChild(wrapper);
+    });
+
+    // Measure track widths and start animations
+    requestAnimationFrame(() => {
+      const wrappers = containerEl!.children;
+      for (let i = 0; i < wrappers.length; i++) {
+        const track = wrappers[i].firstChild as HTMLElement;
+        const halfWidth = track.scrollWidth / 2;
+        const speed = ROW_SPEEDS[i % ROW_SPEEDS.length];
+        const duration = halfWidth / speed;
+        const direction = i % 2 === 0 ? "scroll-left" : "scroll-right";
+
+        track.style.animation = `${direction} ${duration}s linear infinite`;
+      }
+    });
 
-  function handleMouseEnter(story: LandingStory, colIdx: number, e: MouseEvent) {
-    hoveredStory = story;
-    pausedColumn = colIdx;
-    mouseX = e.clientX;
-    mouseY = e.clientY;
+    built = true;
   }
 
   function handleMouseMove(e: MouseEvent) {
@@ -80,75 +155,40 @@
     mouseY = e.clientY;
   }
 
-  function handleMouseLeave() {
-    hoveredStory = null;
-    pausedColumn = null;
-  }
-
-  let columnsEl: HTMLDivElement | undefined = $state(undefined);
-
-  function measureAndAnimate() {
-    if (!columnsEl) return;
-    const colEls = columnsEl.querySelectorAll<HTMLElement>(".mosaic-column");
-    const durations: number[] = [];
-
-    for (const colEl of colEls) {
-      // Total height = doubled content, so half = one set
-      const halfHeight = colEl.scrollHeight / 2;
-      const duration = halfHeight / SCROLL_SPEED;
-      durations.push(duration);
-    }
-
-    columnDurations = durations;
-    animationReady = true;
-  }
-
-  function waitForImages(container: HTMLElement): Promise<void> {
-    const imgs = container.querySelectorAll<HTMLImageElement>("img");
-    const promises = Array.from(imgs).map(
-      (img) =>
-        new Promise<void>((resolve) => {
-          if (img.complete) {
-            resolve();
-          } else {
-            img.onload = () => resolve();
-            img.onerror = () => resolve();
-          }
-        }),
-    );
-    return Promise.all(promises).then(() => {});
-  }
-
-  // Build columns when stories change
+  // Pause/unpause row track on hover
   $effect(() => {
-    if (stories.length > 0) {
-      buildColumns();
-    }
-  });
-
-  // Measure after render + images loaded
-  $effect(() => {
-    if (columns.length > 0 && columnsEl) {
-      waitForImages(columnsEl).then(() => measureAndAnimate());
+    if (!containerEl) return;
+    const wrappers = containerEl.children;
+    for (let i = 0; i < wrappers.length; i++) {
+      const track = wrappers[i].firstChild as HTMLElement | null;
+      if (track) {
+        track.style.animationPlayState = pausedRow === i ? "paused" : "running";
+      }
     }
   });
 
-  // Resize handler
-  let resizeTimer: ReturnType<typeof setTimeout> | undefined;
+  onMount(() => {
+    const unsubscribe = $effect.root(() => {
+      $effect(() => {
+        if (stories.length > 0 && !built) {
+          buildAndRender(stories);
+        }
+      });
+    });
 
-  $effect(() => {
+    let resizeTimer: ReturnType<typeof setTimeout>;
     function onResize() {
       clearTimeout(resizeTimer);
       resizeTimer = setTimeout(() => {
-        const newCount = getColumnCount();
-        if (newCount !== columnCount) {
-          buildColumns();
-        }
+        built = false;
+        buildAndRender(stories);
       }, 200);
     }
 
     window.addEventListener("resize", onResize);
+
     return () => {
+      unsubscribe();
       window.removeEventListener("resize", onResize);
       clearTimeout(resizeTimer);
     };
@@ -156,38 +196,7 @@
 </script>
 
 <div class="mosaic" onmousemove={handleMouseMove}>
-  <div class="mosaic-columns" bind:this={columnsEl}>
-    {#each columns as colStories, colIdx}
-      <div
-        class="mosaic-column"
-        class:scroll-up={animationReady && colIdx % 2 === 0}
-        class:scroll-down={animationReady && colIdx % 2 === 1}
-        class:paused={pausedColumn === colIdx}
-        style="--scroll-duration: {columnDurations[colIdx] || 30}s;"
-      >
-        <!-- Original set -->
-        {#each colStories as story}
-          <div
-            class="mosaic-cell"
-            onmouseenter={(e) => handleMouseEnter(story, colIdx, e)}
-            onmouseleave={handleMouseLeave}
-          >
-            <img src={story.poster} alt={story.name} />
-          </div>
-        {/each}
-        <!-- Duplicate for seamless loop -->
-        {#each colStories as story}
-          <div
-            class="mosaic-cell"
-            onmouseenter={(e) => handleMouseEnter(story, colIdx, e)}
-            onmouseleave={handleMouseLeave}
-          >
-            <img src={story.poster} alt={story.name} />
-          </div>
-        {/each}
-      </div>
-    {/each}
-  </div>
+  <div class="mosaic-rows" bind:this={containerEl}></div>
 
   {#if hoveredStory}
     <div
@@ -195,15 +204,9 @@
       style="left: {mouseX + 16}px; top: {mouseY + 16}px;"
     >
       <div class="tooltip-name">{hoveredStory.name}</div>
-      <div class="tooltip-meta">
-        {hoveredStory.year || ""}
-        {#if hoveredStory.media_type}
-          &middot; {hoveredStory.media_type}
-        {/if}
-        {#if hoveredStory.awards_count > 0}
-          &middot; {hoveredStory.awards_count} Award{hoveredStory.awards_count > 1 ? "s" : ""}
-        {/if}
-      </div>
+      {#if tooltipMeta}
+        <div class="tooltip-meta">{tooltipMeta}</div>
+      {/if}
     </div>
   {/if}
 </div>
@@ -215,64 +218,17 @@
     overflow: hidden;
   }
 
-  .mosaic-columns {
-    display: flex;
-    gap: 3px;
-    height: 100%;
-    padding: 0 3px;
-  }
-
-  .mosaic-column {
-    flex: 1;
+  .mosaic-rows {
     display: flex;
     flex-direction: column;
     gap: 3px;
-    will-change: transform;
-  }
-
-  .mosaic-column.scroll-up {
-    animation: scroll-up var(--scroll-duration) linear infinite;
-  }
-
-  .mosaic-column.scroll-down {
-    animation: scroll-down var(--scroll-duration) linear infinite;
-  }
-
-  .mosaic-column.paused {
-    animation-play-state: paused;
-  }
-
-  @keyframes scroll-up {
-    from { transform: translateY(0); }
-    to { transform: translateY(-50%); }
-  }
-
-  @keyframes scroll-down {
-    from { transform: translateY(-50%); }
-    to { transform: translateY(0); }
-  }
-
-  .mosaic-cell {
-    overflow: hidden;
-    flex-shrink: 0;
-  }
-
-  .mosaic-cell img {
-    width: 100%;
-    height: auto;
-    display: block;
-    opacity: 0.55;
-    transition: opacity 0.3s, transform 0.4s;
-  }
-
-  .mosaic-cell:hover img {
-    opacity: 0.8;
-    transform: scale(1.03);
+    height: 100%;
   }
 
   .tooltip {
     position: fixed;
     z-index: 10;
+    max-width: 250px;
     background: rgba(0, 0, 0, 0.7);
     backdrop-filter: blur(10px);
     border-radius: 8px;
@@ -290,20 +246,4 @@
     font-size: 0.65rem;
     margin-top: 2px;
   }
-
-  @media (max-width: 1024px) {
-    .mosaic-columns {
-      gap: 2px;
-      padding: 0 2px;
-    }
-    .mosaic-column { gap: 2px; }
-  }
-
-  @media (max-width: 640px) {
-    .mosaic-columns {
-      gap: 2px;
-      padding: 0 2px;
-    }
-    .mosaic-column { gap: 2px; }
-  }
 </style>

frontend/src/lib/SearchBar.svelte

@@ -30,6 +30,7 @@
     {placeholder}
     {disabled}
     onkeydown={handleKeydown}
+    autofocus
   />
   <button type="submit" disabled={!value.trim() || disabled} aria-label="Send">
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">

frontend/src/lib/api/client.ts

@@ -19,6 +19,7 @@ export interface LandingStory {
   year: number;
   media_type: string;
   awards_count: number;
+  link: string;
 }
 
 export async function fetchStories(): Promise<LandingStory[]> {

src/mediastorm/api.py

@@ -194,7 +194,12 @@ async def health():
 
 @app.get("/api/stories")
 async def stories():
-    return {"stories": _landing_stories}
+    enriched = []
+    for s in _landing_stories:
+        entry = dict(s)
+        entry["link"] = _link_lookup.get(s["uid"], f"https://www.mediastorm.com/{s['slug']}")
+        enriched.append(entry)
+    return {"stories": enriched}
 
 
 @app.post("/api/chat")