From 383dfd14bf861c10cab82f6887cabc8b3f5343f9 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Fri, 20 Dec 2024 18:10:42 +0000
Subject: [PATCH] Reduce snow motion (#5148)

Remove snow when reduce motion is on

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`
---
 apps/dotcom/client/src/components/SnowStorm.tsx | 8 +++++---
 packages/tldraw/api-report.md                   | 3 +++
 packages/tldraw/src/index.ts                    | 1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/dotcom/client/src/components/SnowStorm.tsx b/apps/dotcom/client/src/components/SnowStorm.tsx
index 3b88f1d3b516..67d1d6359e7e 100644
--- a/apps/dotcom/client/src/components/SnowStorm.tsx
+++ b/apps/dotcom/client/src/components/SnowStorm.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import { Vec, useEditor } from 'tldraw'
+import { Vec, useEditor, usePrefersReducedMotion } from 'tldraw'
 
 /* eslint-disable local/prefer-class-methods */
 interface Snowflake {
@@ -148,8 +148,10 @@ class Snowstorm {
 export function SnowStorm() {
 	const editor = useEditor()
 	const rElm = useRef<HTMLDivElement>(null)
+	const prefersReducedMotion = usePrefersReducedMotion()
 
 	useEffect(() => {
+		if (prefersReducedMotion) return
 		if (!rElm.current) return
 		const snowstorm = new Snowstorm(rElm.current)
 		const velocity = new Vec(0, 0)
@@ -161,7 +163,7 @@ export function SnowStorm() {
 			const time = Date.now() - start
 
 			// make wind gradually cycle between 0 and 10, maybe a bit randomly, like gusts of wind
-			snowstorm.baseWindX = Math.sin(time / 30_000) * 3
+			snowstorm.baseWindX = Math.sin(time / 30_000) * 2
 
 			const newCamera = editor.getCamera()
 
@@ -198,7 +200,7 @@ export function SnowStorm() {
 			editor.off('tick', updateOnTick)
 			snowstorm.dispose()
 		}
-	}, [editor])
+	}, [editor, prefersReducedMotion])
 
 	return <div ref={rElm} className="tl-snowstorm" />
 }
diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md
index 1d0af9283064..6cce2f21e18f 100644
--- a/packages/tldraw/api-report.md
+++ b/packages/tldraw/api-report.md
@@ -3818,6 +3818,9 @@ export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void): reado
 // @public (undocumented)
 export function useNativeClipboardEvents(): void;
 
+// @public (undocumented)
+export function usePrefersReducedMotion(): boolean;
+
 // @public (undocumented)
 export function usePreloadAssets(assetUrls: TLEditorAssetUrls): {
     done: boolean;
diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts
index e6c11c14afc8..e8d34f865075 100644
--- a/packages/tldraw/src/index.ts
+++ b/packages/tldraw/src/index.ts
@@ -1,6 +1,7 @@
 /// <reference types="react" />
 
 import { registerTldrawLibraryVersion } from '@tldraw/editor'
+export { usePrefersReducedMotion } from './lib/shapes/shared/usePrefersReducedMotion'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
 export { TldrawUiDialogs } from './lib/ui/components/Dialogs'
 export { TldrawUiToasts } from './lib/ui/components/Toasts'