xeno/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: quantize the opening reading-mask reveal to 24 steps

Browse Source
This commit is contained in:
LucaP
2026-10-10 17:46:17 +03:00
parent 0821b542b5
commit 45cc1056ee
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/scene/world/sign-stage.ts
View File

@@ -2,6 +2,7 @@ import type { SceneResourceBag } from '@/scene/resources';
import { usesRoadsideSign } from './sign-layout'; import { usesRoadsideSign } from './sign-layout';
const stageOwners = new WeakMap<HTMLElement, object>(); const stageOwners = new WeakMap<HTMLElement, object>();
const REVEAL_STEPS = 24;
/** Keep the reading-edge mask stationary while native document scrolling /** Keep the reading-edge mask stationary while native document scrolling
* moves the content behind it. Changing chapter-sized gradients on every * 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)`; main.style.transform = `translate3d(0, ${-offset}px, 0)`;
lastOffset = offset; 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, 1,
Math.max(0, window.scrollY / Math.max(240, viewportHeight * 0.58)), Math.max(0, window.scrollY / Math.max(240, viewportHeight * 0.58)),
); ) * REVEAL_STEPS) / REVEAL_STEPS;
const top = topEdge * reveal; const top = topEdge * reveal;
const bottom = const bottom =
viewportHeight < 560 && viewportWidth < 768 ? viewportHeight - 164 : null; viewportHeight < 560 && viewportWidth < 768 ? viewportHeight - 164 : null;