Reduce snow motion (tldraw#5148)

Remove snow when reduce motion is on

### Change type

- [ ] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [x] `other`

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" />
 }

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;

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'