Enhance interactable features and visual labels in the scene. Updated index.html to add a new collection label, modified main.js to manage hover interactions for both vending machine and cassette collection, and adjusted style.css for consistent label styling. Improved world.js to include outlines for the cassette pile and walkman, enabling better user interaction.

frontend/index.html

@@ -21,7 +21,8 @@
     <h1 id="title">LoFinity</h1>
     <p id="subtitle">♪ chill beats, freshly vended</p>
   </div>
-  <div id="vending-label"><span>♪ vend a vibe</span></div>
+  <div id="vending-label" class="hover-label"><span>♪ vend a vibe</span></div>
+  <div id="collection-label" class="hover-label"><span>♪ cassette collection</span></div>
 
   <div id="machine-modal" class="hidden">
     <button id="modal-close" aria-label="close">×</button>

frontend/main.js

@@ -125,17 +125,37 @@ world.bird.matrixAutoUpdate = true;
 world.bird.userData.tail.matrixAutoUpdate = true;
 
 // ---------------------------------------------------------------------------
-// Vending machine interaction: hover outline + floating label, click hook
+// Interactables: hover outline + floating label, click hook
 // ---------------------------------------------------------------------------
 
 const raycaster = new THREE.Raycaster();
 const pointerNDC = new THREE.Vector2(-2, -2); // offscreen until first move
 let pointerActive = false;
-let vendingHovered = false;
+let hoveredItem = null;
 
-const vendingLabel = document.getElementById("vending-label");
 const labelAnchor = new THREE.Vector3();
