feat: modal logo artwork + sync colour variants from pollen site

- welcome modal now uses the Microduck sticker + wordmark press assets
(LFS-tracked PNGs, signed like every other private-Space subresource)
- variants.js replaced with the site's 3d-module version: dedicated
tongue/hips/sideShells slots, black leg motors, uniform yellow/orange
shoe, and orange lower beak on the blue scheme
- swatches honour the per-variant swatch override (purple dot is purple)
- duck.js/variants.js dynamic imports reuse rl.js's ?v= cache-buster

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitattributes

@@ -35,4 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 *.stl filter=lfs diff=lfs merge=lfs -text
 *.wav filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
 *.jpg filter=lfs diff=lfs merge=lfs -text

index.html

@@ -281,31 +281,30 @@
         from { transform: translateY(18px) scale(0.94); opacity: 0; }
         to { transform: none; opacity: 1; }
       }
-      #welcome .badge {
-        width: 4rem;
-        height: 4rem;
-        margin: 0 auto 1.1rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 2rem;
-        border-radius: 50%;
-        background: rgba(255, 210, 63, 0.12);
-        border: 1px solid rgba(255, 210, 63, 0.35);
-        animation: badge-bob 3s ease-in-out infinite;
+      #welcome .logo-duck {
+        display: block;
+        height: 7.5rem;
+        margin: 0 auto 0.4rem;
+        filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
+        animation: badge-bob 3.2s ease-in-out infinite;
       }
       @keyframes badge-bob {
-        0%, 100% { transform: translateY(0) rotate(-3deg); }
-        50% { transform: translateY(-6px) rotate(3deg); }
+        0%, 100% { transform: translateY(0) rotate(-2deg); }
+        50% { transform: translateY(-6px) rotate(2deg); }
+      }
+      #welcome .logo-wordmark {
+        display: block;
+        width: min(78%, 300px);
+        margin: 0 auto;
       }
-      #welcome h1 {
-        font-size: 1.05rem;
+      #welcome .subtitle {
+        margin-top: 0.55rem;
+        font-size: 0.62rem;
         font-weight: 700;
-        letter-spacing: 0.18em;
+        letter-spacing: 0.32em;
         text-transform: uppercase;
-        color: #fff;
+        color: rgba(255, 210, 63, 0.75);
       }
-      #welcome h1 b { color: var(--yellow); font-weight: 700; }
       #welcome .tagline {
         margin-top: 0.5rem;
         font-size: 0.8rem;
@@ -410,9 +409,10 @@
     <div id="loading">Compiling physics&hellip;</div>
 
     <div id="welcome" hidden>
-      <div class="card" role="dialog" aria-modal="true" aria-labelledby="welcome-title">
-        <div class="badge">🐤</div>
-        <h1 id="welcome-title"><b>Microduck</b> playground</h1>
+      <div class="card" role="dialog" aria-modal="true" aria-label="Microduck playground">
+        <img class="logo-duck" id="logo-duck" alt="" />
+        <img class="logo-wordmark" id="logo-wordmark" alt="Microduck" />
+        <div class="subtitle">RL playground</div>
         <p class="tagline">
           A real robot brain in your browser: MuJoCo physics compiled to
           WebAssembly, driven by the duck's actual trained neural policies
