Improved compliance with motion reduction for new UI components

FlorianLeChat · Dec 14, 2024 · 172b335 · 172b335
1 parent e5d1200
commit 172b335
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/app/[locale]/components/ui/thirdparty/blur-in.tsx b/app/[locale]/components/ui/thirdparty/blur-in.tsx
@@ -6,7 +6,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import type { ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 
 interface BlurInProps {
 	as: string;
@@ -41,12 +41,20 @@ function BlurIn( {
 		}
 	};
 	const combinedVariants = variant || defaultVariants;
+	const [ reducedMotion, setReducedMotion ] = useState( false );
+
+	useEffect( () =>
+	{
+		setReducedMotion(
+			window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches
+		);
+	}, [] );
 
 	return (
 		<MotionComponent
-			initial="hidden"
+			initial={reducedMotion ? "visible" : "hidden"}
 			animate="visible"
-			variants={combinedVariants}
+			variants={reducedMotion ? undefined : combinedVariants}
 			className={className}
 		>
 			{children}

diff --git a/app/[locale]/components/ui/thirdparty/fade-text.tsx b/app/[locale]/components/ui/thirdparty/fade-text.tsx
@@ -5,7 +5,7 @@
 
 "use client";
 
-import { useMemo, type ReactNode } from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { motion, type Variants } from "framer-motion";
 
 type FadeTextProps = {
@@ -60,14 +60,22 @@ export default function FadeText( {
 			}
 		};
 	}, [ directionOffset, axis, framerProps ] );
+	const [ reducedMotion, setReducedMotion ] = useState( false );
+
+	useEffect( () =>
+	{
+		setReducedMotion(
+			window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches
+		);
+	}, [] );
 
 	return (
 		<MotionComponent
 			className={className}
-			initial="hidden"
+			initial={reducedMotion ? "visible" : "hidden"}
 			animate="show"
 			viewport={{ once: true }}
-			variants={FADE_ANIMATION_VARIANTS}
+			variants={reducedMotion ? undefined : FADE_ANIMATION_VARIANTS}
 		>
 			{children}
 		</MotionComponent>

diff --git a/app/[locale]/components/ui/thirdparty/word-pull-up.tsx b/app/[locale]/components/ui/thirdparty/word-pull-up.tsx
@@ -6,6 +6,7 @@
 "use client";
 
 import { merge } from "@/utilities/tailwind";
+import { useEffect, useState } from "react";
 import { motion, type Variants } from "framer-motion";
 
 interface WordPullUpProps {
@@ -37,11 +38,19 @@ export default function WordPullUp( {
 }: Readonly<WordPullUpProps> )
 {
 	const MotionComponent = motion.create( as ) as typeof motion.div;
+	const [ reducedMotion, setReducedMotion ] = useState( false );
+
+	useEffect( () =>
+	{
+		setReducedMotion(
+			window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches
+		);
+	}, [] );
 
 	return (
 		<MotionComponent
-			variants={wrapperFramerProps}
-			initial="hidden"
+			variants={reducedMotion ? undefined : wrapperFramerProps}
+			initial={reducedMotion ? "visible" : "hidden"}
 			animate="show"
 			className={merge(
 				"font-display text-center text-4xl font-bold leading-[5rem] tracking-[-0.02em] drop-shadow-sm",