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
This commit is contained in:
vicrodh committed 2026-02-01 14:10:55 -06:00
1 parent 6265e685ea
commit fc85d66f5c
1 file changed
+18 -9
@@ -50,9 +50,9 @@
mouseY = 0.5; mouseY = 0.5;
} }
// Parallax calculations (more sensitive) // Parallax calculations (aggressive)
const coverOffsetX = $derived((mouseX - 0.5) * 40); const coverOffsetX = $derived((mouseX - 0.5) * 80);
const coverOffsetY = $derived((mouseY - 0.5) * 25); const coverOffsetY = $derived((mouseY - 0.5) * 50);
const revealOffset = $derived(isPlaying ? -12 : 0); const revealOffset = $derived(isPlaying ? -12 : 0);
// Vertex shader // Vertex shader
@@ -93,11 +93,20 @@
float s = sin(u_rotation); float s = sin(u_rotation);
uv = vec2(uv.x * c - uv.y * s, uv.x * s + uv.y * c); uv = vec2(uv.x * c - uv.y * s, uv.x * s + uv.y * c);
// Apply subtle parallax offset // Apply aggressive parallax offset
uv += u_parallax * 0.02; uv += u_parallax * 0.08;
uv += center; 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 // Sample texture
vec4 color = texture(u_texture, uv); vec4 color = texture(u_texture, uv);
@@ -223,10 +232,10 @@
gl.useProgram(program); gl.useProgram(program);
// Calculate vinyl size and position (centered) // Calculate vinyl size and position (centered, with padding)
const size = Math.min(rect.width, rect.height) * 0.95; const size = Math.min(rect.width, rect.height) * 0.85;
const offsetX = (rect.width - size) / 2 + (mouseX - 0.5) * -25; const offsetX = (rect.width - size) / 2 + (mouseX - 0.5) * -50;
const offsetY = (rect.height - size) / 2 + (mouseY - 0.5) * -15; const offsetY = (rect.height - size) / 2 + (mouseY - 0.5) * -35;
// Set uniforms // Set uniforms
gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), rect.width, rect.height); gl.uniform2f(gl.getUniformLocation(program, 'u_resolution'), rect.width, rect.height);