From fc85d66f5c0d7125373bbc445663c2b6fa0cb8bc Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 1 Feb 2026 14:10:55 -0600
Subject: [PATCH] Fix VinylPanel: add padding and aggressive parallax

- Add padding around vinyl (scale UV by 1.15x)
- Discard pixels outside bounds to avoid edge artifacts
- Much more aggressive parallax: cover 80/50px, vinyl 50/35px
- Shader parallax offset increased to 0.08
- Vinyl size reduced to 85% for more breathing room
---
 .../immersive/panels/VinylPanel.svelte        | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/immersive/panels/VinylPanel.svelte b/src/lib/components/immersive/panels/VinylPanel.svelte
index 74f0d62e9..3481a591a 100644
--- a/src/lib/components/immersive/panels/VinylPanel.svelte
+++ b/src/lib/components/immersive/panels/VinylPanel.svelte
@@ -50,9 +50,9 @@
     mouseY = 0.5;
   }
 
-  // Parallax calculations (more sensitive)
-  const coverOffsetX = $derived((mouseX - 0.5) * 40);
-  const coverOffsetY = $derived((mouseY - 0.5) * 25);
+  // Parallax calculations (aggressive)
+  const coverOffsetX = $derived((mouseX - 0.5) * 80);
+  const coverOffsetY = $derived((mouseY - 0.5) * 50);
   const revealOffset = $derived(isPlaying ? -12 : 0);
 
   // Vertex shader
@@ -93,11 +93,20 @@
       float s = sin(u_rotation);
       uv = vec2(uv.x * c - uv.y * s, uv.x * s + uv.y * c);
 
-      // Apply subtle parallax offset
-      uv += u_parallax * 0.02;
+      // Apply aggressive parallax offset
+      uv += u_parallax * 0.08;
 
       uv += center;
 
+      // Add padding - scale down UV to add margin around vinyl
+      uv = (uv - 0.5) * 1.15 + 0.5;
+
+      // Discard pixels outside texture bounds (creates padding)
+      if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+        fragColor = vec4(0.0);
+        return;
+      }
+
       // Sample texture
       vec4 color = texture(u_texture, uv);
 
@@ -223,10 +232,10 @@
 
     gl.useProgram(program);
 
-    // Calculate vinyl size and position (centered)
-    const size = Math.min(rect.width, rect.height) * 0.95;
-    const offsetX = (rect.width - size) / 2 + (mouseX - 0.5) * -25;
-    const offsetY = (rect.height - size) / 2 + (mouseY - 0.5) * -15;
+    // Calculate vinyl size and position (centered, with padding)
+    const size = Math.min(rect.width, rect.height) * 0.85;
+    const offsetX = (rect.width - size) / 2 + (mouseX - 0.5) * -50;
+    const offsetY = (rect.height - size) / 2 + (mouseY - 0.5) * -35;
 
     // Set uniforms
     gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), rect.width, rect.height);