From b8b4ddd059ddc1a747c45b756b62752256647074 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Thu, 11 Dec 2025 15:24:55 +1030
Subject: [PATCH] Animate player image

---
 src/components/Player.astro | 10 ++++++----
 src/styles/global.css       | 20 ++++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/components/Player.astro b/src/components/Player.astro
index b10f1e5..f9fe33c 100644
--- a/src/components/Player.astro
+++ b/src/components/Player.astro
@@ -49,10 +49,12 @@ const playerArtworkOpacity = 0.4;
   transition:name="player"
   transition:animate="none"
 >
-  <div
-    id="player:artwork:background"
-    class="absolute top-0 right-0 bottom-0 left-0 -z-90"
-  >
+  <div class="absolute inset-0 -z-90 overflow-hidden">
+    <div
+      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"
diff --git a/src/styles/global.css b/src/styles/global.css
index fea7843..e515f9f 100644
--- a/src/styles/global.css
+++ b/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 {