Add bird animation and cassette pile to the scene. Updated main.js to include bird movement and tail flicking behavior, and enhanced world.js with new cassette pile, walkman, and headphones models. Integrated cable geometry for visual detail and adjusted bird positioning on the bench.

frontend/main.js

@@ -121,6 +121,8 @@ scene.traverse((obj) => {
   obj.matrixAutoUpdate = false;
 });
 for (const cloud of world.clouds) cloud.matrixAutoUpdate = true;
+world.bird.matrixAutoUpdate = true;
+world.bird.userData.tail.matrixAutoUpdate = true;
 
 // ---------------------------------------------------------------------------
 // Vending machine interaction: hover outline + floating label, click hook
@@ -318,6 +320,21 @@ window.lofinityDebug = {
   stats() {
     return { ...renderer.info.render, ...renderer.info.memory };
   },
+  goto(px, py, pz, lx, ly, lz) {
+    this.skipIntro();
+    camera.position.set(px, py, pz);
+    lookTarget.set(lx, ly, lz);
+    view.mode = "machine"; // parks the camera (no idle sway)
+  },
+  birdInfo() {
+    const b = world.bird;
+    return {
+      rotY: b.rotation.y,
+      posY: b.position.y,
+      auto: b.matrixAutoUpdate,
+      matrixRotY: Math.atan2(b.matrix.elements[8], b.matrix.elements[10]),
+    };
+  },
 };
 
 // ---------------------------------------------------------------------------
@@ -347,6 +364,15 @@ function animate(now = 0) {
     if (cloud.position.x > 170) cloud.position.x = -170;
   }
 
