CodeCow/stack
1
0
Fork 0
mirror of https://github.com/stack-auth/stack.git synced 2026-06-04 21:04:37 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

prefers-reduced-motion added to top waves

Browse Source
This commit is contained in:
Madison 2025-07-24 01:31:22 -05:00
parent b35d2bf829
commit 516c9130ef
1 changed files with 59 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
docs/src/components/layouts/api/waves.tsx
View File

@ -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,
@ -277,6 +299,9 @@ const Waves: React.FC<WavesProps> = ({
}
function movePoints(time: number) {
// Skip all motion if user prefers reduced motion
if (prefersReducedMotion) return;
const lines = linesRef.current;
const mouse = mouseRef.current;
const noise = noiseRef.current;
@ -329,8 +354,9 @@ const Waves: React.FC<WavesProps> = ({
}
function moved(point: Point, withCursor = true): { x: number, y: number } {
const x = point.x + point.wave.x + (withCursor ? point.cursor.x : 0);
const y = point.y + point.wave.y + (withCursor ? point.cursor.y : 0);
// If reduced motion is preferred, only use the base position
const x = point.x + (prefersReducedMotion ? 0 : point.wave.x) + (withCursor && !prefersReducedMotion ? point.cursor.x : 0);
const y = point.y + (prefersReducedMotion ? 0 : point.wave.y) + (withCursor && !prefersReducedMotion ? point.cursor.y : 0);
return { x: Math.round(x * 10) / 10, y: Math.round(y * 10) / 10 };
}
@ -360,22 +386,27 @@ const Waves: React.FC<WavesProps> = ({
function tick(t: number) {
if (!container) return;
const mouse = mouseRef.current;
mouse.sx += (mouse.x - mouse.sx) * 0.1;
mouse.sy += (mouse.y - mouse.sy) * 0.1;
const dx = mouse.x - mouse.lx,
dy = mouse.y - mouse.ly;
const d = Math.hypot(dx, dy);
mouse.v = d;
mouse.vs += (d - mouse.vs) * 0.1;
mouse.vs = Math.min(100, mouse.vs);
mouse.lx = mouse.x;
mouse.ly = mouse.y;
mouse.a = Math.atan2(dy, dx);
container.style.setProperty("--x", `${mouse.sx}px`);
container.style.setProperty("--y", `${mouse.sy}px`);
movePoints(t);
// Only update mouse tracking and motion if reduced motion is not preferred
if (!prefersReducedMotion) {
const mouse = mouseRef.current;
mouse.sx += (mouse.x - mouse.sx) * 0.1;
mouse.sy += (mouse.y - mouse.sy) * 0.1;
const dx = mouse.x - mouse.lx,
dy = mouse.y - mouse.ly;
const d = Math.hypot(dx, dy);
mouse.v = d;
mouse.vs += (d - mouse.vs) * 0.1;
mouse.vs = Math.min(100, mouse.vs);
mouse.lx = mouse.x;
mouse.ly = mouse.y;
mouse.a = Math.atan2(dy, dx);
container.style.setProperty("--x", `${mouse.sx}px`);
container.style.setProperty("--y", `${mouse.sy}px`);
movePoints(t);
}
drawLines();
frameIdRef.current = requestAnimationFrame(tick);
}
@ -385,11 +416,17 @@ const Waves: React.FC<WavesProps> = ({
setLines();
}
function onMouseMove(e: MouseEvent) {
updateMouse(e.clientX, e.clientY);
// Don't track mouse if reduced motion is preferred
if (!prefersReducedMotion) {
updateMouse(e.clientX, e.clientY);
}
}
function onTouchMove(e: TouchEvent) {
const touch = e.touches[0];
updateMouse(touch.clientX, touch.clientY);
// Don't track touch if reduced motion is preferred
if (!prefersReducedMotion) {
const touch = e.touches[0];
updateMouse(touch.clientX, touch.clientY);
}
}
function updateMouse(x: number, y: number) {
const mouse = mouseRef.current;
@ -420,7 +457,7 @@ const Waves: React.FC<WavesProps> = ({
cancelAnimationFrame(frameIdRef.current);
}
};
}, []);
}, [prefersReducedMotion]);
return (
<div