fix the 100% CPU usage, the background animation has been removed from the docs

Author: nunowar

resources/css/app.css

@@ -16,7 +16,8 @@ button { @apply cursor-pointer; }
 .scrollbar::-webkit-scrollbar-thumb:hover { @apply bg-gray-600; }
 
 .bg-pest{background-image:url('../img/bg-pest-4.jpg')}
-.beam-background{animation:animate-beams 100s linear infinite;background-image:linear-gradient(120deg,rgba(34,102,200,.5),rgba(255,255,255,.1));background-image:repeating-linear-gradient(120deg,#1f2937 0,#1f2937 8%,rgba(131,141,155,.1) 4%,transparent 1%,rgba(2,72,172,.6) 5%,#1f2937 12%),repeating-linear-gradient(-60deg,#d1d5db 0,#d1d5db 80%,rgba(209,213,219,.7) 2%,#9ca3af 3%,#9ca3af 4.5%,rgba(209,213,219,.5) 5%);background-size:300%,200%;background-position:50% 80%,5% 50%}
+.beam-background{background-image:linear-gradient(120deg,rgba(34,102,200,.5),rgba(255,255,255,.1));background-image:repeating-linear-gradient(120deg,#1f2937 0,#1f2937 8%,rgba(131,141,155,.1) 4%,transparent 1%,rgba(2,72,172,.6) 5%,#1f2937 12%),repeating-linear-gradient(-60deg,#d1d5db 0,#d1d5db 80%,rgba(209,213,219,.7) 2%,#9ca3af 3%,#9ca3af 4.5%,rgba(209,213,219,.5) 5%);background-size:300%,200%;background-position:50% 80%,5% 50%}
+.beam-animation{animation:animate-beams 100s linear infinite;}
 
 @keyframes animate-beams {
     0% {

resources/www/index.html

@@ -96,7 +96,7 @@
 
         <div class="pointer-events-none fixed inset-0 min-h-screen h-full -z-20 [mask-image:radial-gradient(ellipse_at_100%_100%,black_20%,transparent_80%)] opacity-90">
             <div class="pointer-events-none absolute inset-0 overflow-hidden">
-                <div class="beam-background absolute -inset-[20px] z-20 blur-[80px] filter"></div>
+                <div class="beam-background beam-animation absolute -inset-[20px] z-20 blur-[80px] filter"></div>
             </div>
         </div>
 

resources/www/main.css

@@ -18,7 +18,8 @@ button {
 }
 
 .bg-pest{background-image: url('/assets/bg-pest-4.jpg');}
-.beam-background{will-change:background-position;animation:animate-beams 100s linear infinite;background-image:linear-gradient(120deg,rgba(34,102,200,.5),rgba(255,255,255,.1));background-image:repeating-linear-gradient(120deg,#1f2937 0,#1f2937 8%,rgba(131,141,155,.1) 4%,transparent 1%,rgba(2,72,172,.6) 5%,#1f2937 12%),repeating-linear-gradient(-60deg,#d1d5db 0,#d1d5db 80%,rgba(209,213,219,.7) 2%,#9ca3af 3%,#9ca3af 4.5%,rgba(209,213,219,.5) 5%);background-size:300%,200%;background-position:50% 80%,5% 50%}
+.beam-background{background-image:linear-gradient(120deg,rgba(34,102,200,.5),rgba(255,255,255,.1));background-image:repeating-linear-gradient(120deg,#1f2937 0,#1f2937 8%,rgba(131,141,155,.1) 4%,transparent 1%,rgba(2,72,172,.6) 5%,#1f2937 12%),repeating-linear-gradient(-60deg,#d1d5db 0,#d1d5db 80%,rgba(209,213,219,.7) 2%,#9ca3af 3%,#9ca3af 4.5%,rgba(209,213,219,.5) 5%);background-size:300%,200%;background-position:50% 80%,5% 50%}
+.beam-animation{will-change:background-position;animation:animate-beams 100s linear infinite;}
 
 @keyframes animate-beams {
     0% {