disable snow for reduced-motion users

ayan4m1 · Dec 25, 2023 · 89b7ec3 · 89b7ec3
1 parent 6f59736
commit 89b7ec3
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -5,16 +5,18 @@ import Snowfall from 'react-snowfall';
 import Header from 'components/header';
 import useDarkMode from 'hooks/useDarkMode';
 import { getDate, getMonth } from 'date-fns';
+import usePrefersReducedMotion from 'src/hooks/usePrefersReducedMotion';
 
 export default function Layout({ children }) {
   useDarkMode();
 
+  const disableMotion = usePrefersReducedMotion();
   const isChristmas =
     getMonth(Date.now()) === 11 && [24, 25, 26].includes(getDate(Date.now()));
 
   return (
     <Fragment>
-      {isChristmas && <Snowfall />}
+      {!disableMotion && isChristmas && <Snowfall />}
       <Header />
       <main className="mt-3 mb-2">{children}</main>
     </Fragment>