sync latest frontend + README (social links, corrected tags)

README.md

@@ -30,7 +30,7 @@ Most translators show you a destination. **Lingo Bridge shows you the journey.**
 
 ## 🎬 Demo
 
-▶ **[Demo video](docs/demo.mp4)**  ·  📣 **[Social post](https://x.com/)** _(add link)_
+▶ **[Demo video](docs/demo.mp4)**  ·  📣 **Social posts:** [X/Twitter](https://x.com/auracanvas/status/2066666490871558485) · [Bluesky](https://bsky.app/profile/auracanvas.bsky.social/post/3moehclek7k26)
 
 ![Lingo Bridge](docs/poster.png)
 
@@ -79,6 +79,6 @@ python3 app.py
 - **REQ-01 ≤32B/model** — Qwen3-4B + VoxCPM2 (2B). ✓
 - **REQ-02 Gradio Space in the org** — Docker Space `build-small-hackathon/lingo-bridge`. ✓
 - **REQ-03 Demo video** — [docs/demo.mp4](docs/demo.mp4). ✓
-- **REQ-04 Social post** — _add the link above._ ⬜
+- **REQ-04 Social post** — [X](https://x.com/auracanvas/status/2066666490871558485) · [Bluesky](https://bsky.app/profile/auracanvas.bsky.social/post/3moehclek7k26). ✓
 - **REQ-05 ZeroGPU limit** — n/a (GPU on Modal, not ZeroGPU). ✓
 - **REQ-06 README tags + write-up** — above. ✓

docs/social_post.md

@@ -0,0 +1,55 @@
+# Social posts — Lingo Bridge (copy & post, then send me the URL)
+
+Space: https://huggingface.co/spaces/build-small-hackathon/lingo-bridge
+📎 Attach the demo video (`docs/demo.mp4`) to the post — it's the whole pitch.
+
+---
+
+## ▶ Option A — X / Twitter (single post, ~280 chars)
+
+🌉 Most translators show you the destination. Lingo Bridge shows you the *journey*.
+
+Watch — and HEAR — a sentence morph into another language across 7 layers: meaning crosses first, then grammar, then word order, in 3D.
+
+All small, local models. #BuildSmall
+
+https://huggingface.co/spaces/build-small-hackathon/lingo-bridge
+
+---
+
+## 🧵 Option B — X / Twitter thread
+
+1/ 🌉 Lingo Bridge: don't just translate a sentence — *watch and hear it become* another language.
+
+Built for the @huggingface × @Gradio #BuildSmall hackathon. 7 stages, 3D, spoken at every step. 👇
+https://huggingface.co/spaces/build-small-hackathon/lingo-bridge
+
+2/ How it works: one small text model (Qwen3-4B) breaks the sentence into phrase "units" and aligns them. Then 7 layers build deterministically — meaning flips first, then actions, time, grammar, and finally the word order rearranges into crossing ribbons. 🟪→🟦
+
+3/ Every layer is spoken aloud by @OpenBMB's VoxCPM2 (built on MiniCPM-4) — 48kHz, 10 languages. The whole thing runs on @modal GPUs and scales to zero. Tiny models, big toy. 🐜
+
+4/ Off-the-shelf translators give you an answer. This gives you the *transformation* — a little language toy you can watch think. Try it 👇
+https://huggingface.co/spaces/build-small-hackathon/lingo-bridge
+
+---
+
+## 💼 Option C — LinkedIn
+
+🌉 I built **Lingo Bridge** for the Hugging Face × Gradio "Build Small" hackathon.
+
+Most translators show you the destination. Lingo Bridge shows you the *journey*: it turns one sentence into a 7-stage transformation from one language to another — meaning crosses first, then actions, then time words, then grammar, and finally the word order rearranges — rendered as an interactive 3D card stack and **spoken aloud at every stage**.
+
+It runs entirely on small, open models (each well under 32B):
+• Qwen3-4B (text decomposition) via llama.cpp
+• OpenBMB VoxCPM2 — built on MiniCPM-4 — for speech, in 10 languages
+• Served on Modal GPUs (scale-to-zero), behind a custom Three.js UI in a Gradio Space
+
+Try it: https://huggingface.co/spaces/build-small-hackathon/lingo-bridge
+
+#BuildSmall #HuggingFace #Gradio #SmallModels #AI
+
+---
+
+## Hashtags / handles to consider
+#BuildSmall #HuggingFace #Gradio #SmallModels #LocalAI
+@huggingface @Gradio @OpenBMB @modal

docs/transcript.txt

@@ -0,0 +1 @@
+Meet Lingo Bridge, where a sentence becomes another language right before your eyes. Instead of one sudden jump, meaning crosses over first, then actions, time words, and grammar follow, and finally the word order rearranges into place. Each stage appears as a glowing card in an interactive 3D stack, and every step is spoken aloud so you can hear the language take shape. It runs on a compact Qwen language model and the VoxCPM speech engine, all served from the cloud. Explore the layers, orbit the stack, and watch translation unfold one bridge at a time.

static/app.js

@@ -145,7 +145,10 @@ const hooks = {
     state.hover = unit;
     state.cards.setHover(unit);
   },
-  onPlay: (layerIdx) => playLayer(layerIdx),
+  onPlay: (layerIdx) => {
+    if (state.playing) stopPlaying();
+    playLayer(layerIdx);
+  },
   onPerspectiveChange: (t) => {
     // Called by CardsView when animating perspective automatically
     const slider = $("#perspective-slider");
@@ -194,6 +197,8 @@ function showLoader(on, msg) {
 
 // ---- audio -----------------------------------------------------------------
 const player = $("#player");
+let currentPlayResolve = null;
+
 function langForLayer(idx) {
   if (!state.data) return "English";
   return idx === 0 ? state.data.source_lang : state.data.target_lang;
@@ -208,6 +213,12 @@ async function ttsUrl(text, lang) {
 }
 async function playLayer(idx) {
   if (!state.data) return;
+  
+  if (currentPlayResolve) {
+    currentPlayResolve();
+    currentPlayResolve = null;
+  }
+  
   const layer = state.data.layers[idx];
   highlightLayer(idx);
   // Precomputed examples ship per-layer audio -> play instantly, no TTS call.
@@ -215,7 +226,9 @@ async function playLayer(idx) {
   player.src = url;
   await player.play().catch(() => {});
   return new Promise((res) => {
+    currentPlayResolve = res;
     player.onended = () => {
+      currentPlayResolve = null;
       if (!state.playing) {
         highlightLayer(-1);
       }
@@ -226,19 +239,39 @@ async function playLayer(idx) {
 function highlightLayer(idx) {
   state.cards.highlightLayer(idx);
 }
+function stopPlaying() {
+  state.playing = false;
+  player.pause();
+  player.src = "";
+  if (currentPlayResolve) {
+    currentPlayResolve();
+    currentPlayResolve = null;
+  }
+  $("#playall").classList.remove("playing");
+  $("#playall").textContent = "▶ Play all layers";
+  highlightLayer(-1);
+}
 async function playAll() {
-  if (!state.data || state.playing) return;
+  if (!state.data) return;
+  if (state.playing) {
+    stopPlaying();
+    return;
+  }
+  
   state.playing = true;
   $("#playall").classList.add("playing");
-  $("#playall").textContent = "■ Playing…";
+  $("#playall").textContent = "■ Stop playing";
   for (let i = 0; i < state.data.layers.length; i++) {
     if (!state.playing) break;
     await playLayer(i);
   }
-  state.playing = false;
-  $("#playall").classList.remove("playing");
-  $("#playall").textContent = "▶ Play all layers";
-  highlightLayer(-1);
+  
+  if (state.playing) {
+    state.playing = false;
+    $("#playall").classList.remove("playing");
+    $("#playall").textContent = "▶ Play all layers";
+    highlightLayer(-1);
+  }
 }
 
 boot();

static/view3d.js

@@ -1,6 +1,6 @@
 import * as THREE from "three";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
-import { mixRGB } from "/static/app.js?v=19";
+import { mixRGB } from "/static/app.js?v=20";
 
 const col = (mix) => {
   const [r, g, b] = mixRGB(mix);
@@ -966,7 +966,7 @@ export class CardsView {
 
     // Zoom in closer
     const { minRadius } = this._getRadii();
-    this.targetCamRadius = minRadius + 5.0; // Zoom in nicely to frame the focused row
+    this.targetCamRadius = minRadius + 11.0; // Zoom in nicely to frame the focused row, keeping it slightly zoomed out per user preference
   }
 
   _resize() {