Press R to replay · G toggle grid · H toggle logo
diff --git a/src/apps/makelogo/MakeabilityLabLogoGridFade/sketch.js b/src/apps/makelogo/MakeabilityLabLogoGridFade/sketch.js index 19e0c21..db11621 100644 --- a/src/apps/makelogo/MakeabilityLabLogoGridFade/sketch.js +++ b/src/apps/makelogo/MakeabilityLabLogoGridFade/sketch.js @@ -33,6 +33,16 @@ const ctx = canvas.getContext('2d'); let makeLabLogo; let gridFade; let animationStartMs = 0; +let rafId = 0; + +// Respect the user's "reduce motion" OS/browser setting (accessibility). When +// it's on, we skip the reveal animation and just show the finished logo. +const reducedMotionQuery = + window.matchMedia?.('(prefers-reduced-motion: reduce)'); + +// A timestamp well past the end of the reveal. Every piece clamps its progress +// to 1, so updating with this settles the whole animation to its final frame. +const SETTLE_MS = 10_000_000; /** * (Re)builds the canvas, logo, and animation for the current window size. @@ -95,7 +105,30 @@ function frame(now) { gridFade.update(elapsedMs); gridFade.draw(ctx); - requestAnimationFrame(frame); + rafId = requestAnimationFrame(frame); +} + +/** Draws the finished logo as a single static frame (no motion). */ +function drawSettledFrame() { + ctx.fillStyle = BACKGROUND_COLOR; + ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); + gridFade.update(SETTLE_MS); + gridFade.draw(ctx); +} + +/** + * Plays the reveal animation — or, if the user prefers reduced motion, draws + * the finished logo as one static frame instead of animating. + */ +function start() { + cancelAnimationFrame(rafId); + gridFade.reset(); + animationStartMs = 0; + if (reducedMotionQuery?.matches) { + drawSettledFrame(); + } else { + rafId = requestAnimationFrame(frame); + } } // Rebuild on resize (debounced). The clock keeps running, so an already-revealed @@ -103,7 +136,11 @@ function frame(now) { let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); - resizeTimer = setTimeout(buildScene, 150); + resizeTimer = setTimeout(() => { + buildScene(); + // No loop runs under reduced motion, so repaint the static frame ourselves. + if (reducedMotionQuery?.matches) drawSettledFrame(); + }, 150); }); // --- Interaction --- @@ -139,4 +176,8 @@ document.addEventListener('keydown', (event) => { }); buildScene(); -requestAnimationFrame(frame); +start(); + +// If the user toggles "reduce motion" while the page is open, react live +// (start animating, or settle to the static frame) without a reload. +reducedMotionQuery?.addEventListener?.('change', start); diff --git a/src/apps/makelogo/MakeabilityLabLogoGridFade/style.css b/src/apps/makelogo/MakeabilityLabLogoGridFade/style.css index 9373db3..bd79cb1 100644 --- a/src/apps/makelogo/MakeabilityLabLogoGridFade/style.css +++ b/src/apps/makelogo/MakeabilityLabLogoGridFade/style.css @@ -57,3 +57,18 @@ kbd { display: block; } } + +/* Visually hidden: removed from view but kept in the accessibility tree so the +Press R to replay · F drop leaves · T toggle leaf fade · G toggle grid · H toggle logo
diff --git a/src/apps/makelogo/MakeabilityLabLogoLeafFall/sketch.js b/src/apps/makelogo/MakeabilityLabLogoLeafFall/sketch.js index b37e74b..e8a1599 100644 --- a/src/apps/makelogo/MakeabilityLabLogoLeafFall/sketch.js +++ b/src/apps/makelogo/MakeabilityLabLogoLeafFall/sketch.js @@ -34,6 +34,16 @@ const ctx = canvas.getContext('2d'); let makeLabLogo; let leafFall; let animationStartMs = 0; +let rafId = 0; + +// Respect the user's "reduce motion" OS/browser setting (accessibility). When +// it's on, we skip the falling animation and just show the finished logo. +const reducedMotionQuery = + window.matchMedia?.('(prefers-reduced-motion: reduce)'); + +// A timestamp well past the end of the fall. Every piece clamps its progress +// to 1, so updating with this settles the whole animation to its final frame. +const SETTLE_MS = 10_000_000; /** * (Re)builds the canvas, logo, and animation for the current window size. @@ -94,7 +104,30 @@ function frame(now) { leafFall.update(elapsedMs); leafFall.draw(ctx); - requestAnimationFrame(frame); + rafId = requestAnimationFrame(frame); +} + +/** Draws the finished logo as a single static frame (no motion). */ +function drawSettledFrame() { + ctx.fillStyle = BACKGROUND_COLOR; + ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); + leafFall.update(SETTLE_MS); + leafFall.draw(ctx); +} + +/** + * Plays the falling animation — or, if the user prefers reduced motion, draws + * the finished logo as one static frame instead of animating. + */ +function start() { + cancelAnimationFrame(rafId); + leafFall.reset(); + animationStartMs = 0; + if (reducedMotionQuery?.matches) { + drawSettledFrame(); + } else { + rafId = requestAnimationFrame(frame); + } } // Rebuild on resize (debounced). The clock keeps running, so an already-revealed @@ -102,7 +135,11 @@ function frame(now) { let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); - resizeTimer = setTimeout(buildScene, 150); + resizeTimer = setTimeout(() => { + buildScene(); + // No loop runs under reduced motion, so repaint the static frame ourselves. + if (reducedMotionQuery?.matches) drawSettledFrame(); + }, 150); }); // --- Interaction --- @@ -144,4 +181,8 @@ document.addEventListener('keydown', (event) => { }); buildScene(); -requestAnimationFrame(frame); +start(); + +// If the user toggles "reduce motion" while the page is open, react live +// (start animating, or settle to the static frame) without a reload. +reducedMotionQuery?.addEventListener?.('change', start); diff --git a/src/apps/makelogo/MakeabilityLabLogoLeafFall/style.css b/src/apps/makelogo/MakeabilityLabLogoLeafFall/style.css index 9373db3..bd79cb1 100644 --- a/src/apps/makelogo/MakeabilityLabLogoLeafFall/style.css +++ b/src/apps/makelogo/MakeabilityLabLogoLeafFall/style.css @@ -57,3 +57,18 @@ kbd { display: block; } } + +/* Visually hidden: removed from view but kept in the accessibility tree so the +Press R to replay · G toggle grid · H toggle logo
diff --git a/src/apps/makelogo/MakeabilityLabLogoZoomFade/sketch.js b/src/apps/makelogo/MakeabilityLabLogoZoomFade/sketch.js index e4de334..3880b1f 100644 --- a/src/apps/makelogo/MakeabilityLabLogoZoomFade/sketch.js +++ b/src/apps/makelogo/MakeabilityLabLogoZoomFade/sketch.js @@ -34,6 +34,16 @@ const ctx = canvas.getContext('2d'); let makeLabLogo; let zoomFade; let animationStartMs = 0; +let rafId = 0; + +// Respect the user's "reduce motion" OS/browser setting (accessibility). When +// it's on, we skip the zoom animation and just show the finished logo. +const reducedMotionQuery = + window.matchMedia?.('(prefers-reduced-motion: reduce)'); + +// A timestamp well past the end of the zoom. Every piece clamps its progress +// to 1, so updating with this settles the whole animation to its final frame. +const SETTLE_MS = 10_000_000; /** * (Re)builds the canvas, logo, and animation for the current window size. @@ -96,7 +106,30 @@ function frame(now) { zoomFade.update(elapsedMs); zoomFade.draw(ctx); - requestAnimationFrame(frame); + rafId = requestAnimationFrame(frame); +} + +/** Draws the finished logo as a single static frame (no motion). */ +function drawSettledFrame() { + ctx.fillStyle = BACKGROUND_COLOR; + ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); + zoomFade.update(SETTLE_MS); + zoomFade.draw(ctx); +} + +/** + * Plays the zoom animation — or, if the user prefers reduced motion, draws the + * finished logo as one static frame instead of animating. + */ +function start() { + cancelAnimationFrame(rafId); + zoomFade.reset(); + animationStartMs = 0; + if (reducedMotionQuery?.matches) { + drawSettledFrame(); + } else { + rafId = requestAnimationFrame(frame); + } } // Rebuild on resize (debounced). The clock keeps running, so an already-revealed @@ -104,7 +137,11 @@ function frame(now) { let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); - resizeTimer = setTimeout(buildScene, 150); + resizeTimer = setTimeout(() => { + buildScene(); + // No loop runs under reduced motion, so repaint the static frame ourselves. + if (reducedMotionQuery?.matches) drawSettledFrame(); + }, 150); }); // --- Interaction --- @@ -140,4 +177,8 @@ document.addEventListener('keydown', (event) => { }); buildScene(); -requestAnimationFrame(frame); +start(); + +// If the user toggles "reduce motion" while the page is open, react live +// (start animating, or settle to the static frame) without a reload. +reducedMotionQuery?.addEventListener?.('change', start); diff --git a/src/apps/makelogo/MakeabilityLabLogoZoomFade/style.css b/src/apps/makelogo/MakeabilityLabLogoZoomFade/style.css index 9373db3..bd79cb1 100644 --- a/src/apps/makelogo/MakeabilityLabLogoZoomFade/style.css +++ b/src/apps/makelogo/MakeabilityLabLogoZoomFade/style.css @@ -57,3 +57,18 @@ kbd { display: block; } } + +/* Visually hidden: removed from view but kept in the accessibility tree so the +