diff --git a/src/scene/world/sign-stage.ts b/src/scene/world/sign-stage.ts index 902a0de..c313d95 100644 --- a/src/scene/world/sign-stage.ts +++ b/src/scene/world/sign-stage.ts @@ -2,6 +2,7 @@ import type { SceneResourceBag } from '@/scene/resources'; import { usesRoadsideSign } from './sign-layout'; const stageOwners = new WeakMap(); +const REVEAL_STEPS = 24; /** Keep the reading-edge mask stationary while native document scrolling * moves the content behind it. Changing chapter-sized gradients on every @@ -50,10 +51,12 @@ export function createSignStage(resources: SceneResourceBag) { main.style.transform = `translate3d(0, ${-offset}px, 0)`; lastOffset = offset; } - const reveal = Math.min( + // Quantize the opening reveal: the mask image is rebuilt at most + // REVEAL_STEPS times on the way in instead of on every scroll event. + const reveal = Math.round(Math.min( 1, Math.max(0, window.scrollY / Math.max(240, viewportHeight * 0.58)), - ); + ) * REVEAL_STEPS) / REVEAL_STEPS; const top = topEdge * reveal; const bottom = viewportHeight < 560 && viewportWidth < 768 ? viewportHeight - 164 : null;