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 ( {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 ( {children} 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 ) { const MotionComponent = motion.create( as ) as typeof motion.div; + const [ reducedMotion, setReducedMotion ] = useState( false ); + + useEffect( () => + { + setReducedMotion( + window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches + ); + }, [] ); return (