mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
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:
@@ -25,6 +25,15 @@ export default function Home() {
|
|||||||
const splashRef = useRef<HTMLElement>(null);
|
const splashRef = useRef<HTMLElement>(null);
|
||||||
const restoreScroll = useRef(0);
|
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
|
// Deliberately place the nebula/monitor just to the left of the hero title, at any
|
||||||
// screen width (restored from the original hero).
|
// screen width (restored from the original hero).
|
||||||
const titleRef = useRef<HTMLHeadingElement>(null);
|
const titleRef = useRef<HTMLHeadingElement>(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user