Implement vending machine modal and audio generation features. Updated app.py to include audio URL for browser clients, enhanced index.html with a modal for user interaction, and added corresponding styles in style.css. Improved main.js to manage camera transitions and modal behavior during audio generation.

app.py

@@ -46,7 +46,9 @@ def generate_song(prompt: str) -> dict:
 
     return {
         "title": f"Demo Tape — {prompt[:32] or 'untitled'}",
-        "audio": FileData(path=str(out)),
+        # url is what browser clients play from; the path alone only works
+        # for the python client, which builds the file URL itself
+        "audio": FileData(path=str(out), url=f"/gradio_api/file={out}"),
     }
 
 

frontend/index.html

@@ -6,7 +6,7 @@
   <title>LoFinity</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&display=swap" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;800&family=DotGothic16&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="/static/style.css" />
   <script type="importmap">
     {
@@ -22,6 +22,65 @@
     <p id="subtitle">♪ chill beats, freshly vended</p>
   </div>
   <div id="vending-label"><span>♪ vend a vibe</span></div>
+
+  <div id="machine-modal" class="hidden">
+    <button id="modal-close" aria-label="close">×</button>
+    <div id="led-screen">
+      <p class="led-title">PICK YOUR VIBE<span class="led-cursor">_</span></p>
+      <p class="led-sub">TELL THE MACHINE WHAT TO BREW</p>
+      <textarea id="prompt-input" rows="3" maxlength="200"
+        placeholder="rainy night in kyoto, soft piano, vinyl crackle..."></textarea>
+      <div id="generating" class="hidden">
+        <div class="eq"><i></i><i></i><i></i><i></i><i></i></div>
+        <p class="led-status">BREWING YOUR BEAT<span class="dots">...</span></p>
+      </div>
+      <p id="error-msg" class="hidden"></p>
+    </div>
+    <div id="controls-row">
+      <div id="coin-slot-area">
+        <div id="coin-slot"></div>
+        <svg id="wado-coin" viewBox="0 0 100 100" aria-hidden="true">
+          <defs>
+            <radialGradient id="bronze" cx="35%" cy="30%" r="80%">
+              <stop offset="0%" stop-color="#dcb670" />
+              <stop offset="65%" stop-color="#b08540" />
+              <stop offset="100%" stop-color="#8a6630" />
+            </radialGradient>
+          </defs>
+          <circle cx="50" cy="50" r="47" fill="url(#bronze)" stroke="#7a5a28" stroke-width="4" />
+          <circle cx="50" cy="50" r="38" fill="none" stroke="#8a6a35" stroke-width="1.5" opacity="0.6" />
+          <rect x="41" y="41" width="18" height="18" fill="#3b2c16" stroke="#7a5a28" stroke-width="3" />
+          <text x="50" y="26" text-anchor="middle" dominant-baseline="central" class="wado-kanji">和</text>
+          <text x="75" y="51" text-anchor="middle" dominant-baseline="central" class="wado-kanji">同</text>
+          <text x="50" y="76" text-anchor="middle" dominant-baseline="central" class="wado-kanji">開</text>
+          <text x="25" y="51" text-anchor="middle" dominant-baseline="central" class="wado-kanji">珎</text>
+        </svg>
+      </div>
+      <button id="coin-button">INSERT COIN</button>
+    </div>
+    <div id="cassette-stage" class="hidden">
+      <div id="cassette">
+        <div class="cassette-label"><span id="cassette-title"></span></div>
+        <div class="reels">
+          <span class="reel"></span>
+          <span class="tape-window"></span>
+          <span class="reel"></span>
+        </div>
+      </div>
+      <div id="player">
+        <button id="play-btn" aria-label="play/pause">▶</button>
+        <div id="progress"><div id="progress-fill"></div></div>
+        <span id="time">0:00</span>
+      </div>
+      <button id="again-btn">MAKE ANOTHER</button>
+    </div>
+  </div>
+
+  <div id="now-playing" class="hidden">
+    <button id="np-toggle" aria-label="play/pause">❚❚</button>
+    <span id="np-title"></span>
+  </div>
+  <audio id="tape-audio"></audio>
   <canvas id="scene"></canvas>
   <script type="module" src="/static/main.js"></script>
 </body>

frontend/main.js

@@ -4,6 +4,7 @@
 
 import * as THREE from "three";
 import { buildWorld } from "/static/world.js";
+import { initUI } from "/static/ui.js";
 
 // ---------------------------------------------------------------------------
 // Renderer / scene / camera
@@ -138,7 +139,7 @@ function setVendingHover(hovered) {
 }
 
 function updateVendingHover() {
-  if (intro.phase !== "idle" || !pointerActive) {
+  if (intro.phase !== "idle" || view.mode !== "scene" || !pointerActive) {
     setVendingHover(false);
     return;
   }
@@ -154,12 +155,95 @@ function updateVendingHover() {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Machine view: zoom in on click, modal while zoomed, zoom back out on close
+// ---------------------------------------------------------------------------
+
+// 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);
+const ZOOM_MS = 1500;
+
+const view = {
+  mode: "scene", // scene | zoom-in | machine | zoom-out
+  t0: 0,
+  camFrom: new THREE.Vector3(),
+  camTo: new THREE.Vector3(),
+  lookFrom: new THREE.Vector3(),
+  lookTo: new THREE.Vector3(),
+};
+
+function startViewTransition(mode, camTo, lookTo) {
+  view.mode = mode;
+  view.t0 = performance.now();
+  view.camFrom.copy(camera.position);
+  view.lookFrom.copy(lookTarget);
+  view.camTo.copy(camTo);
+  view.lookTo.copy(lookTo);
+}
+
+function zoomToMachine() {
+  setVendingHover(false);
+  startViewTransition("zoom-in", MACHINE_CAM, MACHINE_LOOK);
+}
+
+function closeMachineView() {
+  ui.closeModal();
+  startViewTransition("zoom-out", CAM_END, LOOK_SCENE);
+}
+
 canvas.addEventListener("click", () => {
-  if (!vendingHovered) return;
-  // Stage 3 continues here: camera zoom + prompt/coin modal
-  console.log("[LoFinity] vending machine clicked");
+  if (vendingHovered && view.mode === "scene" && intro.phase === "idle") {
+    zoomToMachine();
+  }
 });
 
+// Machine glow while generating
+let machineBusy = false;
+const SCREEN_BASE = new THREE.Color(0x1c2f28);
+const DISPENSER_BASE = new THREE.Color(0x10181d);
+
+function setMachineBusy(busy) {
+  machineBusy = busy;
+  if (!busy) {
+    world.vending.userData.screenMaterial.color.copy(SCREEN_BASE);
+    world.vending.userData.dispenserMaterial.color.copy(DISPENSER_BASE);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Backend bridge + modal UI
+// ---------------------------------------------------------------------------
+
+let generateFn = null;
+
+const ui = initUI({
+  generate: (prompt) => {
+    if (!generateFn) return Promise.reject(new Error("backend not connected"));
+    return generateFn(prompt);
+  },
+  onRequestClose: () => {
+    if (view.mode === "machine") closeMachineView();
+  },
+  onGeneratingChange: setMachineBusy,
+});
+
+import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js")
+  .then(async ({ Client }) => {
+    const client = await Client.connect(window.location.origin);
+    generateFn = async (prompt) => {
+      const result = await client.predict("/generate_song", { prompt });
+      const data = result.data[0];
+      const url =
+        data.audio?.url ?? (data.audio?.path ? `/gradio_api/file=${data.audio.path}` : null);
+      if (!url) throw new Error("no audio in response");
+      return { title: data.title, url };
+    };
+    window.lofinity = { generate: generateFn };
+    console.log("[LoFinity] backend connected");
+  })
+  .catch((err) => console.warn("[LoFinity] backend not reachable:", err));
+
 // ---------------------------------------------------------------------------
 // Intro: hold on the sky, then ease the gaze down to the scene
 // ---------------------------------------------------------------------------
@@ -190,7 +274,7 @@ Promise.all([pageLoaded, document.fonts.ready]).then(() =>
 const easeInOutCubic = (t) =>
   t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 
-// Dev helpers: jump straight to either end of the intro.
+// Dev helpers: jump straight to any app state.
 window.lofinityDebug = {
   skipIntro() {
     intro.phase = "idle";
@@ -205,6 +289,16 @@ window.lofinityDebug = {
     lookTarget.copy(LOOK_SKY);
     overlay.classList.remove("hidden");
   },
+  openMachine() {
+    this.skipIntro();
+    view.mode = "machine";
+    camera.position.copy(MACHINE_CAM);
+    lookTarget.copy(MACHINE_LOOK);
+    ui.openModal();
+  },
+  closeMachine() {
+    closeMachineView();
+  },
 };
 
 // ---------------------------------------------------------------------------
@@ -234,7 +328,21 @@ function animate() {
       intro.phase = "idle";
       intro.idleStart = elapsed;
     }
-  } else if (intro.phase === "idle") {
+  } else if (view.mode === "zoom-in" || view.mode === "zoom-out") {
+    const t = Math.min((performance.now() - view.t0) / ZOOM_MS, 1);
+    const e = easeInOutCubic(t);
+    camera.position.lerpVectors(view.camFrom, view.camTo, e);
+    lookTarget.lerpVectors(view.lookFrom, view.lookTo, e);
+    if (t >= 1) {
+      if (view.mode === "zoom-in") {
+        view.mode = "machine";
+        ui.openModal();
+      } else {
+        view.mode = "scene";
+        intro.idleStart = elapsed; // sway ramps back in
+      }
+    }
+  } else if (intro.phase === "idle" && view.mode === "scene") {
     // Gentle lofi sway, ramping in so the descent lands without a jolt
     const tSway = elapsed - intro.idleStart;
     const ramp = Math.min(1, tSway / 5);
@@ -242,25 +350,16 @@ function animate() {
     camera.position.y = CAM_END.y + Math.sin(tSway * 0.4) * 0.12 * ramp;
   }
 
+  if (machineBusy) {
+    // the machine hums while it brews
+    const pulse = 0.5 + 0.5 * Math.sin(elapsed * 6);
+    world.vending.userData.screenMaterial.color.setHSL(0.38, 0.55, 0.12 + 0.3 * pulse);
+    world.vending.userData.dispenserMaterial.color.setHSL(0.13, 0.85, 0.08 + 0.3 * pulse);
+  }
+
   camera.lookAt(lookTarget);
   updateVendingHover();
   renderer.render(scene, camera);
 }
 animate();
 
-// ---------------------------------------------------------------------------
-// Backend bridge (stub check — UI hooks come with the vending machine modal)
-// ---------------------------------------------------------------------------
-
-import("https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js")
-  .then(async ({ Client }) => {
-    const client = await Client.connect(window.location.origin);
-    window.lofinity = {
-      generate: async (prompt) => {
-        const result = await client.predict("/generate_song", { prompt });
-        return result.data[0];
-      },
-    };
-    console.log("[LoFinity] backend connected — try: await lofinity.generate('rainy night')");
-  })
-  .catch((err) => console.warn("[LoFinity] backend not reachable:", err));

frontend/style.css

@@ -153,3 +153,561 @@ body {
     transform: translateY(-7px) rotate(1.2deg);
   }
 }
+
+/* --- vending machine modal: machine control panel -------------------------- */
+
+#machine-modal {
+  position: fixed;
+  top: 50%;
+  right: 5vw;
+  transform: translateY(-50%);
+  transform-origin: 100% 0%;
+  width: min(390px, 86vw);
+  box-sizing: border-box;
+  background: linear-gradient(165deg, #8ed0f4, #6db8e0 70%, #5fabd6);
+  border: 3px solid #4f9cc8;
+  border-radius: 20px;
+  box-shadow:
+    inset 0 2px 0 rgba(255, 255, 255, 0.55),
+    inset 0 -3px 8px rgba(31, 79, 116, 0.35),
+    0 24px 70px rgba(15, 40, 90, 0.4);
+  padding: 22px 20px 18px;
+  font-family: "DotGothic16", "Baloo 2", monospace;
+  color: #1d2a40;
+  z-index: 20;
+}
+
+#machine-modal.hidden {
+  display: none;
+}
+
+/* anime panel entrance: a thin slash from the corner that springs open */
+#machine-modal.opening {
+  animation: modal-in 0.55s cubic-bezier(0.25, 0.9, 0.35, 1.2) both;
+}
+
+@keyframes modal-in {
+  0% {
+    transform: translateY(-50%) scale(0.04, 0.04) skewX(-10deg);
+    opacity: 0;
+  }
+  35% {
+    transform: translateY(-50%) scale(1.06, 0.07) skewX(-7deg);
+    opacity: 1;
+  }
+  62% {
+    transform: translateY(-50%) scale(0.99, 1.06) skewX(2.5deg);
+  }
+  80% {
+    transform: translateY(-50%) scale(1.01, 0.98) skewX(-1deg);
+  }
+  100% {
+    transform: translateY(-50%) scale(1, 1) skewX(0deg);
+  }
+}
+
+#machine-modal.closing {
+  animation: modal-out 0.3s ease-in both;
+}
+
+@keyframes modal-out {
+  0% {
+    transform: translateY(-50%) scale(1, 1);
+    opacity: 1;
+  }
+  45% {
+    transform: translateY(-50%) scale(1.04, 0.06) skewX(-6deg);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%) scale(0.03, 0.03) skewX(-10deg);
+    opacity: 0;
+  }
+}
+
+#modal-close {
+  position: absolute;
+  top: 12px;
+  right: 14px;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 2px solid #16243c;
+  background: #2b3a55;
+  color: #cfe0f0;
+  font-size: 1.05rem;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+}
+
+#modal-close:hover {
+  background: #16243c;
+}
+
+/* --- LED screen ------------------------------------------------------------ */
+
+#led-screen {
+  position: relative;
+  background: #0b120d;
+  border: 2px solid #14241a;
+  border-radius: 12px;
+  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.85);
+  padding: 14px 14px 12px;
+  overflow: hidden;
+}
+
+#led-screen::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0 2px,
+    rgba(0, 0, 0, 0.22) 2px 3px
+  );
+  border-radius: inherit;
+}
+
+.led-title {
+  margin: 0;
+  font-family: "DotGothic16", monospace;
+  font-size: 1.3rem;
+  letter-spacing: 0.1em;
+  color: #5dff8d;
+  text-shadow: 0 0 8px rgba(93, 255, 141, 0.7), 0 0 2px rgba(93, 255, 141, 0.9);
+  animation: led-flicker 4s steps(1) infinite;
+}
+
+.led-cursor {
+  animation: blink 1.1s steps(1) infinite;
+}
+
+.led-sub {
+  margin: 4px 0 0;
+  font-family: "DotGothic16", monospace;
+  font-size: 0.78rem;
+  letter-spacing: 0.12em;
+  color: #3fd470;
+  opacity: 0.8;
+}
+
+@keyframes led-flicker {
+  0%, 93%, 100% { opacity: 1; }
+  94% { opacity: 0.75; }
+  95% { opacity: 1; }
+  97% { opacity: 0.85; }
+  98% { opacity: 1; }
+}
+
+#prompt-input {
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: 12px;
+  font-family: "DotGothic16", monospace;
+  font-size: 1rem;
+  letter-spacing: 0.04em;
+  color: #5dff8d;
+  caret-color: #5dff8d;
+  text-shadow: 0 0 6px rgba(93, 255, 141, 0.5);
+  padding: 10px 12px;
+  border-radius: 8px;
+  border: 1px dashed rgba(93, 255, 141, 0.35);
+  background: rgba(0, 0, 0, 0.3);
+  resize: none;
+  outline: none;
+}
+
+#prompt-input::placeholder {
+  color: rgba(93, 255, 141, 0.3);
+  text-shadow: none;
+}
+
+#prompt-input:focus {
+  border: 1px solid rgba(93, 255, 141, 0.8);
+}
+
+#prompt-input:disabled {
+  opacity: 0.5;
+}
+
+#prompt-input.shake {
+  animation: shake 0.4s ease;
+}
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-6px); }
+  50% { transform: translateX(6px); }
+  75% { transform: translateX(-4px); }
+}
+
+#generating {
+  margin-top: 14px;
+  text-align: center;
+}
+
+.led-status {
+  margin: 10px 0 4px;
+  font-family: "DotGothic16", monospace;
+  font-size: 0.95rem;
+  letter-spacing: 0.1em;
+  color: #5dff8d;
+  text-shadow: 0 0 8px rgba(93, 255, 141, 0.7);
+}
+
+.dots {
+  animation: blink 1.4s steps(1) infinite;
+}
+
+@keyframes blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.15; }
+}
+
+.eq {
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+  align-items: flex-end;
+  height: 34px;
+}
+
+.eq i {
+  width: 7px;
+  border-radius: 2px;
+  background: linear-gradient(#5dff8d, #1f8f4a);
+  box-shadow: 0 0 6px rgba(93, 255, 141, 0.5);
+  animation: eq-bounce 1s ease-in-out infinite;
+}
+
+.eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
+.eq i:nth-child(2) { height: 75%; animation-delay: 0.15s; }
+.eq i:nth-child(3) { height: 100%; animation-delay: 0.3s; }
+.eq i:nth-child(4) { height: 65%; animation-delay: 0.45s; }
+.eq i:nth-child(5) { height: 45%; animation-delay: 0.6s; }
+
+@keyframes eq-bounce {
+  0%, 100% { transform: scaleY(0.5); }
+  50% { transform: scaleY(1); }
+}
+
+/* --- coin slot + red button -------------------------------------------------- */
+
+#controls-row {
+  margin-top: 16px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+#coin-slot-area {
+  position: relative;
+  flex: none;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(#5fabd6, #4f9cc8);
+  border: 2px solid #3f86ad;
+  border-radius: 10px;
+  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -3px 5px rgba(31, 79, 116, 0.4);
+  perspective: 300px;
+}
+
+#coin-slot {
+  width: 10px;
+  height: 40px;
+  background: #0e1116;
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px #000, 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+#wado-coin {
+  position: absolute;
+  width: 46px;
+  height: 46px;
+  left: 50%;
+  top: 50%;
+  margin: -23px 0 0 -23px;
+  opacity: 0;
+  pointer-events: none;
+  filter: drop-shadow(0 3px 4px rgba(20, 30, 50, 0.45));
+}
+
+.wado-kanji {
+  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
+  font-size: 21px;
+  fill: #5d431d;
+}
+
+.inserting #wado-coin {
+  animation: coin-insert 1.15s ease-in-out forwards;
+}
+
+@keyframes coin-insert {
+  0% {
+    opacity: 0;
+    transform: translate(-58px, 16px) rotate(-30deg) scale(0.3);
+  }
+  18% {
+    opacity: 1;
+    transform: translate(-40px, -8px) rotate(-10deg) scale(1.25);
+  }
+  42% {
+    opacity: 1;
+    transform: translate(0, -16px) rotate(0deg) scale(1.1);
+  }
+  60% {
+    opacity: 1;
+    transform: translate(0, -16px) rotateY(80deg) scale(1);
+  }
+  78% {
+    opacity: 1;
+    transform: translate(0, 6px) rotateY(80deg) scale(0.95);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(0, 26px) rotateY(80deg) scale(0.9);
+  }
+}
+
+.inserting #coin-slot {
+  animation: slot-flash 0.35s ease 0.95s;
+}
+
+@keyframes slot-flash {
+  50% { box-shadow: inset 0 0 5px #000, 0 0 12px rgba(93, 255, 141, 0.9); }
+}
+
+#coin-button {
+  flex: 1;
+  padding: 16px 10px;
+  border-radius: 12px;
+  border: 2px solid #a32119;
+  background: linear-gradient(#ff6a5e, #e03a30 55%, #c52d24);
+  color: #fff;
+  font-family: "DotGothic16", monospace;
+  font-size: 1.2rem;
+  letter-spacing: 0.12em;
+  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  box-shadow: 0 5px 0 #8f1d18, inset 0 2px 3px rgba(255, 255, 255, 0.4);
+}
+
+#coin-button:active {
+  transform: translateY(3px);
+  box-shadow: 0 2px 0 #8f1d18, inset 0 2px 3px rgba(255, 255, 255, 0.4);
+}
+
+#coin-button:disabled {
+  cursor: default;
+  filter: saturate(0.7) brightness(0.92);
+}
+
+#cassette-stage {
+  margin-top: 16px;
+}
+
+#cassette {
+  background: linear-gradient(#3a4254, #2c3344);
+  border-radius: 14px;
+  padding-bottom: 4px;
+  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.12), 0 8px 22px rgba(15, 40, 90, 0.3);
+  animation: cassette-out 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes cassette-out {
+  from {
+    transform: translateY(56px) scale(0.92);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+}
+
+.cassette-label {
+  background: #f6f1e3;
+  border: 2px solid #e0d6bd;
+  border-radius: 8px;
+  margin: 12px 14px 10px;
+  padding: 8px 10px;
+  text-align: center;
+  font-weight: 800;
+  font-size: 0.95rem;
+  color: #4a3b2c;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.reels {
+  display: flex;
+  align-items: center;
+  padding: 0 28px 12px;
+}
+
+.reel {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  border: 5px dashed #cfd6e4;
+  background: #1d232f;
+  box-sizing: border-box;
+}
+
+#cassette.playing .reel {
+  animation: reel-spin 2.4s linear infinite;
+}
+
+@keyframes reel-spin {
+  to { transform: rotate(360deg); }
+}
+
+.tape-window {
+  flex: 1;
+  height: 16px;
+  margin: 0 12px;
+  background: #1d232f;
+  border-radius: 8px;
+}
+
+#player {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+#play-btn,
+#np-toggle {
+  width: 44px;
+  height: 44px;
+  flex: none;
+  border-radius: 50%;
+  border: none;
+  background: #ffd84a;
+  color: #3a2c14;
+  font-size: 1rem;
+  cursor: pointer;
+  box-shadow: 0 3px 0 #d9ab1e;
+}
+
+#play-btn:active,
+#np-toggle:active {
+  transform: translateY(2px);
+  box-shadow: 0 1px 0 #d9ab1e;
+}
+
+#progress {
+  flex: 1;
+  height: 8px;
+  border-radius: 4px;
+  background: rgba(13, 26, 43, 0.4);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+#progress-fill {
+  height: 100%;
+  width: 0%;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #5dff8d, #2ea65a);
+  box-shadow: 0 0 6px rgba(93, 255, 141, 0.6);
+}
+
+#time {
+  font-family: "DotGothic16", monospace;
+  font-size: 0.85rem;
+  color: #16213a;
+  min-width: 38px;
+  text-align: right;
+}
+
+#again-btn {
+  margin-top: 14px;
+  width: 100%;
+  padding: 11px;
+  border-radius: 12px;
+  border: 2px solid #16213a;
+  background: linear-gradient(#3a4c6e, #2b3a55);
+  color: #cfe0f0;
+  font-family: "DotGothic16", monospace;
+  font-size: 1rem;
+  letter-spacing: 0.12em;
+  cursor: pointer;
+  box-shadow: 0 4px 0 #16213a, inset 0 2px 2px rgba(255, 255, 255, 0.18);
+}
+
+#again-btn:hover {
+  background: linear-gradient(#465a80, #324466);
+}
+
+#again-btn:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 0 #16213a, inset 0 2px 2px rgba(255, 255, 255, 0.18);
+}
+
+#error-msg {
+  font-family: "DotGothic16", monospace;
+  color: #ff6b5e;
+  text-shadow: 0 0 8px rgba(255, 107, 94, 0.7);
+  font-size: 0.88rem;
+  letter-spacing: 0.08em;
+  margin: 10px 0 0;
+  text-align: center;
+}
+
+#error-msg.hidden,
+#controls-row.hidden,
+#prompt-input.hidden,
+#generating.hidden,
+#cassette-stage.hidden {
+  display: none;
+}
+
+/* --- now playing pill ------------------------------------------------------ */
+
+#now-playing {
+  position: fixed;
+  left: 18px;
+  bottom: 18px;
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 18px 8px 8px;
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border-radius: 999px;
+  box-shadow: 0 8px 24px rgba(15, 40, 90, 0.25);
+  font-family: "Baloo 2", sans-serif;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #2b3a55;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+#now-playing.hidden {
+  opacity: 0;
+  transform: translateY(12px);
+  pointer-events: none;
+}
+
+#now-playing #np-toggle {
+  width: 36px;
+  height: 36px;
+  font-size: 0.85rem;
+}
+
+#np-title {
+  max-width: 230px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/ui.js