+  // the bench bird looks around, hops now and then, flicks its tail
+  const bird = world.bird;
+  bird.rotation.y =
+    -0.5 + Math.sin(elapsed * 0.4) * 0.4 + Math.sin(elapsed * 1.1) * 0.12;
+  bird.position.y =
+    bird.userData.baseY + Math.pow(Math.max(0, Math.sin(elapsed * 1.9)), 12) * 0.06;
+  bird.userData.tail.rotation.x =
+    -0.35 + Math.pow(Math.max(0, Math.sin(elapsed * 1.3 + 1)), 8) * 0.5;
+
   if (intro.phase === "loading" || intro.phase === "held") {
     // Barely-there float while gazing at the sky
     camera.position.y = CAM_START.y + Math.sin(elapsed * 0.5) * 0.08;

frontend/world.js

@@ -413,6 +413,136 @@ function buildBench() {
   return shadows(g);
 }
 
+// --- cassette pile -----------------------------------------------------------
+
+function buildCassette(color) {
+  const g = new THREE.Group();
+  const shell = box(0.46, 0.075, 0.3, lambert(color));
+  shell.position.y = 0.0375;
+  g.add(shell);
+  const label = box(0.32, 0.012, 0.2, lambert(0xf4ecd8));
+  label.position.y = 0.078;
+  g.add(label);
+  const tapeWindow = box(0.16, 0.013, 0.08, lambert(0x1d232f));
+  tapeWindow.position.y = 0.079;
+  g.add(tapeWindow);
+  return g;
+}
+
+function buildCassettePile() {
+  const g = new THREE.Group();
+  const colors = [0x2e3440, 0xf2e8d5, 0xd95d4e, 0x7cc4ea, 0xf2c84b, 0x4a3b2c];
+  // [x, y, z, yaw] — three flat, two crossed on top, one tilted at the summit
+  const placements = [
+    [0, 0, 0, 0.15],
+    [0.5, 0, 0.05, -0.25],
+    [-0.46, 0, -0.04, 0.4],
+    [0.22, 0.088, 0.02, 1.35],
+    [-0.28, 0.088, -0.03, -1.15],
+    [-0.02, 0.176, 0, 0.55],
+  ];
+  placements.forEach(([x, y, z, yaw], i) => {
+    const cassette = buildCassette(colors[i % colors.length]);
+    cassette.position.set(x, y, z);
+    cassette.rotation.y = yaw;
+    if (i === placements.length - 1) cassette.rotation.z = 0.07;
+    g.add(cassette);
+  });
+  return shadows(g);
+}
+
+// --- walkman + vintage headphones ---------------------------------------------
+
+function buildWalkman() {
+  const g = new THREE.Group();
+  const body = box(0.5, 0.12, 0.36, lambert(0xc7cdd4));
+  body.position.y = 0.06;
+  g.add(body);
+
+  const tapeWindow = box(0.3, 0.015, 0.2, lambert(0x1d232f));
+  tapeWindow.position.set(-0.06, 0.125, 0);
+  g.add(tapeWindow);
+  const tapeLabel = box(0.14, 0.012, 0.1, lambert(0xf4ecd8));
+  tapeLabel.position.set(-0.06, 0.133, 0);
+  g.add(tapeLabel);
+
+  // transport buttons along the edge, the red one is record
+  [0x3a4254, 0x3a4254, 0xd95d4e].forEach((color, i) => {
+    const button = box(0.05, 0.05, 0.06, lambert(color));
+    button.position.set(0.19, 0.12, -0.1 + i * 0.1);
+    g.add(button);
+  });
+  return shadows(g);
+}
+
+function buildHeadphones() {
+  const g = new THREE.Group();
+  const band = new THREE.Mesh(
+    new THREE.TorusGeometry(0.2, 0.018, 8, 18, Math.PI),
+    lambert(0x6b7280)
+  );
+  band.rotation.x = -Math.PI / 2;
+  band.position.y = 0.035;
+  g.add(band);
+  for (const side of [-1, 1]) {
+    const cup = cyl(0.085, 0.085, 0.05, 12, lambert(0x3a4254));
+    cup.position.set(side * 0.2, 0.03, 0);
+    g.add(cup);
+    const foam = cyl(0.08, 0.08, 0.026, 12, lambert(0xe8893c));
+    foam.position.set(side * 0.2, 0.068, 0);
+    g.add(foam);
+  }
+  return shadows(g);
+}
+
+// --- little bird ---------------------------------------------------------------
+
+function buildBird() {
+  const g = new THREE.Group();
+  const cream = lambert(0xf5efe0, { flatShading: true });
+  const featherMaterial = lambert(0xd9cdb4, { flatShading: true });
+
+  const body = ico(0.13, 1, cream);
+  body.scale.set(1, 0.95, 1.2);
+  body.position.y = 0.12;
+  g.add(body);
+
+  const breast = ico(0.085, 1, lambert(0xe8893c, { flatShading: true }));
+  breast.position.set(0, 0.07, 0.07);
+  g.add(breast);
+
+  const beak = new THREE.Mesh(new THREE.ConeGeometry(0.025, 0.07, 6), lambert(0xd9a13c));
+  beak.rotation.x = Math.PI / 2;
+  beak.position.set(0, 0.15, 0.17);
+  g.add(beak);
+
+  for (const side of [-1, 1]) {
+    const eye = ico(0.018, 0, lambert(0x1d232f));
+    eye.position.set(side * 0.055, 0.17, 0.115);
+    g.add(eye);
+
+    const wing = ico(0.07, 1, featherMaterial);
+    wing.scale.set(0.5, 0.7, 1.3);
+    wing.position.set(side * 0.115, 0.12, -0.01);
+    g.add(wing);
+
+    const leg = cyl(0.012, 0.012, 0.05, 5, lambert(0xb3823c));
+    leg.position.set(side * 0.04, 0.025, 0.02);
+    g.add(leg);
+  }
+
+  const tail = new THREE.Group();
+  const feathers = box(0.07, 0.02, 0.14, featherMaterial);
+  feathers.position.z = -0.07;
+  tail.add(feathers);
+  tail.position.set(0, 0.12, -0.13);
+  tail.rotation.x = -0.35;
+  g.add(tail);
+  g.userData.tail = tail;
+
+  return shadows(g);
+}
+
 // --- lamp post ---------------------------------------------------------------
 
 function buildLamp() {
@@ -849,6 +979,42 @@ export function buildWorld(scene) {
   bench.position.set(1.7, 0.3, 4.4);
   scene.add(bench);
 
+  // someone left their tape collection on the bench…
+  const cassettes = buildCassettePile();
+  cassettes.position.set(-1.0, 1.05, -0.05);
+  cassettes.rotation.y = -0.2;
+  bench.add(cassettes);
+
+  // …with their walkman and headphones beside it
+  const walkman = buildWalkman();
+  walkman.position.set(0.15, 1.05, 0.02);
+  walkman.rotation.y = 0.35;
+  bench.add(walkman);
+
+  const headphones = buildHeadphones();
+  headphones.position.set(0.85, 1.05, -0.04);
+  headphones.rotation.y = -0.6;
+  bench.add(headphones);
+
+  const cableCurve = new THREE.CatmullRomCurve3([
+    new THREE.Vector3(0.38, 1.1, 0.1),
+    new THREE.Vector3(0.52, 1.07, 0.22),
+    new THREE.Vector3(0.685, 1.08, 0.07),
+  ]);
+  const cable = new THREE.Mesh(
+    new THREE.TubeGeometry(cableCurve, 16, 0.01, 5),
+    lambert(0x2b3138)
+  );
+  cable.castShadow = true;
+  bench.add(cable);
+
+  // a little bird perches on the backrest
+  const bird = buildBird();
+  bird.position.set(1.15, 2.11, -0.62);
+  bird.rotation.y = -0.5;
+  bird.userData.baseY = bird.position.y;
+  bench.add(bird);
+
   const sign = buildSign();
   sign.position.set(-8.3, 0.3, 4.2);
   sign.rotation.y = 0.12;
@@ -931,5 +1097,5 @@ export function buildWorld(scene) {
   const clouds = buildClouds();
   for (const cloud of clouds) scene.add(cloud);
 
-  return { vending, bench, sign, lamp, bigTree, house, clouds };
+  return { vending, bench, sign, lamp, bigTree, house, clouds, bird };
 }