Replace dominant color squares with equalizer animation

Swap the static colored squares on record show pages for an animated
equalizer where each bar is tinted with a dominant color, adding a
music-themed visual.

assets/css/app.css

@@ -28,6 +28,7 @@
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
   --animate-shine: shine 3s ease infinite;
+  --animate-equalizer-bar: equalizer-bar 1.2s ease-in-out infinite;
 
   @keyframes shake {
     10%,
@@ -60,4 +61,14 @@
       background-position: right center;
     }
   }
+
+  @keyframes equalizer-bar {
+    0%,
+    100% {
+      height: 20%;
+    }
+    50% {
+      height: 100%;
+    }
+  }
 }

lib/music_library_web/components/record_components.ex

@@ -445,11 +445,11 @@ defmodule MusicLibraryWeb.RecordComponents do
 
   def record_colors(assigns) do
     ~H"""
-    <span class="flex items-center">
+    <span class="inline-flex items-end gap-[2px] w-[22px] h-[14px]">
       <span
-        :for={color <- @record.dominant_colors}
+        :for={{color, i} <- Enum.with_index(@record.dominant_colors)}
-        class="inline-block w-4 h-4 mr-1"
+        class="w-[3px] rounded-sm animate-equalizer-bar"
-        style={"background-color: #{color}"}
+        style={"background-color: #{color}; animation-delay: #{i * -0.45}s"}
       >
       </span>
     </span>