Skip the splash entirely for prefers-reduced-motion visitors

Reduced-motion users now land straight on the main hero (desktop and mobile);
the splash is no longer shown to them, not just de-animated. Set before paint
via useIsoLayoutEffect so it never flashes.
This commit is contained in:
jwinterm
2026-06-06 14:37:17 -04:00
parent 62a68f5fd9
commit 874bc4a2ff
+9
View File
@@ -25,6 +25,15 @@ export default function Home() {
const splashRef = useRef<HTMLElement>(null);
const restoreScroll = useRef(0);
// Respect prefers-reduced-motion: skip the splash entirely and land straight on
// the main hero, on desktop and mobile. Runs before paint, so the splash never
// flashes for these visitors.
useIsoLayoutEffect(() => {
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
setEntered(true);
}
}, []);
// Deliberately place the nebula/monitor just to the left of the hero title, at any
// screen width (restored from the original hero).
const titleRef = useRef<HTMLHeadingElement>(null);