Animate player image

src/components/Player.astro

@@ -49,11 +49,13 @@ const playerArtworkOpacity = 0.4;
   transition:name="player"
   transition:animate="none"
 >
+  <div class="absolute inset-0 -z-90 overflow-hidden">
     <div
       id="player:artwork:background"
-    class="absolute top-0 right-0 bottom-0 left-0 -z-90"
+      class="animate-bg-perlin absolute top-0 right-0 bottom-0 left-0 -z-90"
     >
     </div>
+  </div>
   <div
     id="player:time:progress"
     class="relative top-0 right-0 left-0 m-0 h-2 w-full rounded-t p-0 hover:cursor-pointer"

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 {