Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve VinylPanel parallax sensitivity and alignment

Browse Source 
- Double parallax sensitivity (30/20px cover, 18/12px disc)
- Cover and disc now vertically centered together
- Cover slides 15% left when playing to reveal disc
- Simplified transform calculations
This commit is contained in:
vicrodh committed 2026-02-01 13:55:05 -06:00
1 parent fcb81dad2b
commit 20b9aa2c86
1 file changed
+13 -19
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/immersive/panels/VinylPanel.svelte
+13 -19
View File
@@ -40,11 +40,14 @@
mouseY = 0.5; mouseY = 0.5;
} }
// Parallax offset calculations // Parallax offset calculations (more sensitive)
const coverOffsetX = $derived((mouseX - 0.5) * 15); const coverOffsetX = $derived((mouseX - 0.5) * 30);
const coverOffsetY = $derived((mouseY - 0.5) * 10); const coverOffsetY = $derived((mouseY - 0.5) * 20);
const discOffsetX = $derived((mouseX - 0.5) * -8); const discOffsetX = $derived((mouseX - 0.5) * -18);
const discOffsetY = $derived((mouseY - 0.5) * -5); const discOffsetY = $derived((mouseY - 0.5) * -12);
// Reveal offset when playing (percentage of container)
const revealOffset = $derived(isPlaying ? -15 : 0);
// Generate groove rings (40 rings) // Generate groove rings (40 rings)
const grooveCount = 40; const grooveCount = 40;
@@ -87,8 +90,7 @@
<!-- Album Cover (IN FRONT, slides to reveal disc) --> <!-- Album Cover (IN FRONT, slides to reveal disc) -->
<div <div
class="album-cover" class="album-cover"
class:revealed={isPlaying} style="transform: translate(calc(-50% + {coverOffsetX}px + {revealOffset}%), calc(-50% + {coverOffsetY}px))"
style="transform: translate({coverOffsetX}px, {coverOffsetY}px)"
> >
<img src={artwork} alt={trackTitle} /> <img src={artwork} alt={trackTitle} />
</div> </div>
@@ -249,14 +251,13 @@
pointer-events: none; pointer-events: none;
} }
/* Album Cover - in front of disc */ /* Album Cover - in front of disc, centered */
.album-cover { .album-cover {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); width: 75%;
width: 80%; height: 75%;
height: 80%;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: box-shadow:
@@ -266,10 +267,7 @@
transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1); transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
} }
/* When playing, slide cover to reveal disc */ /* revealed class handled by inline style for smooth parallax integration */
.album-cover.revealed {
transform: translate(-70%, -50%);
}
.album-cover img { .album-cover img {
width: 100%; width: 100%;
@@ -323,10 +321,6 @@
width: min(350px, 50vw); width: min(350px, 50vw);
height: min(350px, 50vw); height: min(350px, 50vw);
} }
.album-cover.revealed {
transform: translate(-60%, -50%);
}
} }
@media (max-height: 600px) { @media (max-height: 600px) {