From 172b3356f1deab1a40f65d590dd704a5b2d1f8f0 Mon Sep 17 00:00:00 2001
From: Florian Trayon <26360935+FlorianLeChat@users.noreply.github.com>
Date: Sat, 14 Dec 2024 19:09:06 +0100
Subject: [PATCH] Improved compliance with motion reduction for new UI
 components

---
 app/[locale]/components/ui/thirdparty/blur-in.tsx  | 14 +++++++++++---
 .../components/ui/thirdparty/fade-text.tsx         | 14 +++++++++++---
 .../components/ui/thirdparty/word-pull-up.tsx      | 13 +++++++++++--
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/app/[locale]/components/ui/thirdparty/blur-in.tsx b/app/[locale]/components/ui/thirdparty/blur-in.tsx
index 576b4c1..54ed184 100644
--- 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
index b1f89f6..335e2f7 100644
--- 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
index 50f4b2a..fe438e5 100644
--- 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",