Animate player image

src/components/Player.astro

@@ -49,10 +49,12 @@ const playerArtworkOpacity = 0.4;
   transition:name="player"
   transition:animate="none"
 >
-  <div
+  <div class="absolute inset-0 -z-90 overflow-hidden">
-    id="player:artwork:background"
+    <div
-    class="absolute top-0 right-0 bottom-0 left-0 -z-90"
+      id="player:artwork:background"
-  >
+      class="animate-bg-perlin absolute top-0 right-0 bottom-0 left-0 -z-90"
+    >
+    </div>
   </div>
   <div
     id="player:time:progress"

src/styles/global.css

@@ -74,6 +74,26 @@
       transform: translateY(1%);
     }
   }
+
+  --animate-bg-perlin: bg-perlin 60s linear infinite;
+
+  @keyframes bg-perlin {
+    0% {
+      transform: translateX(0%) scale(1);
+    }
+    25% {
+      transform: translateX(2%) scale(1.25);
+    }
+    50% {
+      transform: translateX(-2%) scale(1.02);
+    }
+    75% {
+      transform: translateX(1%) scale(1.18);
+    }
+    100% {
+      transform: translateX(0%) scale(1);
+    }
+  }
 }
 
 @layer base {