wallco.ai · home gets a 'Stumble through the catalog' random rail (12 designs via /api/designs/random + ↻ Shuffle button) inserted between Featured Designs and the CTA band — fresh discovery surface per visit, mirrors the empty-state /compare pattern, aspect-ratio 1/1.15 cards w/ color dot + category caption · pivoted from the originally-defaulted PDP 'More in this palette' rail because the existing 'Pair this with' block on the PDP already does palette neighbors via /api/design/:id/pairings (would have been a duplicate UX surface) · verified home / 200 26KB, 5 rail-related element refs

b03add38279bc0fab8da646713250451044397f9 · 2026-05-12 09:49:19 -0700 · SteveStudio2

Files touched

M server.js

Diff

commit b03add38279bc0fab8da646713250451044397f9
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Tue May 12 09:49:19 2026 -0700

    wallco.ai · home gets a 'Stumble through the catalog' random rail (12 designs via /api/designs/random + ↻ Shuffle button) inserted between Featured Designs and the CTA band — fresh discovery surface per visit, mirrors the empty-state /compare pattern, aspect-ratio 1/1.15 cards w/ color dot + category caption · pivoted from the originally-defaulted PDP 'More in this palette' rail because the existing 'Pair this with' block on the PDP already does palette neighbors via /api/design/:id/pairings (would have been a duplicate UX surface) · verified home / 200 26KB, 5 rail-related element refs
---
 server.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/server.js b/server.js
index 4be9844..3e0eb81 100644
--- a/server.js
+++ b/server.js
@@ -1661,6 +1661,35 @@ ${htmlHeader('/')}
   </div>
 </section>
 
+<!-- Random discovery rail — fresh per visit -->
+<section class="featured-section" style="padding-top:18px">
+  <div class="section-header" style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap">
+    <h2>Stumble through the catalog</h2>
+    <button type="button" id="home-rail-shuffle" style="font:11px var(--sans,system-ui);background:transparent;border:1px solid var(--line,#ddd);color:var(--ink-soft,#555);padding:6px 14px;border-radius:999px;cursor:pointer">↻ Shuffle</button>
+  </div>
+  <div id="home-random-rail" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;min-height:240px"></div>
+</section>
+<script>
+(function(){
+  var rail = document.getElementById('home-random-rail');
+  var btn = document.getElementById('home-rail-shuffle');
+  if (!rail) return;
+  var esc = function(s){ return String(s||'').replace(/[<>&"]/g, function(c){ return {'<':'&lt;','>':'&gt;','&':'&amp;','"':'&quot;'}[c]; }); };
+  function load(){
+    rail.innerHTML = '<div style="grid-column:1/-1;padding:50px;text-align:center;color:var(--ink-faint,#999);font:13px var(--sans,system-ui)">Loading…</div>';
+    fetch('/api/designs/random?n=12').then(function(r){ return r.json(); }).then(function(j){
+      if (!j.results || !j.results.length) { rail.innerHTML = '<div style="grid-column:1/-1;padding:40px;text-align:center;color:var(--ink-faint,#999);font:13px var(--sans,system-ui)">Catalog is still seeding.</div>'; return; }
+      rail.innerHTML = j.results.map(function(r){
+        var dot = r.dominant_hex ? '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:'+esc(r.dominant_hex)+';border:1px solid rgba(0,0,0,.12);vertical-align:middle;margin-right:4px"></span>' : '';
+        return '<a href="'+esc(r.url)+'" style="display:block;text-decoration:none;color:inherit"><div style="aspect-ratio:1/1.15;background:#f4f1ea url('+JSON.stringify(r.image_url).slice(1,-1)+') center/cover;border-radius:6px;border:1px solid var(--line,#e6e2d8);margin-bottom:6px"></div><div style="font:13px var(--sans,system-ui);color:var(--ink,#111);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">'+esc(r.title || ('Design #'+r.id))+'</div><div style="font:11px var(--sans,system-ui);color:var(--ink-faint,#999);margin-top:2px">'+dot+esc(r.category||'mixed')+'</div></a>';
+      }).join('');
+    }).catch(function(){ rail.innerHTML = '<div style="grid-column:1/-1;padding:40px;text-align:center;color:var(--ink-faint,#999);font:13px var(--sans,system-ui)">Couldn\\'t load — try again.</div>'; });
+  }
+  load();
+  if (btn) btn.addEventListener('click', load);
+})();
+</script>
+
 <!-- CTA band -->
 <section class="cta-band">
   <h2>Every design is AI-original.</h2>

← b425604 wallco.ai · /sitemap.xml now includes /compare (priority 0.5 · back to Wallco Ai · security parity with starsofdesign: app.disable(x-powered-by c82055d →