starred/warmbly
1
0
Fork 0
mirror of https://github.com/warmbly/warmbly.git synced 2026-09-06 00:01:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: register the app shell's visibility observer under reduced motion too so an off-screen shell still pauses its animations while only the counter ticker stays off, and read the ?noshell, ?noanim and ?nogl phone diagnostics as query parameter names through URLSearchParams instead of matching the raw query string

Browse Source
This commit is contained in:
Matthew Meszaros
2026-09-02 09:00:29 -07:00
parent b675b82657
commit 3ecb25786a
3 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/AppShellMock.astro
+3 -2
View File
@@ -477,7 +477,8 @@ const online = [
};
let onScreen = false;
const sync = () => (onScreen && !document.hidden ? start() : stop());
// Reduced motion never ticks the counters; the observer still parks the shell.
const sync = () => (onScreen && !document.hidden && !REDUCED ? start() : stop());
new IntersectionObserver((entries) => {
onScreen = entries.some((e) => e.isIntersecting);
// Off screen, the pings and pulses inside stop too (see global.css).
@@ -487,7 +488,7 @@ const online = [
document.addEventListener('visibilitychange', sync);
}
if (!REDUCED) document.querySelectorAll<HTMLElement>('[data-shell]').forEach(live);
document.querySelectorAll<HTMLElement>('[data-shell]').forEach(live);
// The shell is a picture: nothing inside it is a real tab stop.
document.querySelectorAll<HTMLElement>('[data-shell] button, [data-shell] input, [data-shell] a, [data-shell] [tabindex]').forEach((el) => { el.tabIndex = -1; });
</script>
site/src/components/GrainBackdrop.astro
+1 -1
View File
@@ -53,7 +53,7 @@ const t = GRAIN_TONES[tone];
// Phones: a 3x canvas per frame is what pushes iOS Safari over its GPU
// memory limit while scrolling; 2x grain reads the same at that size.
const touch = window.matchMedia('(hover: none)').matches;
const noGl = /[?&]nogl\b/.test(location.search);
const noGl = new URLSearchParams(location.search).has('nogl');
const maxPixels = touch ? 1280 * 720 : 1920 * 1080 * 2;
// Every frame gets its own rotation, drift and shape. Sharing one palette
site/src/layouts/Layout.astro
+4 -1
View File
@@ -143,7 +143,10 @@ const websiteJsonLd = {
<script type="application/ld+json" is:inline set:html={JSON.stringify(schema)} />
))}
<!-- Phone diagnostics: ?noshell / ?noanim / ?nogl switch heavy subsystems off (global.css, GrainBackdrop). -->
<script is:inline>document.documentElement.dataset.diag = (location.search.match(/\b(noshell|noanim|nogl)\b/g) || []).join(' ');</script>
<script is:inline>
var diagParams = new URLSearchParams(location.search);
document.documentElement.dataset.diag = ['noshell', 'noanim', 'nogl'].filter(function (f) { return diagParams.has(f); }).join(' ');
</script>
</head>
<body class="min-h-screen flex flex-col antialiased">
{!bare && <LaunchBanner />}