@@ -434,6 +434,12 @@
       // or clicking the blurred backdrop. The top-left brand reopens it.
       (() => {
         const modal = document.getElementById("welcome");
+        // Logo images need the same ?__sign JWT as every other subresource
+        // on the private Space (rl.js hasn't installed its signer yet).
+        const sign = new URLSearchParams(location.search).get("__sign");
+        const signedUrl = (u) => (sign ? `${u}?__sign=${encodeURIComponent(sign)}` : u);
+        document.getElementById("logo-duck").src = signedUrl("./assets/logo-duck.png");
+        document.getElementById("logo-wordmark").src = signedUrl("./assets/logo-wordmark.png");
         const open = () => {
           modal.hidden = false;
           modal.classList.remove("closing");
@@ -464,7 +470,7 @@
          appended: a plain src attribute can 401 when the browser blocks the
          *.static.hf.space auth cookie inside the hub iframe. -->
     <script type="module">
-      const V = "20"; // bump on rl.js changes to defeat heuristic caching
+      const V = "21"; // bump on rl.js changes to defeat heuristic caching
       const sign = new URLSearchParams(location.search).get("__sign");
       const suffix = sign ? `&__sign=${encodeURIComponent(sign)}` : "";
       import(`./rl.js?v=${V}${suffix}`);

rl.js

@@ -32,10 +32,14 @@ window.__hfSigned = signed; // duck.js uses it for kinematics + STL requests
 
 // Local modules are imported dynamically through signed() for the same
 // reason: a static import of ./duck.js would 401 without the cookie.
+// They also reuse rl.js's own ?v= cache-buster: python http.server (and
+// some CDN edges) send no Cache-Control, so without it browsers can keep
+// serving stale module bytes after a deploy.
+const SELF_V = new URL(import.meta.url).searchParams.get("v") ?? "0";
 const { buildRig, cloneRig, loadKinematics, setJoint, setJawOpen, MODEL_DIR, MESH_VERSION } =
-  await import(signed("./duck.js"));
+  await import(signed(`./duck.js?v=${SELF_V}`));
 const { VARIANTS, VARIANT_NAMES, materialHookFor, randomVariantName, applyVariant, specToHex } =
-  await import(signed("./variants.js"));
+  await import(signed(`./variants.js?v=${SELF_V}`));
 
 ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.27.0/dist/";
 ort.env.wasm.numThreads = 1; // static hosting sends no COOP/COEP headers
@@ -700,14 +704,16 @@ function syncButtons() {
 }
 
 // ── Colour swatches: re-skin the rig live, with a quack ─────────────────
-// One representative colour per variant so the dots read at a glance.
+  // One representative colour per variant so the dots read at a glance.
+// Variants can force theirs with a `swatch` spec (purple does: its head
+// is warm gray but its identity is the purple accents).
 const SWATCH_SLOT = { classic: "feet", charcoal: "headDome", purple: "feet", blue: "facePlate" };
 const swatchesEl = document.getElementById("swatches");
 const swatchBtns = new Map();
 for (const name of VARIANT_NAMES) {
   const v = VARIANTS[name];
   const b = document.createElement("button");
-  b.style.background = specToHex(v[SWATCH_SLOT[name] ?? "bodyShell"]);
+  b.style.background = specToHex(v.swatch ?? v[SWATCH_SLOT[name] ?? "bodyShell"]);
   b.setAttribute("aria-label", `${name} colours`);
   b.addEventListener("click", () => {
     if (name === currentVariant) return;
@@ -744,10 +750,7 @@ window.rl = {
 // translucent ducks. Fire-and-forget: any failure just means no ghosts.
 const r3 = (x) => Math.round(x * 1000) / 1000;
 try {
-  // Same heuristic-cache pitfall as everything else served without
-  // Cache-Control: reuse rl.js's own ?v= so ghosts.js updates ship together.
-  const selfV = new URL(import.meta.url).searchParams.get("v") ?? "0";
-  const { initGhosts } = await import(signed(`./ghosts.js?v=${selfV}`));
+  const { initGhosts } = await import(signed(`./ghosts.js?v=${SELF_V}`));
   ghosts = await initGhosts({
     scene, rig, cloneRig, setJoint, setJawOpen, applyVariant,
     jointNames: JOINT_NAMES,

variants.js

@@ -37,76 +37,94 @@ const FEET_YELLOW = { color: [0.784, 0.455, 0.023], roughness: 0.5, metalness: 0
 
 // Slots (validated against the four-robot reference photo): headDome
 // (top shell), facePlate (around the eye), trim (band under the shell +
-// upper beak base), beakUpper (mouth-roof plate), beakLower (jaw plates),
-// eyeRing, lens, bodyShell (trunk shells), legShells (upper-leg shells),
-// feet (foot blocks + ankle brackets), soles, mechDark, mechGray.
+// upper beak base), beakUpper (mouth-roof plate), beakLower (rigid jaw),
+// tongue (soft pad inside the beak), eyeRing, lens, bodyShell (trunk
+// base), sideShells (left + right trunk shells), legShells (upper-leg
+// shells), feet (shoe upper: foot blocks + ankle brackets), soles (shoe
+// lower: sole pads), hips (hip covers), mechDark, mechGray.
+// The shoe is deliberately identical on all variants: yellow upper
+// (feet), orange lower (soles).
 export const VARIANTS = {
   // Front-center robot: warm gray head, cream body, amber eye, orange
-  // trim/upper beak over a lighter amber lower beak, amber-orange feet.
+  // trim and beak.
   classic: {
-    headDome: WARM_GRAY,
+    headDome: CREAM,
     facePlate: WARM_GRAY,
     trim: BRIGHT_ORANGE,
     beakUpper: BRIGHT_ORANGE,
-    beakLower: AMBER,
+    beakLower: BRIGHT_ORANGE,
+    tongue: AMBER_YELLOW,
     eyeRing: AMBER_YELLOW,
     lens: LENS,
     bodyShell: CREAM,
+    sideShells: CREAM,
     legShells: CREAM,
-    feet: AMBER_ORANGE,
+    feet: BRIGHT_ORANGE,
     soles: AMBER_ORANGE,
+    hips: GRAY,
     mechDark: DARK,
     mechGray: GRAY,
   },
   // Front-left robot: charcoal shells, slightly lighter face plate,
-  // amber eye, orange/amber beak, yellow soles peeking under black feet.
+  // amber eye, orange/amber beak.
   charcoal: {
     headDome: CHARCOAL,
     facePlate: CHARCOAL_FACE,
     trim: BRIGHT_ORANGE,
     beakUpper: BRIGHT_ORANGE,
-    beakLower: AMBER,
+    beakLower: BRIGHT_ORANGE,
+    tongue: AMBER_YELLOW,
     eyeRing: AMBER_YELLOW,
     lens: LENS,
     bodyShell: CHARCOAL_BODY,
+    sideShells: CHARCOAL_BODY,
     legShells: CHARCOAL_BODY,
-    feet: CHARCOAL_BODY,
-    soles: CLEAN_YELLOW,
+    feet: BRIGHT_ORANGE,
+    soles: AMBER_ORANGE,
+    hips: GRAY,
     mechDark: DARK,
     mechGray: GRAY,
   },
   // Back-center robot: light warm gray head, purple eye, YELLOW trim and
-  // beak (both plates), cream body, purple feet.
+  // beak (both plates), cream body.
   purple: {
     headDome: LIGHT_WARM_GRAY,
-    facePlate: LIGHT_WARM_GRAY,
+    facePlate: WARM_GRAY,
     trim: CLEAN_YELLOW,
     beakUpper: CLEAN_YELLOW,
     beakLower: CLEAN_YELLOW,
+    tongue: AMBER_YELLOW,
     eyeRing: PURPLE_RING,
     lens: LENS,
     bodyShell: CREAM,
+    sideShells: CREAM,
     legShells: CREAM,
-    feet: PURPLE_FEET,
-    soles: PURPLE_FEET,
+    feet: CLEAN_YELLOW,
+    soles: PURPLE_RING,
+    hips: GRAY,
     mechDark: DARK,
     mechGray: GRAY,
+    // UI swatch override: the head is warm gray, but this colourway's
+    // identity is its purple accents - the picker dot shows that.
+    swatch: PURPLE_FEET,
   },
   // Right robot: pale blue dome over a medium blue face plate (two
-  // different blues), amber eye, orange/amber beak, blue-gray body,
-  // clean yellow feet.
+  // different blues), amber eye, orange/amber beak, blue-gray body.
   blue: {
     headDome: PALE_BLUE,
     facePlate: MEDIUM_BLUE,
     trim: BRIGHT_ORANGE,
     beakUpper: BRIGHT_ORANGE,
-    beakLower: AMBER,
+    beakLower: BRIGHT_ORANGE,
+    tongue: AMBER_YELLOW,
     eyeRing: AMBER_YELLOW,
     lens: LENS,
-    bodyShell: BLUE_GRAY,
-    legShells: BLUE_GRAY,
-    feet: FEET_YELLOW,
-    soles: FEET_YELLOW,
+    bodyShell: PALE_BLUE,
+    sideShells: PALE_BLUE,
+    legShells: PALE_BLUE,
+    feet: BRIGHT_ORANGE,
+    soles: AMBER_ORANGE,
+    hips: MEDIUM_BLUE,
     mechDark: DARK,
     mechGray: GRAY,
   },
@@ -131,17 +149,18 @@ export function meshMaterialsFor(v) {
     "noenoeil.stl": v.eyeRing,
     "lens.stl": v.lens,
     "m12_lens_holder.stl": v.mechDark,
-    // Beak: mouth-roof plate on top, rigid jaw + soft pad below.
+    // Beak: mouth-roof plate on top, rigid jaw below, soft pad (the
+    // tongue) riding on the jaw.
     "soft_mouth_top.stl": v.beakUpper,
     "jaw.stl": v.beakLower,
-    "jaw_soft.stl": v.beakLower,
-    // Body shells
+    "jaw_soft.stl": v.tongue,
+    // Body: trunk base + the two side shells (shared slot).
     "trunk_base.stl": v.bodyShell,
-    "left_shell.stl": v.bodyShell,
-    "right_shell.stl": v.bodyShell,
+    "left_shell.stl": v.sideShells,
+    "right_shell.stl": v.sideShells,
     "upper_leg_left.stl": v.legShells,
     "upper_leg_right.stl": v.legShells,
-    "hip_l.stl": v.trim,
+    "hip_l.stl": v.hips,
     // Feet: foot block + ankle bracket, soft sole pad below.
     "foot_left.stl": v.feet,
     "foot_right.stl": v.feet,
@@ -149,8 +168,17 @@ export function meshMaterialsFor(v) {
     "ankle_right.stl": v.feet,
     "sole_left.stl": v.soles,
     "sole_right.stl": v.soles,
-    // Dark mechanics
+    // Dark mechanics. leg.stl is the printed shin that wraps the ankle
+    // motor and its bearing ring: in gray they read as two gray motors,
+    // so both go dark with the motor they hold.
     "xl330.stl": v.mechDark,
+    "leg.stl": v.mechDark,
+    "seeed_bearing__configuration_default.stl": v.mechDark,
+    // Hip yaw mechanism (ribbed ring + 4-screw plate): reads as the hip
+    // motor, so it goes dark too. The printed hip cover (hip_l.stl)
+    // keeps the dedicated `hips` slot.
+    "yaw2roll.stl": v.mechDark,
+    "bearing_roll.stl": v.mechDark,
     "neck.stl": v.mechDark,
     "np_f970.stl": v.mechDark,
     "pcb__raspberry_pi_zero_2_w.stl": v.mechDark,
@@ -159,15 +187,11 @@ export function meshMaterialsFor(v) {
     "speaker.stl": v.mechDark,
     // Gray mechanics
     "upper_leg_rigidity_plate.stl": v.mechGray,
-    "leg.stl": v.mechGray,
-    "yaw2roll.stl": v.mechGray,
     "yaw_roll_motion.stl": v.mechGray,
     "neck_pitch.stl": v.mechGray,
-    "bearing_roll.stl": v.mechGray,
     "motor_support.stl": v.mechGray,
     "power_support.stl": v.mechGray,
     "seeed_bearing__configuration__22x16x4.stl": v.mechGray,
-    "seeed_bearing__configuration_default.stl": v.mechGray,
   };
 }