-const LABEL_OFFSET_Y = 5.6; // above the machine top
+
+// anchors are precomputed: nothing interactable ever moves
+const collectionAnchor = world.collection.getWorldPosition(new THREE.Vector3());
+
+const interactables = [
+  {
+    object: world.vending,
+    outlines: [world.vending.userData.outline],
+    label: document.getElementById("vending-label"),
+    anchor: world.vending.position.clone(),
+    labelOffsetY: 5.6, // above the machine top
+    onClick: () => zoomToMachine(),
+  },
+  {
+    object: world.collection,
+    outlines: world.collection.userData.outlines,
+    label: document.getElementById("collection-label"),
+    anchor: collectionAnchor,
+    labelOffsetY: 1.15, // above the bench backrest
+    onClick: () => zoomToBench(),
+  },
+];
 
 window.addEventListener("pointermove", (e) => {
   pointerNDC.set(
@@ -148,42 +168,57 @@ document.addEventListener("pointerleave", () => {
   pointerActive = false;
 });
 
-function setVendingHover(hovered) {
-  if (hovered === vendingHovered) return;
-  vendingHovered = hovered;
-  world.vending.userData.outline.visible = hovered;
-  vendingLabel.classList.toggle("visible", hovered);
-  canvas.style.cursor = hovered ? "pointer" : "";
+function setHoveredItem(item) {
+  if (item === hoveredItem) return;
+  if (hoveredItem) {
+    for (const outline of hoveredItem.outlines) outline.visible = false;
+    hoveredItem.label.classList.remove("visible");
+  }
+  hoveredItem = item;
+  if (item) {
+    for (const outline of item.outlines) outline.visible = true;
+    item.label.classList.add("visible");
+  }
+  canvas.style.cursor = item ? "pointer" : "";
 }
 
-function updateVendingHover() {
+function updateHover() {
   if (intro.phase !== "idle" || view.mode !== "scene" || !pointerActive) {
-    setVendingHover(false);
+    setHoveredItem(null);
     return;
   }
   raycaster.setFromCamera(pointerNDC, camera);
-  setVendingHover(raycaster.intersectObject(world.vending, true).length > 0);
+  setHoveredItem(
+    interactables.find(
+      (item) => raycaster.intersectObject(item.object, true).length > 0
+    ) ?? null
+  );
 
-  if (vendingHovered) {
-    labelAnchor.copy(world.vending.position);
-    labelAnchor.y += LABEL_OFFSET_Y;
+  if (hoveredItem) {
+    labelAnchor.copy(hoveredItem.anchor);
+    labelAnchor.y += hoveredItem.labelOffsetY;
     labelAnchor.project(camera);
-    vendingLabel.style.left = `${((labelAnchor.x + 1) / 2) * window.innerWidth}px`;
-    vendingLabel.style.top = `${((1 - labelAnchor.y) / 2) * window.innerHeight}px`;
+    hoveredItem.label.style.left = `${((labelAnchor.x + 1) / 2) * window.innerWidth}px`;
+    hoveredItem.label.style.top = `${((1 - labelAnchor.y) / 2) * window.innerHeight}px`;
   }
 }
 
 // ---------------------------------------------------------------------------
-// Machine view: zoom in on click, modal while zoomed, zoom back out on close
+// Zoom views: machine (modal while zoomed) and bench (a close look at the
+// tapes). Click zooms in, close/Esc/click zooms back out.
 // ---------------------------------------------------------------------------
 
 // Frames the machine on the left so the modal card sits beside it.
 const MACHINE_CAM = new THREE.Vector3(-2.3, 3.0, 10.8);
 const MACHINE_LOOK = new THREE.Vector3(-2.9, 2.6, 4.2);
+// Leans over the bench seat where the tapes and walkman rest.
+const BENCH_CAM = new THREE.Vector3(1.3, 3.3, 8.4);
+const BENCH_LOOK = new THREE.Vector3(1.3, 1.15, 4.4);
 const ZOOM_MS = 1500;
 
 const view = {
-  mode: "scene", // scene | zoom-in | machine | zoom-out
+  mode: "scene", // scene | zoom-in | machine | bench | zoom-out
+  target: "machine", // what the current zoom-in lands on
   t0: 0,
   camFrom: new THREE.Vector3(),
   camTo: new THREE.Vector3(),
@@ -201,21 +236,38 @@ function startViewTransition(mode, camTo, lookTo) {
 }
 
 function zoomToMachine() {
-  setVendingHover(false);
+  setHoveredItem(null);
+  view.target = "machine";
   startViewTransition("zoom-in", MACHINE_CAM, MACHINE_LOOK);
 }
 
+function zoomToBench() {
+  setHoveredItem(null);
+  view.target = "bench";
+  startViewTransition("zoom-in", BENCH_CAM, BENCH_LOOK);
+}
+
 function closeMachineView() {
   ui.closeModal();
   startViewTransition("zoom-out", CAM_END, LOOK_SCENE);
 }
 
+function closeBenchView() {
+  startViewTransition("zoom-out", CAM_END, LOOK_SCENE);
+}
+
 canvas.addEventListener("click", () => {
-  if (vendingHovered && view.mode === "scene" && intro.phase === "idle") {
-    zoomToMachine();
+  if (hoveredItem && view.mode === "scene" && intro.phase === "idle") {
+    hoveredItem.onClick();
+  } else if (view.mode === "bench") {
+    closeBenchView();
   }
 });
 
+window.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && view.mode === "bench") closeBenchView();
+});
+
 // Machine glow while generating
 let machineBusy = false;
 const SCREEN_BASE = new THREE.Color(0x1c2f28);
@@ -317,6 +369,12 @@ window.lofinityDebug = {
   closeMachine() {
     closeMachineView();
   },
+  openBench() {
+    this.skipIntro();
+    view.mode = "bench";
+    camera.position.copy(BENCH_CAM);
+    lookTarget.copy(BENCH_LOOK);
+  },
   stats() {
     return { ...renderer.info.render, ...renderer.info.memory };
   },
@@ -392,8 +450,8 @@ function animate(now = 0) {
     lookTarget.lerpVectors(view.lookFrom, view.lookTo, e);
     if (t >= 1) {
       if (view.mode === "zoom-in") {
-        view.mode = "machine";
-        ui.openModal();
+        view.mode = view.target;
+        if (view.target === "machine") ui.openModal();
       } else {
         view.mode = "scene";
         intro.idleStart = elapsed; // sway ramps back in
@@ -415,7 +473,7 @@ function animate(now = 0) {
   }
 
   camera.lookAt(lookTarget);
-  updateVendingHover();
+  updateHover();
   renderer.render(scene, camera);
 }
 animate();

frontend/style.css

@@ -86,7 +86,7 @@ body {
   }
 }
 
-#vending-label {
+.hover-label {
   position: fixed;
   left: 0;
   top: 0;
@@ -97,11 +97,11 @@ body {
   transition: opacity 0.18s ease;
 }
 
-#vending-label.visible {
+.hover-label.visible {
   opacity: 1;
 }
 
-#vending-label span {
+.hover-label span {
   position: relative;
   display: inline-block;
   font-family: "Baloo 2", sans-serif;
@@ -115,7 +115,7 @@ body {
   white-space: nowrap;
 }
 
-#vending-label span::after {
+.hover-label span::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -128,7 +128,7 @@ body {
   z-index: -1;
 }
 
-#vending-label.visible span {
+.hover-label.visible span {
   animation:
     label-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both,
     label-bob 2s ease-in-out 0.45s infinite alternate;

frontend/world.js

@@ -448,7 +448,27 @@ function buildCassettePile() {
     if (i === placements.length - 1) cassette.rotation.z = 0.07;
     g.add(cassette);
   });
-  return shadows(g);
+  shadows(g);
+
+  // Hover outline: one back-face hull per cassette so the highlight follows
+  // the silhouette of the pile (same trick as the vending machine).
+  const outline = new THREE.Group();
+  const outlineMaterial = new THREE.MeshBasicMaterial({
+    color: 0xffd84a,
+    side: THREE.BackSide,
+  });
+  placements.forEach(([x, y, z, yaw], i) => {
+    const hull = box(0.54, 0.16, 0.38, outlineMaterial);
+    hull.position.set(x, y + 0.04, z);
+    hull.rotation.y = yaw;
+    if (i === placements.length - 1) hull.rotation.z = 0.07;
+    outline.add(hull);
+  });
+  outline.visible = false;
+  g.add(outline);
+  g.userData.outline = outline;
+
+  return g;
 }
 
 // --- walkman + vintage headphones ---------------------------------------------
@@ -472,7 +492,21 @@ function buildWalkman() {
     button.position.set(0.19, 0.12, -0.1 + i * 0.1);
     g.add(button);
   });
-  return shadows(g);
+  shadows(g);
+
+  // Hover outline hull (see buildCassettePile)
+  const outline = new THREE.Group();
+  const hull = box(0.6, 0.22, 0.46, new THREE.MeshBasicMaterial({
+    color: 0xffd84a,
+    side: THREE.BackSide,
+  }));
+  hull.position.y = 0.075;
+  outline.add(hull);
+  outline.visible = false;
+  g.add(outline);
+  g.userData.outline = outline;
+
+  return g;
 }
 
 function buildHeadphones() {
@@ -979,17 +1013,26 @@ export function buildWorld(scene) {
   bench.position.set(1.7, 0.3, 4.4);
   scene.add(bench);
 
-  // someone left their tape collection on the bench…
+  // someone left their tape collection on the bench… (clickable as a group)
+  const collection = new THREE.Group();
+  collection.position.set(-0.4, 1.05, 0);
+  bench.add(collection);
+
   const cassettes = buildCassettePile();
-  cassettes.position.set(-1.0, 1.05, -0.05);
+  cassettes.position.set(-0.6, 0, -0.05);
   cassettes.rotation.y = -0.2;
-  bench.add(cassettes);
+  collection.add(cassettes);
 
   // …with their walkman and headphones beside it
   const walkman = buildWalkman();
-  walkman.position.set(0.15, 1.05, 0.02);
+  walkman.position.set(0.55, 0, 0.02);
   walkman.rotation.y = 0.35;
-  bench.add(walkman);
+  collection.add(walkman);
+
+  collection.userData.outlines = [
+    cassettes.userData.outline,
+    walkman.userData.outline,
+  ];
 
   const headphones = buildHeadphones();
   headphones.position.set(0.85, 1.05, -0.04);
@@ -1097,5 +1140,5 @@ export function buildWorld(scene) {
   const clouds = buildClouds();
   for (const cloud of clouds) scene.add(cloud);
 
-  return { vending, bench, sign, lamp, bigTree, house, clouds, bird };
+  return { vending, bench, collection, sign, lamp, bigTree, house, clouds, bird };
 }