From 563d46de3e106fa0f00d09a8a6068810d41e55b1 Mon Sep 17 00:00:00 2001
From: Madison <madison.w.kennedy@gmail.com>
Date: Mon, 4 Aug 2025 19:24:54 -0400
Subject: [PATCH] prefers-reduced-motion added to top waves (#799)

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md

-->

enabled prefers-reduced-motion on the waves.tsx file for top banner.
<!-- ELLIPSIS_HIDDEN -->


----

> [!IMPORTANT]
> Adds `prefers-reduced-motion` support to `Waves` component in
`waves.tsx`, disabling wave rendering if motion reduction is preferred.
>
>   - **Behavior**:
> - Adds `prefers-reduced-motion` detection in `Waves` component in
`waves.tsx`.
> - Uses `useState` and `useEffect` to track and respond to
`prefers-reduced-motion` media query.
> - If `prefers-reduced-motion` is true, the component returns `null`,
preventing wave rendering.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 5db322e740e0e59ddbc9c56c6ca402112f907129. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>


<!-- ELLIPSIS_HIDDEN -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* The wave animation is now automatically disabled for users who have
enabled reduced motion preferences in their system settings, improving
accessibility.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
---
 docs/src/components/layouts/api/waves.tsx | 29 ++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/layouts/api/waves.tsx b/docs/src/components/layouts/api/waves.tsx
index c3efda012..8557a38d8 100644
--- a/docs/src/components/layouts/api/waves.tsx
+++ b/docs/src/components/layouts/api/waves.tsx
@@ -3,7 +3,7 @@
 */
 'use client';
 
-import React, { CSSProperties, useEffect, useRef } from "react";
+import React, { CSSProperties, useEffect, useRef, useState } from "react";
 
 class Grad {
   x: number;
@@ -207,6 +207,28 @@ const Waves: React.FC<WavesProps> = ({
 
   const frameIdRef = useRef<number | null>(null);
 
+  // Add prefers-reduced-motion detection
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+
+  // Check for prefers-reduced-motion preference
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+    // Set initial value
+    setPrefersReducedMotion(mediaQuery.matches);
+
+    // Listen for changes
+    const handleChange = (e: MediaQueryListEvent) => {
+      setPrefersReducedMotion(e.matches);
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+
   useEffect(() => {
     configRef.current = {
       lineColor,
@@ -422,6 +444,11 @@ const Waves: React.FC<WavesProps> = ({
     };
   }, []);
 
+  // If user prefers reduced motion, don't render the waves at all
+  if (prefersReducedMotion) {
+    return null;
+  }
+
   return (
     <div
       ref={containerRef}