From 24ddbe72540cd3bcc7fabc2d543f2b3b6fbe334e Mon Sep 17 00:00:00 2001
From: Isaac Mann <isaacplmann@users.noreply.github.com>
Date: Wed, 18 Sep 2024 11:50:53 -0400
Subject: [PATCH] chore(nx-dev): honor prefers-reduced-motion (#27976)

Fixes #27114 (again)
---
 nx-dev/ui-home/src/lib/hero.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/nx-dev/ui-home/src/lib/hero.tsx b/nx-dev/ui-home/src/lib/hero.tsx
index c23579eba9..9157251f55 100644
--- a/nx-dev/ui-home/src/lib/hero.tsx
+++ b/nx-dev/ui-home/src/lib/hero.tsx
@@ -1,7 +1,7 @@
 'use client';
 import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
 import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
-import { BlurFade } from '@nx/nx-dev/ui-animations';
+import { BlurFade, usePrefersReducedMotion } from '@nx/nx-dev/ui-animations';
 import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
 import { useState } from 'react';
 import Link from 'next/link';
@@ -141,6 +141,8 @@ export function Hero(): JSX.Element {
 function ShaderGradientElement() {
   const [theme] = useTheme();
   const [displayTheme, setDisplayTheme] = useState<Theme>('system');
+  const prefersReducedMotion = usePrefersReducedMotion();
+
   useIsomorphicLayoutEffect(() => {
     const matchMedia: any = window.matchMedia('(prefers-color-scheme: dark)');
 
@@ -170,6 +172,10 @@ function ShaderGradientElement() {
     };
   }, [theme]);
 
+  if (prefersReducedMotion) {
+    return;
+  }
+
   if (displayTheme === 'dark')
     return (
       <BlurFade