@@ -0,0 +1,174 @@
+// LoFinity — vending machine modal: prompt → coin drop → brewing → cassette.
+// main.js owns the camera; this module owns the DOM and the audio element.
+
+const $ = (id) => document.getElementById(id);
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export function initUI({ generate, onRequestClose, onGeneratingChange }) {
+  const modal = $("machine-modal");
+  const input = $("prompt-input");
+  const coinBtn = $("coin-button");
+  const controlsRow = $("controls-row");
+  const generating = $("generating");
+  const cassetteStage = $("cassette-stage");
+  const cassette = $("cassette");
+  const cassetteTitle = $("cassette-title");
+  const errorMsg = $("error-msg");
+  const audio = $("tape-audio");
+  const playBtn = $("play-btn");
+  const progress = $("progress");
+  const progressFill = $("progress-fill");
+  const timeEl = $("time");
+  const pill = $("now-playing");
+  const pillToggle = $("np-toggle");
+  const pillTitle = $("np-title");
+
+  audio.loop = true; // a cassette of endless chill
+  let busy = false;
+
+  function setStage(stage) {
+    controlsRow.classList.toggle("hidden", stage !== "prompt");
+    generating.classList.toggle("hidden", stage !== "generating");
+    cassetteStage.classList.toggle("hidden", stage !== "cassette");
+    input.classList.toggle("hidden", stage === "cassette");
+    input.disabled = stage === "generating";
+    if (stage === "prompt") {
+      controlsRow.classList.remove("inserting");
+      coinBtn.disabled = false;
+    }
+  }
+
+  function currentStage() {
+    if (busy) return "generating";
+    return audio.src ? "cassette" : "prompt";
+  }
+
+  function showError(message) {
+    errorMsg.textContent = message;
+    errorMsg.classList.remove("hidden");
+  }
+
+  async function startGeneration() {
+    if (busy) return;
+    const prompt = input.value.trim();
+    if (!prompt) {
+      input.classList.remove("shake");
+      void input.offsetWidth; // restart the animation
+      input.classList.add("shake");
+      input.focus();
+      return;
+    }
+    busy = true;
+    errorMsg.classList.add("hidden");
+    coinBtn.disabled = true;
+    controlsRow.classList.add("inserting");
+    await delay(1200); // the wadōkaichin makes its way into the slot
+    setStage("generating");
+    onGeneratingChange(true);
+    try {
+      // hold the brewing moment even if the backend is fast
+      const [result] = await Promise.all([generate(prompt), delay(2600)]);
+      loadCassette(result);
+      busy = false;
+      setStage("cassette");
+    } catch (err) {
+      console.error("[LoFinity] generation failed:", err);
+      busy = false;
+      setStage("prompt");
+      showError("the machine jammed — try again?");
+    } finally {
+      onGeneratingChange(false);
+      syncPill();
+    }
+  }
+
+  function loadCassette({ title, url }) {
+    cassetteTitle.textContent = title;
+    pillTitle.textContent = title;
+    audio.src = url;
+    audio.play().catch(() => {});
+  }
+
+  // --- audio wiring ---------------------------------------------------------
+
+  const fmt = (s) =>
+    `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
+
+  function syncPlayState() {
+    const playing = !audio.paused;
+    playBtn.textContent = playing ? "❚❚" : "▶";
+    pillToggle.textContent = playing ? "❚❚" : "▶";
+    cassette.classList.toggle("playing", playing);
+  }
+
+  audio.addEventListener("play", syncPlayState);
+  audio.addEventListener("pause", syncPlayState);
+  audio.addEventListener("timeupdate", () => {
+    if (audio.duration) {
+      progressFill.style.width = `${(audio.currentTime / audio.duration) * 100}%`;
+    }
+    timeEl.textContent = fmt(audio.currentTime);
+  });
+
+  const togglePlay = () => (audio.paused ? audio.play() : audio.pause());
+  playBtn.addEventListener("click", togglePlay);
+  pillToggle.addEventListener("click", togglePlay);
+
+  progress.addEventListener("click", (e) => {
+    if (!audio.duration) return;
+    const rect = progress.getBoundingClientRect();
+    audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;
+  });
+
+  // --- modal controls ---------------------------------------------------------
+
+  coinBtn.addEventListener("click", startGeneration);
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      startGeneration();
+    }
+  });
+  $("again-btn").addEventListener("click", () => {
+    setStage("prompt");
+    input.focus();
+    input.select();
+  });
+  $("modal-close").addEventListener("click", () => onRequestClose());
+  window.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && !modal.classList.contains("hidden")) {
+      onRequestClose();
+    }
+  });
+
+  function syncPill() {
+    const modalHidden = modal.classList.contains("hidden");
+    pill.classList.toggle("hidden", !(audio.src && modalHidden));
+  }
+
+  let closeTimer = null;
+
+  return {
+    openModal() {
+      clearTimeout(closeTimer);
+      modal.classList.remove("hidden", "closing");
+      void modal.offsetWidth; // restart the entrance animation
+      modal.classList.add("opening");
+      setStage(currentStage());
+      syncPill();
+      if (!audio.src && !busy) setTimeout(() => input.focus(), 600);
+    },
+    closeModal() {
+      if (modal.classList.contains("hidden")) return;
+      modal.classList.remove("opening");
+      modal.classList.add("closing");
+      clearTimeout(closeTimer);
+      closeTimer = setTimeout(() => {
+        modal.classList.add("hidden");
+        modal.classList.remove("closing");
+        syncPill();
+      }, 300);
+      syncPill();
+    },
+  };
+}

frontend/world.js

@@ -338,6 +338,10 @@ function buildVendingMachine() {
   dispenserInner.position.set(-0.3, 0.5, 0.97);
   g.add(dispenserInner);
 
+  // referenced by main.js to make the machine glow while generating
+  g.userData.screenMaterial = screen.material;
+  g.userData.dispenserMaterial = dispenserInner.material;
+
   // Door handle
   const handle = box(0.1, 1.2, 0.07, lambert(0xd8e6ee));
   handle.position.set(0.45, 2.9, 1.0);