perf: disable animations when prefers-reduced-motion is enabled

Author: innocenzi

src/Web/Homepage/home.view.php

@@ -7,7 +7,7 @@
 
 ?>
 
-<x-base full-title="Tempest, the PHP framework that gets out of your way" :stargazers="$stargazers" body-class="bg-[#f1f7ff]">
+<x-base full-title="Tempest, the PHP framework that gets out of your way" :stargazers="$stargazers" body-class="bg-[#f1f7ff] dark:bg-[black]">
   <div class="flex flex-col grow font-display">
     <!-- Falling leaves -->
     <x-falling-leaves class="dark:hidden" />

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

@@ -1,20 +1,20 @@
 <x-component name="x-aurora">
   <div class="absolute inset-0 overflow-hidden pointer-events-none z-[-1]" :class="$class">
-    <div class="
+    <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)]
           [background-size:300%,_200%]
           [background-position:50%_50%,50%_50%]
           filter
-          blur-[10px]
+          motion-safe:blur-[10px]
           invert
           after:content-['']
           after:absolute
           after:inset-0
           after:[background-image:var(--color-white-gradient),var(--color-aurora-gradient)]
           after:[background-size:200%,_100%]
-          after:animate-aurora
+          motion-safe:after:animate-aurora
           after:[background-attachment:fixed]
           after:mix-blend-difference
           pointer-events-none

src/Web/Homepage/x-falling-leaves.view.php

@@ -1,6 +1,6 @@
 <x-component name="x-falling-leaves">
   <!-- Leaves container -->
-  <div class="absolute inset-0 overflow-hidden pointer-events-none" id="leaves-container"></div>
+  <div class="absolute inset-0 overflow-hidden pointer-events-none motion-reduce:hidden" id="leaves-container"></div>
   <!-- Leaves templates -->
   <template id="leaf-template-1">
     <div class="leaf absolute pointer-events-none origin-center">

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

@@ -1,7 +1,8 @@
 <x-component name="x-moonlight">
   <!-- Moonlight container -->
     <div class="
-			hidden dark:block
+				hidden
+				dark:block
 				[--color-white-gradient:repeating-linear-gradient(100deg,rgba(255,255,255,.8)_0%,rgba(255,255,255,.4)_1%,transparent_10%,transparent_12%,rgba(255,255,255,.4)_16%)]
 				[background-image:var(--color-white-gradient)]
 				[background-size:300%,_200%]
@@ -14,7 +15,7 @@
 				after:inset-0
 				after:[background-image:var(--color-white-gradient)]
 				after:[background-size:200%,_100%]
-				after:animate-aurora
+				motion-safe:after:animate-aurora
 				after:[background-attachment:fixed]
 				after:mix-blend-difference
 				pointer-events-none

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

@@ -2,5 +2,5 @@
 	<!-- Script, See https://github.com/tempestphp/tempest-framework/pull/996 -->
 	{{ \Tempest\vite_tags('src/Web/Homepage/rain.ts') }}
   <!-- Rain container -->
-  <div class="absolute inset-0 overflow-hidden pointer-events-none dark:opacity-100 opacity-0 duration-500 z-[-1]" id="rain-container"></div>
+  <div class="motion-reduce:hidden absolute inset-0 overflow-hidden pointer-events-none dark:opacity-100 opacity-0 duration-500 z-[-1]" id="rain-container"></div>
 </x-component>