From 7b5b20cfd2c27da66f570d54cf189cf5d7500e69 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Mon, 13 Oct 2025 09:54:04 -0700
Subject: [PATCH 1/4] Deform the mesh on drag/zoom.

---
 app/src/components/meme-selector.tsx |  22 ++-
 app/src/room/broadcast.ts            |  30 +++++
 app/src/room/gl/border.ts            |  88 ++++++------
 app/src/room/gl/border.vert          |  45 ++++++-
 app/src/room/gl/broadcast.ts         | 109 +++++++--------
 app/src/room/gl/broadcast.vert       |  46 ++++++-
 app/src/room/gl/mesh.ts              | 194 +++++++++++++++++++++++++++
 app/src/room/gl/outline.ts           |  90 +++++++------
 app/src/room/gl/outline.vert         |  46 ++++++-
 app/src/room/space.ts                |  65 +++++++--
 moq                                  |   2 +-
 11 files changed, 565 insertions(+), 172 deletions(-)
 create mode 100644 app/src/room/gl/mesh.ts

diff --git a/app/src/components/meme-selector.tsx b/app/src/components/meme-selector.tsx
index e88cef80..7686569a 100644
--- a/app/src/components/meme-selector.tsx
+++ b/app/src/components/meme-selector.tsx
@@ -117,7 +117,12 @@ export function MemeSelector(props: MemeSelectorProps): JSX.Element {
 		setPlayingAudioMeme(null);
 
 		if (type === "audio") {
-			const audio = new Audio(new URL(`/meme/${MEME_AUDIO[memeName as keyof typeof MEME_AUDIO].file}`, import.meta.env.VITE_APP_URL).toString());
+			const audio = new Audio(
+				new URL(
+					`/meme/${MEME_AUDIO[memeName as keyof typeof MEME_AUDIO].file}`,
+					import.meta.env.VITE_APP_URL,
+				).toString(),
+			);
 			audio.volume = 0.5; // Lower volume for preview
 			audio.play();
 			setPreviewAudio(audio);
@@ -131,7 +136,10 @@ export function MemeSelector(props: MemeSelectorProps): JSX.Element {
 		} else {
 			// For video, play with sound
 			const video = document.createElement("video");
-			video.src = new URL(`/meme/${MEME_VIDEO[memeName as keyof typeof MEME_VIDEO].file}`, import.meta.env.VITE_APP_URL).toString();
+			video.src = new URL(
+				`/meme/${MEME_VIDEO[memeName as keyof typeof MEME_VIDEO].file}`,
+				import.meta.env.VITE_APP_URL,
+			).toString();
 			video.volume = 0.5;
 			video.style.display = "none";
 			document.body.appendChild(video);
@@ -310,7 +318,10 @@ export function MemeSelector(props: MemeSelectorProps): JSX.Element {
 									<div class="group relative bg-white/10 hover:bg-white/20 rounded overflow-hidden transition-colors cursor-pointer aspect-video basis-42 flex-grow">
 										{/* Thumbnail background */}
 										<img
-											src={new URL(`/meme/${thumbnailName}`, import.meta.env.VITE_APP_URL).toString()}
+											src={new URL(
+												`/meme/${thumbnailName}`,
+												import.meta.env.VITE_APP_URL,
+											).toString()}
 											alt={meme}
 											class="absolute inset-0 w-full h-full opacity-30"
 											style={{
@@ -321,7 +332,10 @@ export function MemeSelector(props: MemeSelectorProps): JSX.Element {
 										{/* Video preview when playing */}
 										<Show when={isPlaying()}>
 											<video
-												src={new URL(`/meme/${memeData.file}`, import.meta.env.VITE_APP_URL).toString()}
+												src={new URL(
+													`/meme/${memeData.file}`,
+													import.meta.env.VITE_APP_URL,
+												).toString()}
 												autoplay
 												muted
 												class="absolute inset-0 w-full h-full opacity-70"
diff --git a/app/src/room/broadcast.ts b/app/src/room/broadcast.ts
index d8476aea..920ab0ac 100644
--- a/app/src/room/broadcast.ts
+++ b/app/src/room/broadcast.ts
@@ -6,6 +6,7 @@ import { Captions } from "./captions";
 import { Chat } from "./chat";
 import { FakeBroadcast } from "./fake";
 import { Bounds, Vector } from "./geometry";
+import { MeshBuffer } from "./gl/mesh";
 import { Meme } from "./meme";
 import { Name } from "./name";
 import { Sound } from "./sound";
@@ -52,6 +53,22 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 	bounds: Signal<Bounds>; // 0 to canvas
 	velocity = Vector.create(0, 0); // in pixels per ?
 
+	// Drag point in normalized coordinates (0-1) relative to the broadcast
+	dragPoint = new Signal<Vector>(Vector.create(0.5, 0.5));
+
+	// Deformation velocity for the drag effect (decays independently from physics velocity)
+	deformVelocity = Vector.create(0, 0);
+
+	// Zoom deformation for scaling effect (positive = expanding, negative = contracting)
+	// Only applies during user-initiated zooming (mouse wheel or pinch)
+	zoomDeform = 0;
+
+	// Zoom center point in normalized coordinates (0-1) relative to the broadcast
+	zoomCenter = new Signal<Vector>(Vector.create(0.5, 0.5));
+
+	// Shared mesh buffer for all renderers
+	mesh: MeshBuffer;
+
 	// Replaced by position
 	//targetPosition = Vector.create(0, 0); // -0.5 to 0.5, sent over the network
 	//targetScale = 1.0; // 1 is 100%
@@ -83,6 +100,9 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 		this.visible = new Signal(true); // TODO
 		this.scale = props.scale;
 
+		// Create shared mesh buffer
+		this.mesh = new MeshBuffer(props.canvas);
+
 		// Unless provided, start them at the center of the screen with a tiiiiny bit of variance to break ties.
 		const start = () => (Math.random() - 0.5) / 100;
 		const position = {
@@ -200,6 +220,9 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 		this.audio.tick();
 		this.video.tick(now);
 
+		// Update mesh based on velocity
+		this.mesh.update(this.velocity);
+
 		// Update opacity based on online status
 		const fadeTime = 300; // ms
 		const elapsed = now - this.#onlineTransition;
@@ -279,6 +302,12 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 
 		// Slow down the velocity for the next frame.
 		this.velocity = this.velocity.mult(0.5);
+
+		// Decay the deformation velocity smoothly over time (faster decay than physics velocity)
+		this.deformVelocity = this.deformVelocity.mult(0.85);
+
+		// Decay zoom deformation (set by user interaction in Space)
+		this.zoomDeform *= 0.9;
 	}
 
 	// Returns true if the broadcaster is locked to a position.
@@ -303,6 +332,7 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 		this.chat.close();
 		this.captions.close();
 		this.name.close();
+		this.mesh.close();
 
 		// NOTE: Don't close the source broadcast; we need it for the local preview.
 		// this.source.close();
diff --git a/app/src/room/gl/border.ts b/app/src/room/gl/border.ts
index 4ee80793..91f455ce 100644
--- a/app/src/room/gl/border.ts
+++ b/app/src/room/gl/border.ts
@@ -3,14 +3,13 @@ import { Canvas } from "../canvas";
 import borderFragSource from "./border.frag?raw";
 import borderVertSource from "./border.vert?raw";
 import type { Camera } from "./camera";
+import type { MeshBuffer } from "./mesh";
 import { Attribute, Shader, Uniform1f, Uniform2f, Uniform4f, UniformMatrix4fv } from "./shader";
 
 export class BorderRenderer {
 	#canvas: Canvas;
 	#program: Shader;
-	#vao: WebGLVertexArrayObject;
-	#positionBuffer: WebGLBuffer;
-	#indexBuffer: WebGLBuffer;
+	#vaos = new Map<MeshBuffer, WebGLVertexArrayObject>();
 
 	// Typed uniforms
 	#u_projection: UniformMatrix4fv;
@@ -19,6 +18,11 @@ export class BorderRenderer {
 	#u_radius: Uniform1f;
 	#u_size: Uniform2f;
 	#u_opacity: Uniform1f;
+	#u_dragPoint: Uniform2f;
+	#u_velocity: Uniform2f;
+	#u_dragStrength: Uniform1f;
+	#u_zoomDeform: Uniform1f;
+	#u_zoomCenter: Uniform2f;
 
 	// Typed attributes
 	#a_position: Attribute;
@@ -34,62 +38,50 @@ export class BorderRenderer {
 		this.#u_radius = this.#program.createUniform1f("u_radius");
 		this.#u_size = this.#program.createUniform2f("u_size");
 		this.#u_opacity = this.#program.createUniform1f("u_opacity");
+		this.#u_dragPoint = this.#program.createUniform2f("u_dragPoint");
+		this.#u_velocity = this.#program.createUniform2f("u_velocity");
+		this.#u_dragStrength = this.#program.createUniform1f("u_dragStrength");
+		this.#u_zoomDeform = this.#program.createUniform1f("u_zoomDeform");
+		this.#u_zoomCenter = this.#program.createUniform2f("u_zoomCenter");
 
 		// Initialize typed attributes
 		this.#a_position = this.#program.createAttribute("a_position");
-
-		const vao = this.#canvas.gl.createVertexArray();
-		if (!vao) throw new Error("Failed to create VAO");
-		this.#vao = vao;
-
-		const positionBuffer = this.#canvas.gl.createBuffer();
-		if (!positionBuffer) throw new Error("Failed to create position buffer");
-		this.#positionBuffer = positionBuffer;
-
-		const indexBuffer = this.#canvas.gl.createBuffer();
-		if (!indexBuffer) throw new Error("Failed to create index buffer");
-		this.#indexBuffer = indexBuffer;
-
-		this.#setupBuffers();
 	}
 
-	#setupBuffers() {
-		const gl = this.#canvas.gl;
-
-		// Quad vertices (0-1 range, will be scaled by bounds)
-		const positions = new Float32Array([
-			0,
-			0, // Top-left
-			1,
-			0, // Top-right
-			1,
-			1, // Bottom-right
-			0,
-			1, // Bottom-left
-		]);
+	#getOrCreateVAO(mesh: MeshBuffer): WebGLVertexArrayObject {
+		let vao = this.#vaos.get(mesh);
+		if (vao) return vao;
 
-		// Indices for two triangles
-		const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+		const gl = this.#canvas.gl;
+		vao = gl.createVertexArray();
+		if (!vao) throw new Error("Failed to create VAO");
 
-		gl.bindVertexArray(this.#vao);
+		gl.bindVertexArray(vao);
 
 		// Position attribute
-		gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+		gl.bindBuffer(gl.ARRAY_BUFFER, mesh.positionBuffer);
 		gl.enableVertexAttribArray(this.#a_position.location);
 		gl.vertexAttribPointer(this.#a_position.location, 2, gl.FLOAT, false, 0, 0);
 
 		// Index buffer
-		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuffer);
-		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh.indexBuffer);
 
 		gl.bindVertexArray(null);
+
+		this.#vaos.set(mesh, vao);
+		return vao;
 	}
 
 	render(broadcast: Broadcast, camera: Camera, maxZ: number) {
 		const gl = this.#canvas.gl;
 		const bounds = broadcast.bounds.peek();
 		const scale = broadcast.zoom.peek();
+		const dragPoint = broadcast.dragPoint.peek();
+		const deformVelocity = broadcast.deformVelocity;
+		const zoomCenter = broadcast.zoomCenter.peek();
+
+		// Get or create VAO for this broadcast's mesh
+		const vao = this.#getOrCreateVAO(broadcast.mesh);
 
 		this.#program.use();
 
@@ -121,17 +113,27 @@ export class BorderRenderer {
 		// Set opacity
 		this.#u_opacity.set(broadcast.opacity);
 
+		// Set drag deformation uniforms (using deformVelocity which decays separately)
+		this.#u_dragPoint.set(dragPoint.x, dragPoint.y);
+		this.#u_velocity.set(deformVelocity.x, deformVelocity.y);
+		this.#u_dragStrength.set(0.5); // Halved for subtler effect
+
+		// Set zoom deformation uniforms
+		this.#u_zoomDeform.set(broadcast.zoomDeform);
+		this.#u_zoomCenter.set(zoomCenter.x, zoomCenter.y);
+
 		// Draw
-		gl.bindVertexArray(this.#vao);
-		gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+		gl.bindVertexArray(vao);
+		gl.drawElements(gl.TRIANGLES, broadcast.mesh.indexCount, gl.UNSIGNED_SHORT, 0);
 		gl.bindVertexArray(null);
 	}
 
 	close() {
 		const gl = this.#canvas.gl;
-		gl.deleteVertexArray(this.#vao);
-		gl.deleteBuffer(this.#positionBuffer);
-		gl.deleteBuffer(this.#indexBuffer);
+		for (const vao of this.#vaos.values()) {
+			gl.deleteVertexArray(vao);
+		}
+		this.#vaos.clear();
 		this.#program.cleanup();
 	}
 }
diff --git a/app/src/room/gl/border.vert b/app/src/room/gl/border.vert
index 1f29aa27..71dc9461 100644
--- a/app/src/room/gl/border.vert
+++ b/app/src/room/gl/border.vert
@@ -6,12 +6,53 @@ in vec2 a_position;
 uniform mat4 u_projection;
 uniform vec4 u_bounds; // x, y, width, height
 uniform float u_depth;
+uniform vec2 u_dragPoint; // Normalized drag point (0-1) relative to broadcast
+uniform vec2 u_velocity; // Current velocity vector
+uniform float u_dragStrength; // Strength multiplier for drag effect
+uniform float u_zoomDeform; // Zoom deformation (positive = expanding, negative = contracting)
+uniform vec2 u_zoomCenter; // Normalized zoom center (0-1) relative to broadcast
 
 out vec2 v_pos; // Position within the quad (0-1)
 
 void main() {
-	// Scale and translate to bounds
-	vec2 pos = a_position * u_bounds.zw + u_bounds.xy;
+	// Start with base vertex position (0-1 range)
+	vec2 vertexPos = a_position;
+
+	// Calculate zoom deformation (radial expansion/contraction from zoom center)
+	if (abs(u_zoomDeform) > 0.001) {
+		// Distance from zoom center
+		vec2 fromCenter = vertexPos - u_zoomCenter;
+		float distFromCenter = length(fromCenter);
+
+		// Stronger effect in the middle, weaker at edges
+		// Use a smooth curve: effect decreases as we move away from center
+		// At center (dist=0): full effect
+		// At corners (dist~0.7): minimal effect
+		float zoomFalloff = 1.0 - smoothstep(0.0, 0.7, distFromCenter);
+
+		// Apply radial deformation in normalized space
+		// This pushes vertices away from/toward center based on zoom direction
+		vertexPos += fromCenter * u_zoomDeform * zoomFalloff * 0.3;
+	}
+
+	// Now apply drag deformation in pixel space
+	vec2 deformation = vec2(0.0);
+
+	if (length(u_velocity) > 0.0) {
+		// Distance from this vertex to the drag point
+		float dist = distance(vertexPos, u_dragPoint);
+
+		// Falloff: stronger near drag point, weaker far away
+		// Using exponential falloff for smooth, natural feel
+		// Reduced from 3.0 to 1.5 for smoother, more spread out effect
+		float falloff = exp(-dist * 1.5);
+
+		// Apply velocity-based displacement with falloff
+		deformation = u_velocity * falloff * u_dragStrength;
+	}
+
+	// Scale and translate to bounds, with deformation applied in pixel space
+	vec2 pos = vertexPos * u_bounds.zw + u_bounds.xy + deformation;
 
 	// Apply projection
 	gl_Position = u_projection * vec4(pos, u_depth, 1.0);
diff --git a/app/src/room/gl/broadcast.ts b/app/src/room/gl/broadcast.ts
index f6d79dbb..9c47b485 100644
--- a/app/src/room/gl/broadcast.ts
+++ b/app/src/room/gl/broadcast.ts
@@ -3,15 +3,13 @@ import { Canvas } from "../canvas";
 import broadcastFragSource from "./broadcast.frag?raw";
 import broadcastVertSource from "./broadcast.vert?raw";
 import type { Camera } from "./camera";
+import type { MeshBuffer } from "./mesh";
 import { Attribute, Shader, Uniform1f, Uniform1i, Uniform2f, Uniform3f, Uniform4f, UniformMatrix4fv } from "./shader";
 
 export class BroadcastRenderer {
 	#canvas: Canvas;
 	#program: Shader;
-	#vao: WebGLVertexArrayObject;
-	#positionBuffer: WebGLBuffer;
-	#texCoordBuffer: WebGLBuffer;
-	#indexBuffer: WebGLBuffer;
+	#vaos = new Map<MeshBuffer, WebGLVertexArrayObject>();
 
 	// Typed uniforms
 	#u_projection: UniformMatrix4fv;
@@ -30,6 +28,11 @@ export class BroadcastRenderer {
 	#u_memeChromaKey: Uniform1i;
 	#u_memeChromaColor: Uniform3f;
 	#u_flip: Uniform1i;
+	#u_dragPoint: Uniform2f;
+	#u_velocity: Uniform2f;
+	#u_dragStrength: Uniform1f;
+	#u_zoomDeform: Uniform1f;
+	#u_zoomCenter: Uniform2f;
 
 	// Typed attributes
 	#a_position: Attribute;
@@ -56,79 +59,44 @@ export class BroadcastRenderer {
 		this.#u_memeChromaKey = this.#program.createUniform1i("u_memeChromaKey");
 		this.#u_memeChromaColor = this.#program.createUniform3f("u_memeChromaColor");
 		this.#u_flip = this.#program.createUniform1i("u_flip");
+		this.#u_dragPoint = this.#program.createUniform2f("u_dragPoint");
+		this.#u_velocity = this.#program.createUniform2f("u_velocity");
+		this.#u_dragStrength = this.#program.createUniform1f("u_dragStrength");
+		this.#u_zoomDeform = this.#program.createUniform1f("u_zoomDeform");
+		this.#u_zoomCenter = this.#program.createUniform2f("u_zoomCenter");
 
 		// Initialize typed attributes
 		this.#a_position = this.#program.createAttribute("a_position");
 		this.#a_texCoord = this.#program.createAttribute("a_texCoord");
-
-		const vao = this.#canvas.gl.createVertexArray();
-		if (!vao) throw new Error("Failed to create VAO");
-		this.#vao = vao;
-
-		const positionBuffer = this.#canvas.gl.createBuffer();
-		if (!positionBuffer) throw new Error("Failed to create position buffer");
-		this.#positionBuffer = positionBuffer;
-
-		const texCoordBuffer = this.#canvas.gl.createBuffer();
-		if (!texCoordBuffer) throw new Error("Failed to create texCoord buffer");
-		this.#texCoordBuffer = texCoordBuffer;
-
-		const indexBuffer = this.#canvas.gl.createBuffer();
-		if (!indexBuffer) throw new Error("Failed to create index buffer");
-		this.#indexBuffer = indexBuffer;
-
-		this.#setupBuffers();
 	}
 
-	#setupBuffers() {
+	#getOrCreateVAO(mesh: MeshBuffer): WebGLVertexArrayObject {
+		let vao = this.#vaos.get(mesh);
+		if (vao) return vao;
+
 		const gl = this.#canvas.gl;
+		vao = gl.createVertexArray();
+		if (!vao) throw new Error("Failed to create VAO");
 
-		// Quad vertices (0-1 range, will be scaled by bounds)
-		const positions = new Float32Array([
-			0,
-			0, // Top-left
-			1,
-			0, // Top-right
-			1,
-			1, // Bottom-right
-			0,
-			1, // Bottom-left
-		]);
-
-		// Texture coordinates
-		const texCoords = new Float32Array([
-			0,
-			0, // Top-left
-			1,
-			0, // Top-right
-			1,
-			1, // Bottom-right
-			0,
-			1, // Bottom-left
-		]);
-
-		// Indices for two triangles
-		const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
-
-		gl.bindVertexArray(this.#vao);
+		gl.bindVertexArray(vao);
 
 		// Position attribute
-		gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+		gl.bindBuffer(gl.ARRAY_BUFFER, mesh.positionBuffer);
 		gl.enableVertexAttribArray(this.#a_position.location);
 		gl.vertexAttribPointer(this.#a_position.location, 2, gl.FLOAT, false, 0, 0);
 
 		// TexCoord attribute
-		gl.bindBuffer(gl.ARRAY_BUFFER, this.#texCoordBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
+		gl.bindBuffer(gl.ARRAY_BUFFER, mesh.texCoordBuffer);
 		gl.enableVertexAttribArray(this.#a_texCoord.location);
 		gl.vertexAttribPointer(this.#a_texCoord.location, 2, gl.FLOAT, false, 0, 0);
 
 		// Index buffer
-		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuffer);
-		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh.indexBuffer);
 
 		gl.bindVertexArray(null);
+
+		this.#vaos.set(mesh, vao);
+		return vao;
 	}
 
 	render(
@@ -145,6 +113,12 @@ export class BroadcastRenderer {
 		const gl = this.#canvas.gl;
 		const bounds = broadcast.bounds.peek();
 		const scale = broadcast.zoom.peek();
+		const dragPoint = broadcast.dragPoint.peek();
+		const deformVelocity = broadcast.deformVelocity;
+		const zoomCenter = broadcast.zoomCenter.peek();
+
+		// Get or create VAO for this broadcast's mesh
+		const vao = this.#getOrCreateVAO(broadcast.mesh);
 
 		// Set projection matrix
 		this.#u_projection.set(camera.projection);
@@ -163,6 +137,15 @@ export class BroadcastRenderer {
 		// Set size for SDF calculation
 		this.#u_size.set(bounds.size.x, bounds.size.y);
 
+		// Set drag deformation uniforms (using deformVelocity which decays separately)
+		this.#u_dragPoint.set(dragPoint.x, dragPoint.y);
+		this.#u_velocity.set(deformVelocity.x, deformVelocity.y);
+		this.#u_dragStrength.set(0.5); // Halved for subtler effect
+
+		// Set zoom deformation uniforms
+		this.#u_zoomDeform.set(broadcast.zoomDeform);
+		this.#u_zoomCenter.set(zoomCenter.x, zoomCenter.y);
+
 		// Set opacity
 		let opacity = broadcast.opacity;
 		if (modifiers?.dragging) {
@@ -210,17 +193,17 @@ export class BroadcastRenderer {
 		}
 
 		// Draw
-		gl.bindVertexArray(this.#vao);
-		gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+		gl.bindVertexArray(vao);
+		gl.drawElements(gl.TRIANGLES, broadcast.mesh.indexCount, gl.UNSIGNED_SHORT, 0);
 		gl.bindVertexArray(null);
 	}
 
 	close() {
 		const gl = this.#canvas.gl;
-		gl.deleteVertexArray(this.#vao);
-		gl.deleteBuffer(this.#positionBuffer);
-		gl.deleteBuffer(this.#texCoordBuffer);
-		gl.deleteBuffer(this.#indexBuffer);
+		for (const vao of this.#vaos.values()) {
+			gl.deleteVertexArray(vao);
+		}
+		this.#vaos.clear();
 		this.#program.cleanup();
 	}
 }
diff --git a/app/src/room/gl/broadcast.vert b/app/src/room/gl/broadcast.vert
index dcd10e9d..0ed017d0 100644
--- a/app/src/room/gl/broadcast.vert
+++ b/app/src/room/gl/broadcast.vert
@@ -1,4 +1,5 @@
 #version 300 es
+precision highp float;
 
 in vec2 a_position;
 in vec2 a_texCoord;
@@ -6,13 +7,54 @@ in vec2 a_texCoord;
 uniform mat4 u_projection;
 uniform vec4 u_bounds; // x, y, width, height
 uniform float u_depth;
+uniform vec2 u_dragPoint; // Normalized drag point (0-1) relative to broadcast
+uniform vec2 u_velocity; // Current velocity vector
+uniform float u_dragStrength; // Strength multiplier for drag effect
+uniform float u_zoomDeform; // Zoom deformation (positive = expanding, negative = contracting)
+uniform vec2 u_zoomCenter; // Normalized zoom center (0-1) relative to broadcast
 
 out vec2 v_texCoord;
 out vec2 v_pos; // Position within the quad (0-1)
 
 void main() {
-	// Scale and translate to bounds
-	vec2 pos = a_position * u_bounds.zw + u_bounds.xy;
+	// Start with base vertex position (0-1 range)
+	vec2 vertexPos = a_position;
+
+	// Calculate zoom deformation (radial expansion/contraction from zoom center)
+	if (abs(u_zoomDeform) > 0.001) {
+		// Distance from zoom center
+		vec2 fromCenter = vertexPos - u_zoomCenter;
+		float distFromCenter = length(fromCenter);
+
+		// Stronger effect in the middle, weaker at edges
+		// Use a smooth curve: effect decreases as we move away from center
+		// At center (dist=0): full effect
+		// At corners (dist~0.7): minimal effect
+		float zoomFalloff = 1.0 - smoothstep(0.0, 0.7, distFromCenter);
+
+		// Apply radial deformation in normalized space
+		// This pushes vertices away from/toward center based on zoom direction
+		vertexPos += fromCenter * u_zoomDeform * zoomFalloff * 0.3;
+	}
+
+	// Now apply drag deformation in pixel space
+	vec2 deformation = vec2(0.0);
+
+	if (length(u_velocity) > 0.0) {
+		// Distance from this vertex to the drag point
+		float dist = distance(vertexPos, u_dragPoint);
+
+		// Falloff: stronger near drag point, weaker far away
+		// Using exponential falloff for smooth, natural feel
+		// Reduced from 3.0 to 1.5 for smoother, more spread out effect
+		float falloff = exp(-dist * 1.5);
+
+		// Apply velocity-based displacement with falloff
+		deformation = u_velocity * falloff * u_dragStrength;
+	}
+
+	// Scale and translate to bounds, with deformation applied in pixel space
+	vec2 pos = vertexPos * u_bounds.zw + u_bounds.xy + deformation;
 
 	// Apply projection
 	gl_Position = u_projection * vec4(pos, u_depth, 1.0);
diff --git a/app/src/room/gl/mesh.ts b/app/src/room/gl/mesh.ts
new file mode 100644
index 00000000..8daf82b1
--- /dev/null
+++ b/app/src/room/gl/mesh.ts
@@ -0,0 +1,194 @@
+import { Canvas } from "../canvas";
+import { Vector } from "../geometry";
+
+// Constants for mesh sizing
+export const BORDER_WIDTH = 12;
+export const AUDIO_VIZ_WIDTH = 18; // BORDER_WIDTH * 1.5
+export const DRAG_THRESHOLD = 0.5; // Minimum velocity magnitude to trigger mesh deformation
+
+export interface MeshConfig {
+	meshSubdivisions: number; // Grid size (e.g., 20 for 20x20 grid)
+}
+
+export class MeshBuffer {
+	#canvas: Canvas;
+	#config: MeshConfig;
+	#positionBuffer: WebGLBuffer;
+	#texCoordBuffer: WebGLBuffer;
+	#indexBuffer: WebGLBuffer;
+
+	// Current mesh state
+	#isSubdivided = false;
+	#vertexCount = 0;
+	#indexCount = 0;
+
+	constructor(canvas: Canvas, config: MeshConfig = { meshSubdivisions: 20 }) {
+		this.#canvas = canvas;
+		this.#config = config;
+
+		const gl = canvas.gl;
+
+		const positionBuffer = gl.createBuffer();
+		if (!positionBuffer) throw new Error("Failed to create position buffer");
+		this.#positionBuffer = positionBuffer;
+
+		const texCoordBuffer = gl.createBuffer();
+		if (!texCoordBuffer) throw new Error("Failed to create texCoord buffer");
+		this.#texCoordBuffer = texCoordBuffer;
+
+		const indexBuffer = gl.createBuffer();
+		if (!indexBuffer) throw new Error("Failed to create index buffer");
+		this.#indexBuffer = indexBuffer;
+
+		// Start with a simple quad
+		this.#generateQuad();
+	}
+
+	get positionBuffer(): WebGLBuffer {
+		return this.#positionBuffer;
+	}
+
+	get texCoordBuffer(): WebGLBuffer {
+		return this.#texCoordBuffer;
+	}
+
+	get indexBuffer(): WebGLBuffer {
+		return this.#indexBuffer;
+	}
+
+	get indexCount(): number {
+		return this.#indexCount;
+	}
+
+	get vertexCount(): number {
+		return this.#vertexCount;
+	}
+
+	// Update mesh based on velocity
+	update(velocity: Vector) {
+		const velocityMagnitude = velocity.length();
+		const shouldSubdivide = velocityMagnitude > DRAG_THRESHOLD;
+
+		if (shouldSubdivide && !this.#isSubdivided) {
+			this.#generateSubdividedMesh();
+		} else if (!shouldSubdivide && this.#isSubdivided) {
+			this.#generateQuad();
+		}
+	}
+
+	#generateQuad() {
+		const gl = this.#canvas.gl;
+
+		// Simple quad (0-1 range)
+		const positions = new Float32Array([
+			0,
+			0, // Top-left
+			1,
+			0, // Top-right
+			1,
+			1, // Bottom-right
+			0,
+			1, // Bottom-left
+		]);
+
+		const texCoords = new Float32Array([
+			0,
+			0, // Top-left
+			1,
+			0, // Top-right
+			1,
+			1, // Bottom-right
+			0,
+			1, // Bottom-left
+		]);
+
+		const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.#texCoordBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.DYNAMIC_DRAW);
+
+		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuffer);
+		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.DYNAMIC_DRAW);
+
+		this.#isSubdivided = false;
+		this.#vertexCount = 4;
+		this.#indexCount = 6;
+	}
+
+	#generateSubdividedMesh() {
+		const gl = this.#canvas.gl;
+		const subdivisions = this.#config.meshSubdivisions;
+		const verticesPerRow = subdivisions + 1;
+		const totalVertices = verticesPerRow * verticesPerRow;
+
+		const positions = new Float32Array(totalVertices * 2);
+		const texCoords = new Float32Array(totalVertices * 2);
+
+		// Generate vertex grid
+		let index = 0;
+		for (let y = 0; y <= subdivisions; y++) {
+			for (let x = 0; x <= subdivisions; x++) {
+				const u = x / subdivisions;
+				const v = y / subdivisions;
+
+				// Position (0-1 range)
+				positions[index * 2] = u;
+				positions[index * 2 + 1] = v;
+
+				// Texture coordinates
+				texCoords[index * 2] = u;
+				texCoords[index * 2 + 1] = v;
+
+				index++;
+			}
+		}
+
+		// Generate indices for triangles
+		const indicesPerQuad = 6;
+		const totalQuads = subdivisions * subdivisions;
+		const indices = new Uint16Array(totalQuads * indicesPerQuad);
+
+		let indicesIndex = 0;
+		for (let y = 0; y < subdivisions; y++) {
+			for (let x = 0; x < subdivisions; x++) {
+				const topLeft = y * verticesPerRow + x;
+				const topRight = topLeft + 1;
+				const bottomLeft = topLeft + verticesPerRow;
+				const bottomRight = bottomLeft + 1;
+
+				// First triangle
+				indices[indicesIndex++] = topLeft;
+				indices[indicesIndex++] = topRight;
+				indices[indicesIndex++] = bottomRight;
+
+				// Second triangle
+				indices[indicesIndex++] = topLeft;
+				indices[indicesIndex++] = bottomRight;
+				indices[indicesIndex++] = bottomLeft;
+			}
+		}
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, this.#texCoordBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.DYNAMIC_DRAW);
+
+		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuffer);
+		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.DYNAMIC_DRAW);
+
+		this.#isSubdivided = true;
+		this.#vertexCount = totalVertices;
+		this.#indexCount = indices.length;
+	}
+
+	close() {
+		const gl = this.#canvas.gl;
+		gl.deleteBuffer(this.#positionBuffer);
+		gl.deleteBuffer(this.#texCoordBuffer);
+		gl.deleteBuffer(this.#indexBuffer);
+	}
+}
diff --git a/app/src/room/gl/outline.ts b/app/src/room/gl/outline.ts
index 8dc6c4f6..39f65839 100644
--- a/app/src/room/gl/outline.ts
+++ b/app/src/room/gl/outline.ts
@@ -1,16 +1,15 @@
 import type { Broadcast } from "../broadcast";
 import { Canvas } from "../canvas";
 import type { Camera } from "./camera";
+import type { MeshBuffer } from "./mesh";
 import outlineFragSource from "./outline.frag?raw";
 import outlineVertSource from "./outline.vert?raw";
 import { Attribute, Shader, Uniform1f, Uniform2f, Uniform3f, Uniform4f, UniformMatrix4fv } from "./shader";
 
-export class OutlineRenderer {
+export class AudioRenderer {
 	#canvas: Canvas;
 	#program: Shader;
-	#vao: WebGLVertexArrayObject;
-	#positionBuffer: WebGLBuffer;
-	#indexBuffer: WebGLBuffer;
+	#vaos = new Map<MeshBuffer, WebGLVertexArrayObject>();
 
 	// Typed uniforms
 	#u_projection: UniformMatrix4fv;
@@ -24,6 +23,11 @@ export class OutlineRenderer {
 	#u_color: Uniform3f;
 	#u_time: Uniform1f;
 	#u_finalAlpha: Uniform1f;
+	#u_dragPoint: Uniform2f;
+	#u_velocity: Uniform2f;
+	#u_dragStrength: Uniform1f;
+	#u_zoomDeform: Uniform1f;
+	#u_zoomCenter: Uniform2f;
 
 	// Typed attributes
 	#a_position: Attribute;
@@ -44,56 +48,38 @@ export class OutlineRenderer {
 		this.#u_color = this.#program.createUniform3f("u_color");
 		this.#u_time = this.#program.createUniform1f("u_time");
 		this.#u_finalAlpha = this.#program.createUniform1f("u_finalAlpha");
+		this.#u_dragPoint = this.#program.createUniform2f("u_dragPoint");
+		this.#u_velocity = this.#program.createUniform2f("u_velocity");
+		this.#u_dragStrength = this.#program.createUniform1f("u_dragStrength");
+		this.#u_zoomDeform = this.#program.createUniform1f("u_zoomDeform");
+		this.#u_zoomCenter = this.#program.createUniform2f("u_zoomCenter");
 
 		// Initialize typed attributes
 		this.#a_position = this.#program.createAttribute("a_position");
-
-		const vao = this.#canvas.gl.createVertexArray();
-		if (!vao) throw new Error("Failed to create VAO");
-		this.#vao = vao;
-
-		const positionBuffer = this.#canvas.gl.createBuffer();
-		if (!positionBuffer) throw new Error("Failed to create position buffer");
-		this.#positionBuffer = positionBuffer;
-
-		const indexBuffer = this.#canvas.gl.createBuffer();
-		if (!indexBuffer) throw new Error("Failed to create index buffer");
-		this.#indexBuffer = indexBuffer;
-
-		this.#setupBuffers();
 	}
 
-	#setupBuffers() {
-		const gl = this.#canvas.gl;
-
-		// Quad vertices (0-1 range, will be scaled by bounds)
-		const positions = new Float32Array([
-			0,
-			0, // Top-left
-			1,
-			0, // Top-right
-			1,
-			1, // Bottom-right
-			0,
-			1, // Bottom-left
-		]);
+	#getOrCreateVAO(mesh: MeshBuffer): WebGLVertexArrayObject {
+		let vao = this.#vaos.get(mesh);
+		if (vao) return vao;
 
-		// Indices for two triangles
-		const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
+		const gl = this.#canvas.gl;
+		vao = gl.createVertexArray();
+		if (!vao) throw new Error("Failed to create VAO");
 
-		gl.bindVertexArray(this.#vao);
+		gl.bindVertexArray(vao);
 
 		// Position attribute
-		gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+		gl.bindBuffer(gl.ARRAY_BUFFER, mesh.positionBuffer);
 		gl.enableVertexAttribArray(this.#a_position.location);
 		gl.vertexAttribPointer(this.#a_position.location, 2, gl.FLOAT, false, 0, 0);
 
 		// Index buffer
-		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuffer);
-		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
+		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, mesh.indexBuffer);
 
 		gl.bindVertexArray(null);
+
+		this.#vaos.set(mesh, vao);
+		return vao;
 	}
 
 	render(broadcast: Broadcast, camera: Camera, maxZ: number, now: DOMHighResTimeStamp) {
@@ -101,6 +87,12 @@ export class OutlineRenderer {
 		const bounds = broadcast.bounds.peek();
 		const scale = broadcast.zoom.peek();
 		const volume = broadcast.audio.volume;
+		const dragPoint = broadcast.dragPoint.peek();
+		const deformVelocity = broadcast.deformVelocity;
+		const zoomCenter = broadcast.zoomCenter.peek();
+
+		// Get or create VAO for this broadcast's mesh
+		const vao = this.#getOrCreateVAO(broadcast.mesh);
 
 		this.#program.use();
 
@@ -180,17 +172,27 @@ export class OutlineRenderer {
 
 		this.#u_color.set(r, g, b);
 
+		// Set drag deformation uniforms (using deformVelocity which decays separately)
+		this.#u_dragPoint.set(dragPoint.x, dragPoint.y);
+		this.#u_velocity.set(deformVelocity.x, deformVelocity.y);
+		this.#u_dragStrength.set(0.5); // Halved for subtler effect
+
+		// Set zoom deformation uniforms
+		this.#u_zoomDeform.set(broadcast.zoomDeform);
+		this.#u_zoomCenter.set(zoomCenter.x, zoomCenter.y);
+
 		// Draw
-		gl.bindVertexArray(this.#vao);
-		gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
+		gl.bindVertexArray(vao);
+		gl.drawElements(gl.TRIANGLES, broadcast.mesh.indexCount, gl.UNSIGNED_SHORT, 0);
 		gl.bindVertexArray(null);
 	}
 
 	close() {
 		const gl = this.#canvas.gl;
-		gl.deleteVertexArray(this.#vao);
-		gl.deleteBuffer(this.#positionBuffer);
-		gl.deleteBuffer(this.#indexBuffer);
+		for (const vao of this.#vaos.values()) {
+			gl.deleteVertexArray(vao);
+		}
+		this.#vaos.clear();
 		this.#program.cleanup();
 	}
 }
diff --git a/app/src/room/gl/outline.vert b/app/src/room/gl/outline.vert
index 0286f10e..71dc9461 100644
--- a/app/src/room/gl/outline.vert
+++ b/app/src/room/gl/outline.vert
@@ -1,16 +1,58 @@
 #version 300 es
+precision highp float;
 
 in vec2 a_position;
 
 uniform mat4 u_projection;
 uniform vec4 u_bounds; // x, y, width, height
 uniform float u_depth;
+uniform vec2 u_dragPoint; // Normalized drag point (0-1) relative to broadcast
+uniform vec2 u_velocity; // Current velocity vector
+uniform float u_dragStrength; // Strength multiplier for drag effect
+uniform float u_zoomDeform; // Zoom deformation (positive = expanding, negative = contracting)
+uniform vec2 u_zoomCenter; // Normalized zoom center (0-1) relative to broadcast
 
 out vec2 v_pos; // Position within the quad (0-1)
 
 void main() {
-	// Scale and translate to bounds
-	vec2 pos = a_position * u_bounds.zw + u_bounds.xy;
+	// Start with base vertex position (0-1 range)
+	vec2 vertexPos = a_position;
+
+	// Calculate zoom deformation (radial expansion/contraction from zoom center)
+	if (abs(u_zoomDeform) > 0.001) {
+		// Distance from zoom center
+		vec2 fromCenter = vertexPos - u_zoomCenter;
+		float distFromCenter = length(fromCenter);
+
+		// Stronger effect in the middle, weaker at edges
+		// Use a smooth curve: effect decreases as we move away from center
+		// At center (dist=0): full effect
+		// At corners (dist~0.7): minimal effect
+		float zoomFalloff = 1.0 - smoothstep(0.0, 0.7, distFromCenter);
+
+		// Apply radial deformation in normalized space
+		// This pushes vertices away from/toward center based on zoom direction
+		vertexPos += fromCenter * u_zoomDeform * zoomFalloff * 0.3;
+	}
+
+	// Now apply drag deformation in pixel space
+	vec2 deformation = vec2(0.0);
+
+	if (length(u_velocity) > 0.0) {
+		// Distance from this vertex to the drag point
+		float dist = distance(vertexPos, u_dragPoint);
+
+		// Falloff: stronger near drag point, weaker far away
+		// Using exponential falloff for smooth, natural feel
+		// Reduced from 3.0 to 1.5 for smoother, more spread out effect
+		float falloff = exp(-dist * 1.5);
+
+		// Apply velocity-based displacement with falloff
+		deformation = u_velocity * falloff * u_dragStrength;
+	}
+
+	// Scale and translate to bounds, with deformation applied in pixel space
+	vec2 pos = vertexPos * u_bounds.zw + u_bounds.xy + deformation;
 
 	// Apply projection
 	gl_Position = u_projection * vec4(pos, u_depth, 1.0);
diff --git a/app/src/room/space.ts b/app/src/room/space.ts
index 844078da..1b00a955 100644
--- a/app/src/room/space.ts
+++ b/app/src/room/space.ts
@@ -5,7 +5,7 @@ import type { Canvas } from "./canvas";
 import { Vector } from "./geometry";
 import { BorderRenderer } from "./gl/border";
 import { BroadcastRenderer } from "./gl/broadcast";
-import { OutlineRenderer } from "./gl/outline";
+import { AudioRenderer } from "./gl/outline";
 import type { Sound } from "./sound";
 
 export type SpaceProps = {
@@ -35,7 +35,7 @@ export class Space {
 
 	// WebGL renderers
 	#borderRenderer: BorderRenderer;
-	#outlineRenderer: OutlineRenderer;
+	#audioRenderer: AudioRenderer;
 	#broadcastRenderer: BroadcastRenderer;
 
 	// Touch handling for mobile
@@ -52,7 +52,7 @@ export class Space {
 
 		// Initialize WebGL renderers
 		this.#borderRenderer = new BorderRenderer(canvas);
-		this.#outlineRenderer = new OutlineRenderer(canvas);
+		this.#audioRenderer = new AudioRenderer(canvas);
 		this.#broadcastRenderer = new BroadcastRenderer(canvas);
 
 		// Use the new eventListener helper that automatically handles cleanup
@@ -98,6 +98,14 @@ export class Space {
 			return;
 		}
 
+		// Calculate drag point relative to broadcast bounds (0-1)
+		const bounds = broadcast.bounds.peek();
+		const dragPoint = Vector.create(
+			(mouse.x - bounds.position.x) / bounds.size.x,
+			(mouse.y - bounds.position.y) / bounds.size.y,
+		);
+		broadcast.dragPoint.set(dragPoint);
+
 		// Bump the z-index unless we're already at the top.
 		broadcast.position.update((prev) => ({
 			...prev,
@@ -128,6 +136,15 @@ export class Space {
 		const viewport = this.canvas.viewport.peek();
 
 		if (this.#dragging) {
+			// Calculate mouse movement delta
+			const bounds = this.#dragging.bounds.peek();
+			const currentCenter = bounds.middle();
+			const deltaX = mouse.x - currentCenter.x;
+			const deltaY = mouse.y - currentCenter.y;
+
+			// Set deformation velocity based on mouse movement
+			this.#dragging.deformVelocity = Vector.create(deltaX, deltaY);
+
 			// Update the position but don't publish it yet.
 			this.#dragging.position.mutate((position) => {
 				position.x = mouse.x / viewport.x - 0.5;
@@ -173,9 +190,9 @@ export class Space {
 
 	#onMouseWheel(e: WheelEvent) {
 		let broadcast = this.#dragging;
-		if (!broadcast) {
-			const mouse = this.canvas.relative(e.clientX, e.clientY);
+		const mouse = this.canvas.relative(e.clientX, e.clientY);
 
+		if (!broadcast) {
 			broadcast = this.#at(mouse);
 			if (!broadcast) {
 				// Not over a broadcast, so don't do anything.
@@ -205,6 +222,14 @@ export class Space {
 			return;
 		}
 
+		// Calculate zoom center relative to broadcast bounds (0-1)
+		const bounds = broadcast.bounds.peek();
+		const zoomCenter = Vector.create(
+			(mouse.x - bounds.position.x) / bounds.size.x,
+			(mouse.y - bounds.position.y) / bounds.size.y,
+		);
+		broadcast.zoomCenter.set(zoomCenter);
+
 		const scale = -e.deltaY * 0.001;
 		if (scale < 0) {
 			document.body.style.cursor = "zoom-out";
@@ -212,6 +237,9 @@ export class Space {
 			document.body.style.cursor = "zoom-in";
 		}
 
+		// Set zoom deformation based on scale direction and magnitude
+		broadcast.zoomDeform = scale * 15;
+
 		// Update the scale, publishing it.
 		broadcast.position.update((prev) => ({
 			...prev,
@@ -328,10 +356,28 @@ export class Space {
 			const dy = touch2.clientY - touch1.clientY;
 			const currentDistance = Math.sqrt(dx * dx + dy * dy);
 
+			// Calculate pinch center
+			const centerX = (touch1.clientX + touch2.clientX) / 2;
+			const centerY = (touch1.clientY + touch2.clientY) / 2;
+			const center = this.canvas.relative(centerX, centerY);
+
+			// Calculate zoom center relative to broadcast bounds (0-1)
+			const bounds = this.#dragging.bounds.peek();
+			const zoomCenter = Vector.create(
+				(center.x - bounds.position.x) / bounds.size.x,
+				(center.y - bounds.position.y) / bounds.size.y,
+			);
+			this.#dragging.zoomCenter.set(zoomCenter);
+
 			// Calculate scale factor
 			if (this.#pinchStartDistance > 0) {
 				const scaleFactor = currentDistance / this.#pinchStartDistance;
 				const newScale = this.#pinchStartScale * scaleFactor;
+				const oldScale = this.#dragging.position.peek().s ?? 1;
+
+				// Set zoom deformation based on scale delta
+				const scaleDelta = newScale - oldScale;
+				this.#dragging.zoomDeform = scaleDelta * 15;
 
 				// Update the scale
 				this.#dragging.position.update((prev) => ({
@@ -341,9 +387,6 @@ export class Space {
 			}
 
 			// Also update position to the center of the pinch
-			const centerX = (touch1.clientX + touch2.clientX) / 2;
-			const centerY = (touch1.clientY + touch2.clientY) / 2;
-			const center = this.canvas.relative(centerX, centerY);
 			const viewport = this.canvas.viewport.peek();
 
 			this.#dragging.position.update((prev) => ({
@@ -611,10 +654,10 @@ export class Space {
 
 		// 2. Render audio visualizations (middle layer)
 		for (const broadcast of this.#rip) {
-			this.#outlineRenderer.render(broadcast, this.canvas.camera, this.#maxZ, now);
+			this.#audioRenderer.render(broadcast, this.canvas.camera, this.#maxZ, now);
 		}
 		for (const broadcast of broadcasts) {
-			this.#outlineRenderer.render(broadcast, this.canvas.camera, this.#maxZ, now);
+			this.#audioRenderer.render(broadcast, this.canvas.camera, this.#maxZ, now);
 		}
 
 		// 3. Render video content (front layer)
@@ -663,7 +706,7 @@ export class Space {
 
 	close() {
 		this.#borderRenderer.close();
-		this.#outlineRenderer.close();
+		this.#audioRenderer.close();
 		this.#broadcastRenderer.close();
 
 		this.#signals.close();
diff --git a/moq b/moq
index 23717b02..2440d165 160000
--- a/moq
+++ b/moq
@@ -1 +1 @@
-Subproject commit 23717b02723b663d66f328fec248176943b9175b
+Subproject commit 2440d16550f4587bcc522e74e9aeb50711438855

From 29e15c54efa686dfad3b7d9401273ff17e2d373a Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Mon, 13 Oct 2025 10:23:06 -0700
Subject: [PATCH 2/4] PR stuff.

---
 app/package.json                             |  1 +
 app/src/room/broadcast.ts                    | 12 +++-
 app/src/room/fake.ts                         |  4 +-
 app/src/room/gl/{outline.frag => audio.frag} |  0
 app/src/room/gl/{outline.ts => audio.ts}     |  6 +-
 app/src/room/gl/audio.vert                   | 35 +++++++++++
 app/src/room/gl/background.ts                |  4 +-
 app/src/room/gl/border.ts                    |  4 +-
 app/src/room/gl/border.vert                  | 50 ++++------------
 app/src/room/gl/broadcast.ts                 |  4 +-
 app/src/room/gl/broadcast.vert               | 50 ++++------------
 app/src/room/gl/deformation.glsl             | 61 ++++++++++++++++++++
 app/src/room/gl/mesh.ts                      | 12 ++--
 app/src/room/gl/outline.vert                 | 61 --------------------
 app/src/room/space.ts                        |  2 +-
 app/tsconfig.json                            |  2 +-
 app/vite.config.ts                           |  6 +-
 bun.lock                                     |  3 +
 18 files changed, 157 insertions(+), 160 deletions(-)
 rename app/src/room/gl/{outline.frag => audio.frag} (100%)
 rename app/src/room/gl/{outline.ts => audio.ts} (97%)
 create mode 100644 app/src/room/gl/audio.vert
 create mode 100644 app/src/room/gl/deformation.glsl
 delete mode 100644 app/src/room/gl/outline.vert

diff --git a/app/package.json b/app/package.json
index 12a1605f..5c1260f7 100644
--- a/app/package.json
+++ b/app/package.json
@@ -54,6 +54,7 @@
 		"tsx": "^4.20.5",
 		"typescript": "~5.8.3",
 		"vite": "^6.3.5",
+		"vite-plugin-glsl": "^1.5.4",
 		"vite-plugin-solid": "^2.11.8",
 		"vite-plugin-static-copy": "^2.1.0",
 		"vite-plugin-wrangler": "^0.1.1",
diff --git a/app/src/room/broadcast.ts b/app/src/room/broadcast.ts
index 920ab0ac..6cb80ffa 100644
--- a/app/src/room/broadcast.ts
+++ b/app/src/room/broadcast.ts
@@ -304,10 +304,18 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 		this.velocity = this.velocity.mult(0.5);
 
 		// Decay the deformation velocity smoothly over time (faster decay than physics velocity)
-		this.deformVelocity = this.deformVelocity.mult(0.85);
+		if (this.deformVelocity.length() > 0.01) {
+			this.deformVelocity = this.deformVelocity.mult(0.85);
+		} else {
+			this.deformVelocity = Vector.create(0, 0);
+		}
 
 		// Decay zoom deformation (set by user interaction in Space)
-		this.zoomDeform *= 0.9;
+		if (Math.abs(this.zoomDeform) > 0.01) {
+			this.zoomDeform *= 0.9;
+		} else {
+			this.zoomDeform = 0;
+		}
 	}
 
 	// Returns true if the broadcaster is locked to a position.
diff --git a/app/src/room/fake.ts b/app/src/room/fake.ts
index c18e425e..5dda5fda 100644
--- a/app/src/room/fake.ts
+++ b/app/src/room/fake.ts
@@ -126,7 +126,7 @@ export class FakeBroadcast {
 		video.onloadedmetadata = () => {
 			this.video.catalog.set([
 				{
-					track: "video",
+					track: { name: "video", priority: 0 },
 					config: {
 						codec: "fake",
 						// Required for the correct display size.
@@ -155,7 +155,7 @@ export class FakeBroadcast {
 
 			this.video.catalog.set([
 				{
-					track: "image",
+					track: { name: "image", priority: 0 },
 					config: {
 						codec: "fake",
 						displayAspectWidth: u53(image.width),
diff --git a/app/src/room/gl/outline.frag b/app/src/room/gl/audio.frag
similarity index 100%
rename from app/src/room/gl/outline.frag
rename to app/src/room/gl/audio.frag
diff --git a/app/src/room/gl/outline.ts b/app/src/room/gl/audio.ts
similarity index 97%
rename from app/src/room/gl/outline.ts
rename to app/src/room/gl/audio.ts
index 39f65839..4615f442 100644
--- a/app/src/room/gl/outline.ts
+++ b/app/src/room/gl/audio.ts
@@ -1,9 +1,9 @@
 import type { Broadcast } from "../broadcast";
 import { Canvas } from "../canvas";
+import audioFragSource from "./audio.frag";
+import audioVertSource from "./audio.vert";
 import type { Camera } from "./camera";
 import type { MeshBuffer } from "./mesh";
-import outlineFragSource from "./outline.frag?raw";
-import outlineVertSource from "./outline.vert?raw";
 import { Attribute, Shader, Uniform1f, Uniform2f, Uniform3f, Uniform4f, UniformMatrix4fv } from "./shader";
 
 export class AudioRenderer {
@@ -34,7 +34,7 @@ export class AudioRenderer {
 
 	constructor(canvas: Canvas) {
 		this.#canvas = canvas;
-		this.#program = new Shader(canvas.gl, outlineVertSource, outlineFragSource);
+		this.#program = new Shader(canvas.gl, audioVertSource, audioFragSource);
 
 		// Initialize typed uniforms
 		this.#u_projection = this.#program.createUniformMatrix4fv("u_projection");
diff --git a/app/src/room/gl/audio.vert b/app/src/room/gl/audio.vert
new file mode 100644
index 00000000..af96c771
--- /dev/null
+++ b/app/src/room/gl/audio.vert
@@ -0,0 +1,35 @@
+#version 300 es
+precision highp float;
+
+in vec2 a_position;
+
+uniform mat4 u_projection;
+uniform vec4 u_bounds; // x, y, width, height
+uniform float u_depth;
+uniform vec2 u_dragPoint; // Normalized drag point (0-1) relative to broadcast
+uniform vec2 u_velocity; // Current velocity vector
+uniform float u_dragStrength; // Strength multiplier for drag effect
+uniform float u_zoomDeform; // Zoom deformation (positive = expanding, negative = contracting)
+uniform vec2 u_zoomCenter; // Normalized zoom center (0-1) relative to broadcast
+
+out vec2 v_pos; // Position within the quad (0-1)
+
+#include "./deformation.glsl"
+
+void main() {
+	// Apply deformation using shared function
+	vec2 pos = applyDeformation(
+		a_position,
+		u_dragPoint,
+		u_velocity,
+		u_dragStrength,
+		u_zoomDeform,
+		u_zoomCenter,
+		u_bounds
+	);
+
+	// Apply projection
+	gl_Position = u_projection * vec4(pos, u_depth, 1.0);
+
+	v_pos = a_position;
+}
diff --git a/app/src/room/gl/background.ts b/app/src/room/gl/background.ts
index 1e6b31e5..63aa8fcc 100644
--- a/app/src/room/gl/background.ts
+++ b/app/src/room/gl/background.ts
@@ -1,5 +1,5 @@
-import backgroundFragSource from "./background.frag?raw";
-import backgroundVertSource from "./background.vert?raw";
+import backgroundFragSource from "./background.frag";
+import backgroundVertSource from "./background.vert";
 import type { GLContext } from "./context";
 import { Attribute, Shader, Uniform1f, Uniform2f } from "./shader";
 
diff --git a/app/src/room/gl/border.ts b/app/src/room/gl/border.ts
index 91f455ce..12819b27 100644
--- a/app/src/room/gl/border.ts
+++ b/app/src/room/gl/border.ts
@@ -1,7 +1,7 @@
 import type { Broadcast } from "../broadcast";
 import { Canvas } from "../canvas";
-import borderFragSource from "./border.frag?raw";
-import borderVertSource from "./border.vert?raw";
+import borderFragSource from "./border.frag";
+import borderVertSource from "./border.vert";
 import type { Camera } from "./camera";
 import type { MeshBuffer } from "./mesh";
 import { Attribute, Shader, Uniform1f, Uniform2f, Uniform4f, UniformMatrix4fv } from "./shader";
diff --git a/app/src/room/gl/border.vert b/app/src/room/gl/border.vert
index 71dc9461..af96c771 100644
--- a/app/src/room/gl/border.vert
+++ b/app/src/room/gl/border.vert
@@ -14,45 +14,19 @@ uniform vec2 u_zoomCenter; // Normalized zoom center (0-1) relative to broadcast
 
 out vec2 v_pos; // Position within the quad (0-1)
 
-void main() {
-	// Start with base vertex position (0-1 range)
-	vec2 vertexPos = a_position;
-
-	// Calculate zoom deformation (radial expansion/contraction from zoom center)
-	if (abs(u_zoomDeform) > 0.001) {
-		// Distance from zoom center
-		vec2 fromCenter = vertexPos - u_zoomCenter;
-		float distFromCenter = length(fromCenter);
-
-		// Stronger effect in the middle, weaker at edges
-		// Use a smooth curve: effect decreases as we move away from center
-		// At center (dist=0): full effect
-		// At corners (dist~0.7): minimal effect
-		float zoomFalloff = 1.0 - smoothstep(0.0, 0.7, distFromCenter);
-
-		// Apply radial deformation in normalized space
-		// This pushes vertices away from/toward center based on zoom direction
-		vertexPos += fromCenter * u_zoomDeform * zoomFalloff * 0.3;
-	}
-
-	// Now apply drag deformation in pixel space
-	vec2 deformation = vec2(0.0);
+#include "./deformation.glsl"
 
-	if (length(u_velocity) > 0.0) {
-		// Distance from this vertex to the drag point
-		float dist = distance(vertexPos, u_dragPoint);
-
-		// Falloff: stronger near drag point, weaker far away
-		// Using exponential falloff for smooth, natural feel
-		// Reduced from 3.0 to 1.5 for smoother, more spread out effect
-		float falloff = exp(-dist * 1.5);
-
-		// Apply velocity-based displacement with falloff
-		deformation = u_velocity * falloff * u_dragStrength;
-	}
-
-	// Scale and translate to bounds, with deformation applied in pixel space
-	vec2 pos = vertexPos * u_bounds.zw + u_bounds.xy + deformation;
+void main() {
+	// Apply deformation using shared function
+	vec2 pos = applyDeformation(
+		a_position,
+		u_dragPoint,
+		u_velocity,
+		u_dragStrength,
+		u_zoomDeform,
+		u_zoomCenter,
+		u_bounds
+	);
 
 	// Apply projection
 	gl_Position = u_projection * vec4(pos, u_depth, 1.0);
diff --git a/app/src/room/gl/broadcast.ts b/app/src/room/gl/broadcast.ts
index 9c47b485..40997880 100644
--- a/app/src/room/gl/broadcast.ts
+++ b/app/src/room/gl/broadcast.ts
@@ -1,7 +1,7 @@
 import type { Broadcast } from "../broadcast";
 import { Canvas } from "../canvas";
-import broadcastFragSource from "./broadcast.frag?raw";
-import broadcastVertSource from "./broadcast.vert?raw";
+import broadcastFragSource from "./broadcast.frag";
+import broadcastVertSource from "./broadcast.vert";
 import type { Camera } from "./camera";
 import type { MeshBuffer } from "./mesh";
 import { Attribute, Shader, Uniform1f, Uniform1i, Uniform2f, Uniform3f, Uniform4f, UniformMatrix4fv } from "./shader";
diff --git a/app/src/room/gl/broadcast.vert b/app/src/room/gl/broadcast.vert
index 0ed017d0..1c4139d6 100644
--- a/app/src/room/gl/broadcast.vert
+++ b/app/src/room/gl/broadcast.vert
@@ -16,45 +16,19 @@ uniform vec2 u_zoomCenter; // Normalized zoom center (0-1) relative to broadcast
 out vec2 v_texCoord;
 out vec2 v_pos; // Position within the quad (0-1)
 
-void main() {
-	// Start with base vertex position (0-1 range)
-	vec2 vertexPos = a_position;
-
-	// Calculate zoom deformation (radial expansion/contraction from zoom center)
-	if (abs(u_zoomDeform) > 0.001) {
-		// Distance from zoom center
-		vec2 fromCenter = vertexPos - u_zoomCenter;
-		float distFromCenter = length(fromCenter);
-
-		// Stronger effect in the middle, weaker at edges
-		// Use a smooth curve: effect decreases as we move away from center
-		// At center (dist=0): full effect
-		// At corners (dist~0.7): minimal effect
-		float zoomFalloff = 1.0 - smoothstep(0.0, 0.7, distFromCenter);
-
-		// Apply radial deformation in normalized space
-		// This pushes vertices away from/toward center based on zoom direction
-		vertexPos += fromCenter * u_zoomDeform * zoomFalloff * 0.3;
-	}
-
-	// Now apply drag deformation in pixel space
-	vec2 deformation = vec2(0.0);
+#include "./deformation.glsl"
 
-	if (length(u_velocity) > 0.0) {
-		// Distance from this vertex to the drag point
-		float dist = distance(vertexPos, u_dragPoint);
-
-		// Falloff: stronger near drag point, weaker far away
-		// Using exponential falloff for smooth, natural feel
-		// Reduced from 3.0 to 1.5 for smoother, more spread out effect
-		float falloff = exp(-dist * 1.5);
-
-		// Apply velocity-based displacement with falloff
-		deformation = u_velocity * falloff * u_dragStrength;
-	}
-
-	// Scale and translate to bounds, with deformation applied in pixel space
-	vec2 pos = vertexPos * u_bounds.zw + u_bounds.xy + deformation;
+void main() {
+	// Apply deformation using shared function
+	vec2 pos = applyDeformation(
+		a_position,
+		u_dragPoint,
+		u_velocity,
+		u_dragStrength,
+		u_zoomDeform,
+		u_zoomCenter,
+		u_bounds
+	);
 
 	// Apply projection
 	gl_Position = u_projection * vec4(pos, u_depth, 1.0);
diff --git a/app/src/room/gl/deformation.glsl b/app/src/room/gl/deformation.glsl
new file mode 100644
index 00000000..06657e8e
--- /dev/null
+++ b/app/src/room/gl/deformation.glsl
@@ -0,0 +1,61 @@
+// Shared deformation constants and functions for vertex shaders
+// Used across border, broadcast, and audio renderers
+
+// Deformation strength constants
+const float ZOOM_FALLOFF_DISTANCE = 0.7;
+const float ZOOM_DEFORM_STRENGTH = 0.3;
+const float DRAG_FALLOFF_RATE = 1.5;
+
+// Apply mesh deformation based on drag and zoom
+// vertexPos: vertex position in normalized coordinates (0-1)
+// u_dragPoint: normalized drag point (0-1) relative to broadcast
+// u_velocity: current velocity vector in pixels
+// u_dragStrength: strength multiplier for drag effect
+// u_zoomDeform: zoom deformation (positive = expanding, negative = contracting)
+// u_zoomCenter: normalized zoom center (0-1) relative to broadcast
+// u_bounds: bounds in pixel space (x, y, width, height)
+// Returns: deformed position in pixel space
+vec2 applyDeformation(
+	vec2 vertexPos,
+	vec2 u_dragPoint,
+	vec2 u_velocity,
+	float u_dragStrength,
+	float u_zoomDeform,
+	vec2 u_zoomCenter,
+	vec4 u_bounds
+) {
+	// Calculate zoom deformation (radial expansion/contraction from zoom center)
+	if (abs(u_zoomDeform) > 0.001) {
+		// Distance from zoom center
+		vec2 fromCenter = vertexPos - u_zoomCenter;
+		float distFromCenter = length(fromCenter);
+
+		// Stronger effect in the middle, weaker at edges
+		// Use a smooth curve: effect decreases as we move away from center
+		// At center (dist=0): full effect
+		// At corners (dist~0.7): minimal effect
+		float zoomFalloff = 1.0 - smoothstep(0.0, ZOOM_FALLOFF_DISTANCE, distFromCenter);
+
+		// Apply radial deformation in normalized space
+		// This pushes vertices away from/toward center based on zoom direction
+		vertexPos += fromCenter * u_zoomDeform * zoomFalloff * ZOOM_DEFORM_STRENGTH;
+	}
+
+	// Now apply drag deformation in pixel space
+	vec2 deformation = vec2(0.0);
+
+	if (length(u_velocity) > 0.0) {
+		// Distance from this vertex to the drag point
+		float dist = distance(vertexPos, u_dragPoint);
+
+		// Falloff: stronger near drag point, weaker far away
+		// Using exponential falloff for smooth, natural feel
+		float falloff = exp(-dist * DRAG_FALLOFF_RATE);
+
+		// Apply velocity-based displacement with falloff
+		deformation = u_velocity * falloff * u_dragStrength;
+	}
+
+	// Scale and translate to bounds, with deformation applied in pixel space
+	return vertexPos * u_bounds.zw + u_bounds.xy + deformation;
+}
diff --git a/app/src/room/gl/mesh.ts b/app/src/room/gl/mesh.ts
index 8daf82b1..2b047e88 100644
--- a/app/src/room/gl/mesh.ts
+++ b/app/src/room/gl/mesh.ts
@@ -105,13 +105,13 @@ export class MeshBuffer {
 		const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
 
 		gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
 
 		gl.bindBuffer(gl.ARRAY_BUFFER, this.#texCoordBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.DYNAMIC_DRAW);
+		gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
 
 		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuffer);
-		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.DYNAMIC_DRAW);
+		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
 
 		this.#isSubdivided = false;
 		this.#vertexCount = 4;
@@ -172,13 +172,13 @@ export class MeshBuffer {
 		}
 
 		gl.bindBuffer(gl.ARRAY_BUFFER, this.#positionBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.DYNAMIC_DRAW);
+		gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
 
 		gl.bindBuffer(gl.ARRAY_BUFFER, this.#texCoordBuffer);
-		gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.DYNAMIC_DRAW);
+		gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
 
 		gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.#indexBuffer);
-		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.DYNAMIC_DRAW);
+		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
 
 		this.#isSubdivided = true;
 		this.#vertexCount = totalVertices;
diff --git a/app/src/room/gl/outline.vert b/app/src/room/gl/outline.vert
deleted file mode 100644
index 71dc9461..00000000
--- a/app/src/room/gl/outline.vert
+++ /dev/null
@@ -1,61 +0,0 @@
-#version 300 es
-precision highp float;
-
-in vec2 a_position;
-
-uniform mat4 u_projection;
-uniform vec4 u_bounds; // x, y, width, height
-uniform float u_depth;
-uniform vec2 u_dragPoint; // Normalized drag point (0-1) relative to broadcast
-uniform vec2 u_velocity; // Current velocity vector
-uniform float u_dragStrength; // Strength multiplier for drag effect
-uniform float u_zoomDeform; // Zoom deformation (positive = expanding, negative = contracting)
-uniform vec2 u_zoomCenter; // Normalized zoom center (0-1) relative to broadcast
-
-out vec2 v_pos; // Position within the quad (0-1)
-
-void main() {
-	// Start with base vertex position (0-1 range)
-	vec2 vertexPos = a_position;
-
-	// Calculate zoom deformation (radial expansion/contraction from zoom center)
-	if (abs(u_zoomDeform) > 0.001) {
-		// Distance from zoom center
-		vec2 fromCenter = vertexPos - u_zoomCenter;
-		float distFromCenter = length(fromCenter);
-
-		// Stronger effect in the middle, weaker at edges
-		// Use a smooth curve: effect decreases as we move away from center
-		// At center (dist=0): full effect
-		// At corners (dist~0.7): minimal effect
-		float zoomFalloff = 1.0 - smoothstep(0.0, 0.7, distFromCenter);
-
-		// Apply radial deformation in normalized space
-		// This pushes vertices away from/toward center based on zoom direction
-		vertexPos += fromCenter * u_zoomDeform * zoomFalloff * 0.3;
-	}
-
-	// Now apply drag deformation in pixel space
-	vec2 deformation = vec2(0.0);
-
-	if (length(u_velocity) > 0.0) {
-		// Distance from this vertex to the drag point
-		float dist = distance(vertexPos, u_dragPoint);
-
-		// Falloff: stronger near drag point, weaker far away
-		// Using exponential falloff for smooth, natural feel
-		// Reduced from 3.0 to 1.5 for smoother, more spread out effect
-		float falloff = exp(-dist * 1.5);
-
-		// Apply velocity-based displacement with falloff
-		deformation = u_velocity * falloff * u_dragStrength;
-	}
-
-	// Scale and translate to bounds, with deformation applied in pixel space
-	vec2 pos = vertexPos * u_bounds.zw + u_bounds.xy + deformation;
-
-	// Apply projection
-	gl_Position = u_projection * vec4(pos, u_depth, 1.0);
-
-	v_pos = a_position;
-}
diff --git a/app/src/room/space.ts b/app/src/room/space.ts
index 1b00a955..d3719203 100644
--- a/app/src/room/space.ts
+++ b/app/src/room/space.ts
@@ -3,9 +3,9 @@ import { Effect, Signal } from "@kixelated/signals";
 import { Broadcast, BroadcastSource } from "./broadcast";
 import type { Canvas } from "./canvas";
 import { Vector } from "./geometry";
+import { AudioRenderer } from "./gl/audio";
 import { BorderRenderer } from "./gl/border";
 import { BroadcastRenderer } from "./gl/broadcast";
-import { AudioRenderer } from "./gl/outline";
 import type { Sound } from "./sound";
 
 export type SpaceProps = {
diff --git a/app/tsconfig.json b/app/tsconfig.json
index f07648e6..199e5188 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -13,7 +13,7 @@
 		"noUncheckedIndexedAccess": false,
 		"erasableSyntaxOnly": true,
 		"resolveJsonModule": true,
-		"types": ["vite/client", "../api/worker-configuration.d.ts"]
+		"types": ["vite/client", "vite-plugin-glsl/ext", "../api/worker-configuration.d.ts"]
 	},
 	"include": ["src"]
 }
diff --git a/app/vite.config.ts b/app/vite.config.ts
index fe716ac2..80a5a0aa 100644
--- a/app/vite.config.ts
+++ b/app/vite.config.ts
@@ -2,6 +2,7 @@ import * as fs from "node:fs";
 import * as path from "node:path";
 import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
+import glsl from "vite-plugin-glsl";
 import solid from "vite-plugin-solid";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 
@@ -29,9 +30,10 @@ export default defineConfig(() => {
 			format: "es" as const,
 		},
 
-		assetsInclude: ["**/*.glsl", "**/*.vert", "**/*.frag"],
-
 		plugins: [
+			glsl({
+				minify: process.env.NODE_ENV === "production",
+			}),
 			solid(),
 			tailwindcss(),
 			viteStaticCopy({
diff --git a/bun.lock b/bun.lock
index ae6afeeb..4ea8252e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -72,6 +72,7 @@
         "tsx": "^4.20.5",
         "typescript": "~5.8.3",
         "vite": "^6.3.5",
+        "vite-plugin-glsl": "^1.5.4",
         "vite-plugin-solid": "^2.11.8",
         "vite-plugin-static-copy": "^2.1.0",
         "vite-plugin-wrangler": "^0.1.1",
@@ -1374,6 +1375,8 @@
 
     "vite-node": ["vite-node@3.2.4", "", { "dependencies": { "cac": "^6.7.14", "debug": "^4.4.1", "es-module-lexer": "^1.7.0", "pathe": "^2.0.3", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0" }, "bin": { "vite-node": "vite-node.mjs" } }, "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg=="],
 
+    "vite-plugin-glsl": ["vite-plugin-glsl@1.5.4", "", { "peerDependencies": { "@rollup/pluginutils": "^5.x", "esbuild": ">= 0.25", "vite": ">= 3.x" }, "optionalPeers": ["@rollup/pluginutils", "esbuild"] }, "sha512-EUmwL+IDK+dGDAlaKm89++k8aJ4qmHjLQxrngww3GLOOAQ4aZ48o9YR1ie7XPe08iDWlG+9Uh5V7oiZcXTUbyA=="],
+
     "vite-plugin-html": ["vite-plugin-html@3.2.2", "", { "dependencies": { "@rollup/pluginutils": "^4.2.0", "colorette": "^2.0.16", "connect-history-api-fallback": "^1.6.0", "consola": "^2.15.3", "dotenv": "^16.0.0", "dotenv-expand": "^8.0.2", "ejs": "^3.1.6", "fast-glob": "^3.2.11", "fs-extra": "^10.0.1", "html-minifier-terser": "^6.1.0", "node-html-parser": "^5.3.3", "pathe": "^0.2.0" }, "peerDependencies": { "vite": ">=2.0.0" } }, "sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q=="],
 
     "vite-plugin-solid": ["vite-plugin-solid@2.11.8", "", { "dependencies": { "@babel/core": "^7.23.3", "@types/babel__core": "^7.20.4", "babel-preset-solid": "^1.8.4", "merge-anything": "^5.1.7", "solid-refresh": "^0.6.3", "vitefu": "^1.0.4" }, "peerDependencies": { "@testing-library/jest-dom": "^5.16.6 || ^5.17.0 || ^6.*", "solid-js": "^1.7.2", "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" }, "optionalPeers": ["@testing-library/jest-dom"] }, "sha512-hFrCxBfv3B1BmFqnJF4JOCYpjrmi/zwyeKjcomQ0khh8HFyQ8SbuBWQ7zGojfrz6HUOBFrJBNySDi/JgAHytWg=="],

From ad2d78d9500f9b9e12043a7126d6103fb056ca6c Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Mon, 13 Oct 2025 10:27:59 -0700
Subject: [PATCH 3/4] Util folder.

---
 app/src/room/gl/audio.frag        |  6 +-----
 app/src/room/gl/background.frag   | 19 ++-----------------
 app/src/room/gl/border.frag       |  6 +-----
 app/src/room/gl/broadcast.frag    | 20 ++------------------
 app/src/room/gl/util/color.glsl   | 21 +++++++++++++++++++++
 app/src/room/gl/util/effects.glsl | 17 +++++++++++++++++
 app/src/room/gl/util/sdf.glsl     | 11 +++++++++++
 7 files changed, 55 insertions(+), 45 deletions(-)
 create mode 100644 app/src/room/gl/util/color.glsl
 create mode 100644 app/src/room/gl/util/effects.glsl
 create mode 100644 app/src/room/gl/util/sdf.glsl

diff --git a/app/src/room/gl/audio.frag b/app/src/room/gl/audio.frag
index 69f4a15c..1ce4f438 100644
--- a/app/src/room/gl/audio.frag
+++ b/app/src/room/gl/audio.frag
@@ -14,11 +14,7 @@ uniform float u_finalAlpha; // Pre-computed final alpha (0.3 + volume * 0.4)
 
 out vec4 fragColor;
 
-// Signed distance function for rounded rectangle
-float roundedBoxSDF(vec2 center, vec2 size, float radius) {
-	vec2 q = abs(center) - size + radius;
-	return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-}
+#include "./util/sdf.glsl"
 
 void main() {
 	if (u_opacity <= 0.01) {
diff --git a/app/src/room/gl/background.frag b/app/src/room/gl/background.frag
index 81e660e9..c29a690f 100644
--- a/app/src/room/gl/background.frag
+++ b/app/src/room/gl/background.frag
@@ -14,28 +14,13 @@ const float WOBBLE_SPEED = 0.0004;
 
 const float SEGMENT_WIDTH = 120.0; // Pixels per segment
 
+#include "./util/color.glsl"
+
 // Hash function for deterministic randomness
 float hash(float n) {
 	return fract(sin(n) * 43758.5453123);
 }
 
-// Convert HSL to RGB
-vec3 hsl2rgb(float h, float s, float l) {
-	float c = (1.0 - abs(2.0 * l - 1.0)) * s;
-	float x = c * (1.0 - abs(mod(h / 60.0, 2.0) - 1.0));
-	float m = l - c / 2.0;
-
-	vec3 rgb;
-	if (h < 60.0) rgb = vec3(c, x, 0.0);
-	else if (h < 120.0) rgb = vec3(x, c, 0.0);
-	else if (h < 180.0) rgb = vec3(0.0, c, x);
-	else if (h < 240.0) rgb = vec3(0.0, x, c);
-	else if (h < 300.0) rgb = vec3(x, 0.0, c);
-	else rgb = vec3(c, 0.0, x);
-
-	return rgb + m;
-}
-
 void main() {
 	// Work in simple horizontal line space - rotation happens in vertex shader
 	vec2 pos = v_pixel;
diff --git a/app/src/room/gl/border.frag b/app/src/room/gl/border.frag
index 0ec03941..2f2534c0 100644
--- a/app/src/room/gl/border.frag
+++ b/app/src/room/gl/border.frag
@@ -10,11 +10,7 @@ uniform float u_border; // Border size in pixels
 
 out vec4 fragColor;
 
-// Signed distance function for rounded rectangle
-float roundedBoxSDF(vec2 center, vec2 size, float radius) {
-	vec2 q = abs(center) - size + radius;
-	return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-}
+#include "./util/sdf.glsl"
 
 void main() {
 	// v_pos is 0-1 in the quad
diff --git a/app/src/room/gl/broadcast.frag b/app/src/room/gl/broadcast.frag
index 0abe38ea..abb34abe 100644
--- a/app/src/room/gl/broadcast.frag
+++ b/app/src/room/gl/broadcast.frag
@@ -20,24 +20,8 @@ uniform vec3 u_memeChromaColor; // Chroma key color for greenscreen removal (RGB
 
 out vec4 fragColor;
 
-// Signed distance function for rounded rectangle
-float roundedBoxSDF(vec2 center, vec2 size, float radius) {
-	vec2 q = abs(center) - size + radius;
-	return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
-}
-
-// Chroma key removal for greenscreen
-float chromaKey(vec3 color, vec3 keyColor) {
-	// Calculate distance from key color
-	float dist = distance(color, keyColor);
-
-	// Similarity threshold (0.3) and smoothness (0.05) matching ffmpeg settings
-	float similarity = 0.3;
-	float smoothness = 0.05;
-
-	// Return alpha: 0.0 for green pixels, 1.0 for non-green
-	return smoothstep(similarity - smoothness, similarity + smoothness, dist);
-}
+#include "./util/sdf.glsl"
+#include "./util/effects.glsl"
 
 void main() {
 	// Calculate position from center
diff --git a/app/src/room/gl/util/color.glsl b/app/src/room/gl/util/color.glsl
new file mode 100644
index 00000000..ccaf24cc
--- /dev/null
+++ b/app/src/room/gl/util/color.glsl
@@ -0,0 +1,21 @@
+// Color conversion utilities
+
+// Convert HSL to RGB
+// h: hue in degrees (0-360)
+// s: saturation (0-1)
+// l: lightness (0-1)
+vec3 hsl2rgb(float h, float s, float l) {
+	float c = (1.0 - abs(2.0 * l - 1.0)) * s;
+	float x = c * (1.0 - abs(mod(h / 60.0, 2.0) - 1.0));
+	float m = l - c / 2.0;
+
+	vec3 rgb;
+	if (h < 60.0) rgb = vec3(c, x, 0.0);
+	else if (h < 120.0) rgb = vec3(x, c, 0.0);
+	else if (h < 180.0) rgb = vec3(0.0, c, x);
+	else if (h < 240.0) rgb = vec3(0.0, x, c);
+	else if (h < 300.0) rgb = vec3(x, 0.0, c);
+	else rgb = vec3(c, 0.0, x);
+
+	return rgb + m;
+}
diff --git a/app/src/room/gl/util/effects.glsl b/app/src/room/gl/util/effects.glsl
new file mode 100644
index 00000000..4b8014ee
--- /dev/null
+++ b/app/src/room/gl/util/effects.glsl
@@ -0,0 +1,17 @@
+// Visual effects utilities
+
+// Chroma key removal for greenscreen
+// color: the pixel color to test
+// keyColor: the chroma key color to remove (typically green)
+// Returns alpha: 0.0 for pixels matching key color, 1.0 for other pixels
+float chromaKey(vec3 color, vec3 keyColor) {
+	// Calculate distance from key color
+	float dist = distance(color, keyColor);
+
+	// Similarity threshold (0.3) and smoothness (0.05) matching ffmpeg settings
+	float similarity = 0.3;
+	float smoothness = 0.05;
+
+	// Return alpha: 0.0 for green pixels, 1.0 for non-green
+	return smoothstep(similarity - smoothness, similarity + smoothness, dist);
+}
diff --git a/app/src/room/gl/util/sdf.glsl b/app/src/room/gl/util/sdf.glsl
new file mode 100644
index 00000000..bb0f783e
--- /dev/null
+++ b/app/src/room/gl/util/sdf.glsl
@@ -0,0 +1,11 @@
+// Signed Distance Functions (SDF) for shapes
+
+// Signed distance function for rounded rectangle
+// Returns the signed distance from a point to a rounded rectangle
+// center: position relative to rectangle center
+// size: half-size of the rectangle (from center to edge)
+// radius: corner radius
+float roundedBoxSDF(vec2 center, vec2 size, float radius) {
+	vec2 q = abs(center) - size + radius;
+	return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - radius;
+}

From 0e0d6fcdf990abbc3f80cb20ab70ba5d7abc23a8 Mon Sep 17 00:00:00 2001
From: Luke Curley <kixelated@gmail.com>
Date: Mon, 13 Oct 2025 10:36:38 -0700
Subject: [PATCH 4/4] Subdivie based on zoom.

---
 app/src/room/broadcast.ts | 7 ++++---
 app/src/room/gl/mesh.ts   | 8 +++++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/src/room/broadcast.ts b/app/src/room/broadcast.ts
index 6cb80ffa..e13fac05 100644
--- a/app/src/room/broadcast.ts
+++ b/app/src/room/broadcast.ts
@@ -220,8 +220,8 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 		this.audio.tick();
 		this.video.tick(now);
 
-		// Update mesh based on velocity
-		this.mesh.update(this.velocity);
+		// Update mesh based on deformation velocity and zoom deformation
+		this.mesh.update(this.deformVelocity, this.zoomDeform);
 
 		// Update opacity based on online status
 		const fadeTime = 300; // ms
@@ -311,8 +311,9 @@ export class Broadcast<T extends BroadcastSource = BroadcastSource> {
 		}
 
 		// Decay zoom deformation (set by user interaction in Space)
+		// Slower decay than drag to keep mesh subdivided during zoom animation
 		if (Math.abs(this.zoomDeform) > 0.01) {
-			this.zoomDeform *= 0.9;
+			this.zoomDeform *= 0.95;
 		} else {
 			this.zoomDeform = 0;
 		}
diff --git a/app/src/room/gl/mesh.ts b/app/src/room/gl/mesh.ts
index 2b047e88..6783c042 100644
--- a/app/src/room/gl/mesh.ts
+++ b/app/src/room/gl/mesh.ts
@@ -5,6 +5,7 @@ import { Vector } from "../geometry";
 export const BORDER_WIDTH = 12;
 export const AUDIO_VIZ_WIDTH = 18; // BORDER_WIDTH * 1.5
 export const DRAG_THRESHOLD = 0.5; // Minimum velocity magnitude to trigger mesh deformation
+export const ZOOM_THRESHOLD = 0.1; // Minimum zoom deformation to trigger mesh subdivision (lower than drag)
 
 export interface MeshConfig {
 	meshSubdivisions: number; // Grid size (e.g., 20 for 20x20 grid)
@@ -64,10 +65,11 @@ export class MeshBuffer {
 		return this.#vertexCount;
 	}
 
-	// Update mesh based on velocity
-	update(velocity: Vector) {
+	// Update mesh based on velocity and zoom deformation
+	update(velocity: Vector, zoomDeform: number) {
 		const velocityMagnitude = velocity.length();
-		const shouldSubdivide = velocityMagnitude > DRAG_THRESHOLD;
+		const zoomMagnitude = Math.abs(zoomDeform);
+		const shouldSubdivide = velocityMagnitude > DRAG_THRESHOLD || zoomMagnitude > ZOOM_THRESHOLD;
 
 		if (shouldSubdivide && !this.#isSubdivided) {
 			this.#generateSubdividedMesh();