Halftone + mask reduces performance alot, change background

nginx/vue/src/assets/styles.css

@@ -291,8 +291,4 @@ td {
             transparent var(--blur));
     background-size: var(--bg_size) var(--bg_size);
     background-position: 0 0;
-
-    mask-image: linear-gradient(-180deg,
-            rgba(1, 1, 1, 1) 0%,
-            rgba(1, 1, 1, 0.92) 100%);
 }

nginx/vue/src/components/util/Slideshow.vue

@@ -41,7 +41,7 @@ onUnmounted(() => {
                 <Header v-if="currentComment">
                     {{ currentComment }}
                 </Header>
-                <img :src="currentUrl" alt="Image Viewer" />
+                <img :src="currentUrl" alt="Image Viewer" loading="lazy" />
             </div>
         </Transition>
     </div>

nginx/vue/src/views/home/Home.vue

@@ -69,6 +69,7 @@ import Consumption from "./Consumption.vue";
                     <img
                         src="/img/memes/fire-woman.gif"
                         class="border-tertiary border"
+                        loading="lazy"
                     />
                 </div>
             </div>

nginx/vue/src/views/home/Intro2.vue

@@ -27,8 +27,8 @@ const phrases = [
 const animState = phrases.map((text, i) => ({
     x: i * 20,
     y: i * 20,
-    dx: rand(0, 30) / 100,
-    dy: 0.5,
+    dx: rand(0, 60) / 100,
+    dy: 1.0,
     content: text,
     cachedW: 0,
     cachedH: 0,
@@ -48,6 +48,8 @@ const items = ref<Item[]>(
 let rafId = 0;
 let cachedCW = 0;
 let cachedCH = 0;
+let lastFrameTime = 0;
+const FRAME_INTERVAL = 1000 / 30;
 
 function measureSizes() {
     const c = container.value;
@@ -63,12 +65,18 @@ function measureSizes() {
     });
 }
 
-function animate() {
+function animate(timestamp: number) {
     if (!cachedCW || !cachedCH) {
         rafId = requestAnimationFrame(animate);
         return;
     }
 
+    if (timestamp - lastFrameTime < FRAME_INTERVAL) {
+        rafId = requestAnimationFrame(animate);
+        return;
+    }
+    lastFrameTime = timestamp;
+
     for (let i = 0; i < animState.length; i++) {
         const s = animState[i];
         const el = itemEls.value[i];