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.
This commit is contained in:
Claudio Ortolina
2026-02-14 10:11:12 +00:00
parent 6e655cd866
commit 9775f192a4
2 changed files with 15 additions and 4 deletions
@@ -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}
class="inline-block w-4 h-4 mr-1"
style={"background-color: #{color}"}
:for={{color, i} <- Enum.with_index(@record.dominant_colors)}
class="w-[3px] rounded-sm animate-equalizer-bar"
style={"background-color: #{color}; animation-delay: #{i * -0.45}s"}
>
</span>
</span>