feat: show album art in the avatar square while music is loaded

The LED wall square switches to the track's cover art whenever a song is
loaded outside a conversation, and returns to the pulsing LED wall while
speaking to the agent (music and conversation are mutually exclusive, so
starting a talk hides the art and ending it restores it).
This commit is contained in:
snowspeeder committed 2026-08-29 17:37:39 -04:00
1 parent 68f4c461c8
commit 436a26a0fc
2 files changed
+32 -1

No files matched your search

+3 -1
View File
@@ -58,7 +58,9 @@
</div> </div>
<div class="orb-stage"> <div class="orb-stage">
<div class="led-wall" id="ledWall" data-state="idle" aria-hidden="true"></div> <div class="led-wall" id="ledWall" data-state="idle" aria-hidden="true">
<img id="ledArt" class="led-art" alt="">
</div>
<div class="orb-labels" aria-live="polite"> <div class="orb-labels" aria-live="polite">
<span class="state-label" id="stateLabel">Ready when you are</span> <span class="state-label" id="stateLabel">Ready when you are</span>
<span class="thinking-chip" id="thinkingChip" hidden>Thinking&hellip;</span> <span class="thinking-chip" id="thinkingChip" hidden>Thinking&hellip;</span>
+29
View File
@@ -371,6 +371,35 @@ button {
transition: opacity 90ms linear, width 90ms linear, height 90ms linear; transition: opacity 90ms linear, width 90ms linear, height 90ms linear;
} }
/* Album art fills the square while a track is loaded outside a conversation. */
.led-art {
position: absolute;
inset: 12px;
width: calc(100% - 24px);
height: calc(100% - 24px);
object-fit: cover;
border-radius: 18px;
z-index: 1;
opacity: 0;
transform: scale(0.96);
transition: opacity 240ms ease, transform 240ms ease;
pointer-events: none;
}
.led-wall.show-art .led-art {
opacity: 1;
transform: scale(1);
}
.led-wall.show-art .led-dot {
opacity: 0 !important;
transition: none;
}
.led-wall.show-art {
filter: none;
}
/* Palette shifts by state — a cool blue while it listens, warm toward the /* Palette shifts by state — a cool blue while it listens, warm toward the
center as the agent speaks, amber while thinking, dim when idle. */ center as the agent speaks, amber while thinking, dim when idle. */
.led-wall[data-state="idle"] { .led-wall[data-state="idle"] {