diff --git a/website/app.js b/website/app.js index 55bc1d2..f11d24a 100644 --- a/website/app.js +++ b/website/app.js @@ -266,15 +266,14 @@ document.addEventListener('DOMContentLoaded', () => { const doc = document.documentElement; const maxScroll = Math.max(1, doc.scrollHeight - window.innerHeight); const depth = Math.min(1, window.scrollY / maxScroll); - // Couple the forest directly to the scroll distance so it visibly - // travels down instead of being overpowered by upward-moving content. + // Couple the forest directly to the scroll distance. The layers + // follow the content's direction (up-screen while scrolling down) + // but slower — near fastest, far slowest — so the forest recedes + // with believable depth instead of moving against the page. const shift = Math.min(window.innerHeight * 0.55, window.scrollY * 0.14); - // All bamboo layers travel in the same vertical direction. Depth - // comes from their different speeds; reversing one layer makes - // the forest look mechanically disconnected while scrolling. - bambooFar.style.transform = `translate(${(-mouseX * 5).toFixed(1)}px, ${(shift * 0.42).toFixed(1)}px)`; - bambooNear.style.transform = `translate(${(mouseX * 11).toFixed(1)}px, ${shift.toFixed(1)}px)`; - if (bambooMid) bambooMid.style.transform = `translate(${(mouseX * 4).toFixed(1)}px, ${(shift * 0.7).toFixed(1)}px)`; + bambooFar.style.transform = `translate(${(-mouseX * 5).toFixed(1)}px, ${(-shift * 0.42).toFixed(1)}px)`; + bambooNear.style.transform = `translate(${(mouseX * 11).toFixed(1)}px, ${(-shift).toFixed(1)}px)`; + if (bambooMid) bambooMid.style.transform = `translate(${(mouseX * 4).toFixed(1)}px, ${(-shift * 0.7).toFixed(1)}px)`; if (depthDay) depthDay.style.transform = `translate(${(-mouseX * 2.5).toFixed(1)}px, ${(mouseY * 1.5).toFixed(1)}px)`; if (depthDay) depthDay.style.opacity = (1 - depth * 0.75).toFixed(3); if (depthDusk) depthDusk.style.opacity = (0.35 + depth * 0.65).toFixed(3); diff --git a/website/style.css b/website/style.css index 94ddb4e..2481d37 100644 --- a/website/style.css +++ b/website/style.css @@ -163,9 +163,10 @@ body { #bamboo-far .bamboo-stalk { position: absolute; - /* 200% covers the parallax drift (max 0.55vh down) with margin while - keeping the blurred layer 17% smaller than the old 240% overscan. */ - top: -70%; + /* 200% covers the upward parallax drift (max 0.55vh on the near layer) + with margin while keeping the blurred layer smaller than the old + 240% overscan. Spare coverage sits below, where the drift needs it. */ + top: -40%; height: 200%; border-radius: 999px; filter: blur(4.5px); @@ -193,7 +194,7 @@ body { #bamboo-far::after { content: ''; position: absolute; - top: -70%; + top: -40%; height: 200%; border-radius: 999px; filter: blur(6.5px); @@ -221,7 +222,7 @@ body { #bamboo-mid .bamboo-stalk { position: absolute; - top: -70%; + top: -40%; height: 200%; border-radius: 999px; filter: blur(2px); @@ -283,7 +284,7 @@ body { #bamboo-near .bamboo-stalk { position: absolute; - top: -70%; + top: -40%; height: 200%; border-radius: 999px; /* Vertical sheen over the culm gradient: reads as light from the