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;
}
// 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);