feat: desert dusk theme with animated mule and pixel-art scenery

Replaces the cool-grey neutral theme with a warm desert dusk palette
pulled from a new pixel-art TopBar: a tiled, right-to-left scrolling
desert under a sky gradient, a 6-frame walking mule sprite where the
logo used to sit, and an ASCII block-character title on a black plate.
The active heap card now uses a cactus/dune scene as its stack
backdrop, and the "Built with hubris" mark moves into the TopBar's
bottom-right corner (AppFooter component removed).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/App.tsx

@@ -7,7 +7,6 @@ import { TopBar } from './components/layout/TopBar'
 import { ScanProgress } from './components/ScanProgress'
 import { ToastContainer } from './components/ToastContainer'
 import { KeyboardHints } from './components/KeyboardHints'
-import { AppFooter } from './components/AppFooter'
 import { PreviewView } from './components/preview/PreviewView'
 import { FilterBar } from './components/filter/FilterBar'
 import { DiscardActionBar } from './components/discard/DiscardActionBar'
@@ -84,7 +83,6 @@ function App() {
            *  glassy. Mounted here so it's centered against the timeline,
            *  not the viewport (which would be offset by the sidebars). */}
           <KeyboardHints />
-          <AppFooter />
         </div>
 
         {/* Right Sidebar */}

frontend/src/components/AppFooter.tsx

@@ -1,43 +0,0 @@
-/**
- * Tiny corner footer pinned to the bottom-right of the main column.
- * Renders "Built with hubris • <year in roman numerals>", refreshed
- * once per page load.
- */
-
-const ROMAN_PAIRS: [number, string][] = [
-  [1000, 'M'],
-  [900, 'CM'],
-  [500, 'D'],
-  [400, 'CD'],
-  [100, 'C'],
-  [90, 'XC'],
-  [50, 'L'],
-  [40, 'XL'],
-  [10, 'X'],
-  [9, 'IX'],
-  [5, 'V'],
-  [4, 'IV'],
-  [1, 'I'],
-]
-
-function toRoman(n: number): string {
-  let result = ''
-  for (const [value, symbol] of ROMAN_PAIRS) {
-    while (n >= value) {
-      result += symbol
-      n -= value
-    }
-  }
-  return result
-}
-
-export function AppFooter() {
-  const year = new Date().getFullYear()
-  return (
-    <div className="pointer-events-none absolute bottom-2 right-3 z-10 text-[10px] text-text-faint">
-      <span className="pointer-events-auto">
-        Built with hubris • {toRoman(year)}
-      </span>
-    </div>
-  )
-}

frontend/src/components/heaps/ActiveHeapCard.tsx

@@ -4,6 +4,7 @@ import { ShoppingBasket } from 'lucide-react'
 import { useActiveHeapMembers } from '../../hooks/useActiveHeapMembersQuery'
 import { useFilterStore } from '../../store/filterStore'
 import { photos as photosApi, heaps as heapsApi } from '../../services/api'
+import cardBg from '../../assets/card.png'
 
 /** How many thumbnails fan out across the stack at once. The newest is
  *  drawn last (top), older ones fan back-left and back-right. */
@@ -75,10 +76,19 @@ export function ActiveHeapCard() {
 
       {/* Stack row. Re-keyed on activeHeap.id so switching heaps tears
        *  the animation context down cleanly instead of trying to
-       *  crossfade unrelated photos. */}
+       *  crossfade unrelated photos. The desert scene sits behind the
+       *  fanned thumbnails — `cover` + `bottom` keeps the dunes anchored
+       *  so the cacti frame the photos rather than the (transparent) sky. */}
       <div
         key={activeHeap.id}
