perf: remove most animations and gradients on prefers-reduced-motion

Author: innocenzi

src/Web/CommandPalette/base-dialog.vue

@@ -17,8 +17,8 @@ const open = defineModel<boolean>('open', { required: true })
 
 <template>
 	<dialog-root v-model:open="open">
-		<dialog-overlay class="z-50 fixed inset-0 backdrop-blur-sm data-[state=open]:animate-dialog-open data-[state=closed]:animate-dialog-close" />
-		<dialog-content :class="contentClass" class="top-[50%] left-[50%] z-50 fixed bg-(--ui-bg) shadow-dialog-shadow shadow-xl p-0 border border-(--ui-border) sm:rounded-lg text-(--ui-text) translate-x-[-50%] translate-y-[-50%] data-[state=open]:animate-dialog-open data-[state=closed]:animate-dialog-close">
+		<dialog-overlay class="z-50 fixed inset-0 motion-reduce:bg-[black]/90 motion-safe:backdrop-blur-sm motion-safe:data-[state=closed]:animate-dialog-close motion-safe:data-[state=open]:animate-dialog-open" />
+		<dialog-content :class="contentClass" class="top-[50%] left-[50%] z-50 fixed bg-(--ui-bg) shadow-dialog-shadow shadow-xl p-0 border border-(--ui-border) sm:rounded-lg text-(--ui-text) translate-x-[-50%] translate-y-[-50%] data-[state=closed]:animate-dialog-close data-[state=open]:animate-dialog-open">
 			<dialog-title class="sr-only">
 				{{ title }}
 			</dialog-title>

src/Web/Homepage/leaves.ts

@@ -32,7 +32,7 @@ document.addEventListener('DOMContentLoaded', () => {
 	let shouldRemoveLeaves = false
 
 	function createLeaf() {
-		if (activeLeaves >= MAX_LEAVES || shouldRemoveLeaves) {
+		if (activeLeaves >= MAX_LEAVES || shouldRemoveLeaves || window.matchMedia('(prefers-reduced-motion: reduce)').matches === true) {
 			return
 		}
 

src/Web/Homepage/x-aurora.view.php

@@ -3,25 +3,28 @@
     <div class=" 
           [--color-white-gradient:repeating-linear-gradient(100deg,white_0%,white_7%,transparent_10%,transparent_12%,white_16%)]
           [--color-aurora-gradient:repeating-linear-gradient(100deg,var(--color-aurora-1)_10%,var(--color-aurora-2)_15%,var(--color-aurora-3)_20%,var(--color-aurora-4)_25%,var(--color-aurora-5)_30%)]
-          [background-image:var(--color-white-gradient),var(--color-aurora-gradient)]
+          motion-reduce:[background-image:var(--color-aurora-gradient)]
+          not-motion-reduce:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)]
           [background-size:300%,_200%]
           [background-position:50%_50%,50%_50%]
           filter
-          motion-safe:blur-[10px]
+          blur-[10px]
           invert
           after:content-['']
           after:absolute
           after:inset-0
-          after:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)]
+          motion-reduce:after:[background-image:var(--color-aurora-gradient)]
+          not-motion-reduce:after:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)]
           after:[background-size:200%,_100%]
-          motion-safe:after:animate-aurora
+          not-motion-reduce:after:animate-aurora
           after:[background-attachment:fixed]
           after:mix-blend-difference
           pointer-events-none
           absolute
           inset-0
           opacity-50
-          will-change-transform
+					after:will-change-auto
+          will-change-auto
           [mask-image:radial-gradient(ellipse_at_100%_0%,black_10%,transparent_70%)]
       "></div>
   </div>

src/Web/Homepage/x-moonlight.view.php

@@ -15,7 +15,7 @@
 				after:inset-0
 				after:[background-image:var(--color-white-gradient)]
 				after:[background-size:200%,_100%]
-				motion-safe:after:animate-aurora
+				not-motion-reduce:after:animate-aurora
 				after:[background-attachment:fixed]
 				after:mix-blend-difference
 				pointer-events-none