feat: shake reveals flux.2klein develop, intro_video bg, navy/cream Develop header, sync polaroid title, blank+scroll-in darkroom captions

.gitignore

@@ -2,4 +2,6 @@
 .vendor_cache
 sozai_rooms.db
 *.db-shm
-*.db-wal
+*.db-wal
+.DS_Store
+**/.DS_Store

index.html

@@ -1631,7 +1631,7 @@
                   onChange={(e) => onTitleChange(e.target.value)}
                   placeholder="Add a title..."
                   aria-label="Photo title"
-                  className="w-full bg-transparent font-serif text-sm font-semibold text-foreground outline-none placeholder:font-normal placeholder:text-muted-foreground"
+                  className="w-full bg-transparent font-hand text-lg text-foreground outline-none placeholder:font-normal placeholder:text-muted-foreground"
                 />
                 <textarea
                   value={caption}
@@ -2308,10 +2308,10 @@
 
       return (
         <section className="w-full max-w-6xl rounded-xl border-2 border-primary bg-card shadow-lg">
-          <header className="flex items-center justify-between gap-4 border-b-2 border-dashed border-primary/50 px-5 py-4 sm:px-7">
-            <div className="flex items-center gap-2.5"><h1 className="font-display text-2xl text-foreground">Develop Photos</h1></div>
+          <header className="flex items-center justify-between gap-4 border-b-2 border-dashed border-[#f5edd8]/30 bg-[#13294b] px-5 py-4 sm:px-7">
+            <div className="flex items-center gap-2.5"><h1 className="font-display text-2xl text-[#f5edd8]">Develop Photos</h1></div>
             <div className="flex items-center gap-2">
-              <button type="button" onClick={() => onOpenSettings && onOpenSettings()} aria-label="Settings" className="flex size-9 items-center justify-center rounded-md border-2 border-primary/70 text-primary transition-colors hover:bg-accent"><Settings className="size-4" /></button>
+              <button type="button" onClick={() => onOpenSettings && onOpenSettings()} aria-label="Settings" className="flex size-9 items-center justify-center rounded-md border-2 border-[#f5edd8]/50 text-[#f5edd8] transition-colors hover:bg-white/10"><Settings className="size-4" /></button>
             </div>
           </header>
           <div className="grid gap-8 px-5 py-6 sm:px-7 lg:grid-cols-2">
@@ -6470,6 +6470,39 @@
 
       useEffect(() => { if (revealed) onRevealed(photo.id); }, [revealed, onRevealed, photo.id]);
 
+      // Kick off the watercolour "develop" (flux.2-klein img2img) the moment the
+      // print is hung, so the result is ready by the time it's shaken in. The
+      // shake then reveals the DEVELOPED image; if the endpoint is unavailable
+      // or fails, we fall back to the original photo (no regression).
+      const [developedSrc, setDevelopedSrc] = useState(null);
+      const developRef = useRef(false);
+      useEffect(() => {
+        if (developRef.current || !photo.src) return;
+        developRef.current = true;
+        let alive = true;
+        (async () => {
+          try {
+            let dataUrl = photo.src;
+            if (!dataUrl.startsWith("data:")) {
+              const blob = await (await fetch(photo.src)).blob();
+              dataUrl = await new Promise((res, rej) => {
+                const fr = new FileReader();
+                fr.onload = () => res(fr.result); fr.onerror = rej;
+                fr.readAsDataURL(blob);
+              });
+            }
+            const r = await fetch("/api/img2img", {
+              method: "POST", headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ data_url: dataUrl, name: photo.alt || "photo" }),
+            });
+            if (!r.ok) return;
+            const j = await r.json();
+            if (alive && j && j.available && j.image) setDevelopedSrc(j.image);
+          } catch (err) { /* keep the original photo on any failure */ }
+        })();
+        return () => { alive = false; };
+      }, [photo.src, photo.alt]);
+
       const registerShake = useCallback(() => {
         const next = Math.min(1, progressRef.current + 1 / DR_SHAKES_TO_REVEAL);
         progressRef.current = next; setProgress(next);
@@ -6514,7 +6547,7 @@
               transition: dragging ? "none" : "transform 0.4s ease" }}
             onPointerDown={onPointerDown} onPointerMove={onPointerMove} onPointerUp={endDrag} onPointerCancel={endDrag}>
             <div className="relative aspect-[4/5] w-full overflow-hidden rounded-sm bg-[oklch(0.2_0.02_60)]">
-              <img src={photo.src || "/assets/placeholder.svg"} alt={revealed ? photo.alt : ""} draggable={false}
+              <img src={(revealed && developedSrc) ? developedSrc : (photo.src || "/assets/placeholder.svg")} alt={revealed ? photo.alt : ""} draggable={false}
                 className="h-full w-full object-cover transition-[filter] duration-200"
                 style={{ filter: "blur(" + blurPx + "px) grayscale(" + grayscale + "%) brightness(" + brightness + ") sepia(" + ((1 - progress) * 40) + "%)" }} />
               <div className="pointer-events-none absolute inset-0 transition-opacity duration-200"
@@ -6532,8 +6565,9 @@
                 </div>
               )}
             </div>
-            <figcaption className="absolute inset-x-0 bottom-2 line-clamp-2 px-2 text-center font-hand text-[12px] leading-tight text-[oklch(0.3_0.04_264)]">
-              {revealed ? photo.defaultCaption : ("frame " + String(index + 1).padStart(2, "0"))}
+            <figcaption className="absolute inset-x-0 bottom-2 line-clamp-2 px-2 text-center font-hand text-[12px] leading-tight text-[oklch(0.3_0.04_264)]"
+              style={revealed ? { animation: "dr-cap-in .6s ease-out both" } : undefined}>
+              {revealed ? photo.defaultCaption : ""}
             </figcaption>
           </figure>
         </li>
@@ -6560,6 +6594,7 @@
             "@keyframes dr-ring{from{transform:translate(-50%,-50%) scale(.2);opacity:.7}to{transform:translate(-50%,-50%) scale(1.7);opacity:0}}" +
             "@keyframes dr-sway-kf{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}" +
             "@keyframes dr-fade{from{opacity:0}to{opacity:1}}" +
+            "@keyframes dr-cap-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}" +
             ".dr-flicker{animation:dr-safelight 5s ease-in-out infinite}" +
             ".dr-sway{animation:dr-sway-kf 4s ease-in-out infinite;transform-origin:top center}" +
             "@media (prefers-reduced-motion: reduce){.dr-flicker,.dr-sway{animation:none}}"

landing.html

@@ -180,7 +180,7 @@
           <video autoPlay loop muted playsInline aria-hidden="true"
             className="pointer-events-none absolute inset-0 z-0 h-full w-full object-cover"
             style={{ mixBlendMode: "multiply", opacity: 0.32 }}>
-            <source src="/assets/birdanimation.mp4" type="video/mp4" />
+            <source src="/assets/intro_video.mp4" type="video/mp4" />
           </video>
           {/* top-left wordmark */}
           <header className="absolute left-6 top-5 z-20 flex items-baseline gap-2 sm:left-10 sm:top-7">

public/intro_video.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1c5e2ca2deb00725e649e2e475a16cde5da21d4116bfb54476f2c3ecb047969a
+size 3369460