-        className="relative h-24 overflow-hidden px-3 pb-3"
+        className="relative h-24 overflow-hidden rounded-b-lg px-3 pb-3"
+        style={{
+          backgroundImage: `url(${cardBg})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center bottom',
+          backgroundRepeat: 'no-repeat',
+          imageRendering: 'pixelated',
+        }}
       >
         {visible.length === 0 ? (
           <div className="flex h-full items-center justify-center px-2 text-center text-[11px] text-text-faint">

frontend/src/components/layout/TopBar.tsx

@@ -1,5 +1,6 @@
 import { PanelLeftOpen, PanelRightOpen } from 'lucide-react'
-import muliLogo from '../../assets/muli-logo.png'
+import desertBg from '../../assets/desert.png'
+import muleSprites from '../../assets/mule-sprites.png'
 
 interface TopBarProps {
   leftSidebarOpen: boolean
@@ -8,10 +9,34 @@ interface TopBarProps {
   onExpandRight: () => void
 }
 
+// Block-character ASCII rendering of "Mulimago" — sits on a black plate
+// in place of the old text title.
+const MULIMAGO_ASCII = `▖  ▖  ▜ ▘
+▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
+▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
+
+const ROMAN_PAIRS: [number, string][] = [
+  [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
+  [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
+  [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
+]
+
+function toRoman(n: number): string {
+  let result = ''
+  for (const [value, symbol] of ROMAN_PAIRS) {
+    while (n >= value) {
+      result += symbol
+      n -= value
+    }
+  }
+  return result
+}
+
 /**
- * Slim top bar — logo on the left, settings gear on the right. The
+ * Slim top bar — animated walking mule on the left over a tiled desert
- * active heap badge moved into the Heaps panel in the left sidebar
+ * backdrop, settings gear on the right. The active heap badge moved into
- * (where it actually relates to the heap rows the user navigates to).
+ * the Heaps panel in the left sidebar (where it actually relates to the
+ * heap rows the user navigates to).
  *
  * Also hosts the "expand sidebar" affordances: when a side panel is
  * collapsed, a small panel-open icon appears on the corresponding edge
@@ -26,32 +51,68 @@ export function TopBar({
   onExpandRight,
 }: TopBarProps) {
   return (
-    <header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
+    <header
-      <div className="flex items-center gap-2">
+      className="relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4"
+      style={{
+        // Two layers: desert tile on top (scrolls right→left), dusk-sky
+        // gradient underneath (static). Tile width is fixed at 200px so
+        // the `desert-scroll` keyframe can move by exactly one tile and
+        // loop seamlessly.
+        backgroundImage: `url(${desertBg}), linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%)`,
+        backgroundRepeat: 'repeat-x, no-repeat',
+        backgroundSize: '200px 100%, 100% 100%',
+        backgroundPosition: '0 bottom, 0 0',
+        imageRendering: 'pixelated',
+        animation: 'desert-scroll 24s linear infinite',
+      }}
+    >
+      <div className="relative flex items-center gap-3">
         {!leftSidebarOpen && (
           <button
             onClick={onExpandLeft}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (Tab)"
             aria-label="Expand left panel"
           >
             <PanelLeftOpen className="h-4 w-4" />
           </button>
         )}
-        <img src={muliLogo} alt="Mulimago" className="h-7 w-7 object-contain" />
+        <div
-        <h1 className="text-lg font-semibold text-text">Mulimago</h1>
+          aria-label="Mulimago"
+          className="h-12 w-14"
+          style={{
+            backgroundImage: `url(${muleSprites})`,
+            backgroundSize: '300% 200%',
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            animation: 'mule-walk 0.6s steps(1) infinite',
+          }}
+        />
+        <pre
+          aria-label="Mulimago"
+          className="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-text"
+          style={{ letterSpacing: 0 }}
+        >
+          {MULIMAGO_ASCII}
+        </pre>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex h-full items-end gap-2 self-stretch pb-1">
         {!rightSidebarOpen && (
           <button
             onClick={onExpandRight}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="self-center rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (I)"
             aria-label="Expand right panel"
           >
             <PanelRightOpen className="h-4 w-4" />
           </button>
         )}
+        <span
+          className="text-[10px] text-foreground-muted"
+          style={{ textShadow: '0 1px 2px rgba(0,0,0,0.7)' }}
+        >
+          Built with hubris • {toRoman(new Date().getFullYear())}
+        </span>
       </div>
     </header>
   )

frontend/src/index.css

@@ -4,18 +4,18 @@
 
 @layer base {
   :root {
-    --color-bg: #111110;
+    --color-bg: #1a1424;
-    --color-surface: #161615;
+    --color-surface: #221c2f;
-    --color-surface-2: #1c1c1a;
+    --color-surface-2: #2a2339;
-    --color-surface-offset: #222220;
+    --color-surface-offset: #352c46;
-    --color-border: rgba(255, 255, 255, 0.08);
+    --color-border: rgba(240, 193, 136, 0.10);
-    --color-text: #e8e6e0;
+    --color-text: #f0e6d2;
-    --color-text-muted: #878580;
+    --color-text-muted: #a8997d;
-    --color-text-faint: #4a4845;
+    --color-text-faint: #5e5448;
-    --color-primary: #3b82f6;
+    --color-primary: #e8965a;
-    --color-pick: #4f9e5c;
+    --color-pick: #8aaa5a;
-    --color-reject: #c25a5a;
+    --color-reject: #d06464;
-    --color-star: #d4a340;
+    --color-star: #f0c188;
   }
 
   body {
@@ -40,4 +40,25 @@
 
 ::-webkit-scrollbar-thumb:hover {
   @apply bg-text-faint;
+}
+
+/* Mule walk cycle — 3x2 sprite sheet (6 frames). Each keyframe holds
+   for one step thanks to `steps(1)` so the background snaps frame-to-frame
+   instead of interpolating. */
+@keyframes mule-walk {
+  0%     { background-position: 0% 0%; }
+  16.66% { background-position: 50% 0%; }
+  33.33% { background-position: 100% 0%; }
+  50%    { background-position: 0% 100%; }
+  66.66% { background-position: 50% 100%; }
+  83.33% { background-position: 100% 100%; }
+  100%   { background-position: 0% 0%; }
+}
+
+/* Parallax desert scroll — moves the desert layer right→left by exactly
+   one tile width so the loop is seamless. The tile width is fixed in
+   CSS (see TopBar.tsx) so the keyframe end value matches. */
+@keyframes desert-scroll {
+  from { background-position-x: 0px, 0px; }
+  to   { background-position-x: -200px, 0px; }
 }

frontend/tailwind.config.js

@@ -8,19 +8,22 @@ export default {
   theme: {
     extend: {
       colors: {
-        // Dark-first color scheme for photo apps
+        // Desert dusk palette — warm, slightly indigo darks pulled from
-        bg: '#111110',
+        // the TopBar sunset gradient. Dark enough that photo content
-        surface: '#161615',
+        // stays the visual focus, but no longer the cool neutral greys
-        'surface-2': '#1c1c1a',
+        // we started with.
-        'surface-offset': '#222220',
+        bg: '#1a1424',           // deep dusk indigo (was near-black)
-        border: 'rgba(255,255,255,0.08)',
+        surface: '#221c2f',       // panel base
-        text: '#e8e6e0',
+        'surface-2': '#2a2339',   // raised panels / hover
-        'text-muted': '#878580',
+        'surface-offset': '#352c46', // chips, inputs
-        'text-faint': '#4a4845',
+        border: 'rgba(240, 193, 136, 0.10)', // warm sand tint, low alpha
-        primary: '#3b82f6', // saturated blue (Tailwind blue-500) — high contrast on dark bg AND on photo content
+        text: '#f0e6d2',          // warm cream
-        pick: '#4f9e5c',    // green for picked
+        'text-muted': '#a8997d',  // sandy beige
-        reject: '#c25a5a',  // red for rejected
+        'text-faint': '#5e5448',  // dark sand
-        star: '#d4a340',    // amber for stars
+        primary: '#e8965a',       // sunset orange — pulled from horizon
+        pick: '#8aaa5a',          // sage / cactus green
+        reject: '#d06464',        // warmer red
+        star: '#f0c188',          // pale amber matching horizon
       },
       fontFamily: {
         sans: ['Geist', 'system-ui', 'sans-serif'],