diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html index 7d48c8b..9ff70fa 100644 --- a/plugin/contents/ui/dancer.html +++ b/plugin/contents/ui/dancer.html @@ -255,6 +255,22 @@ html, body { ROBOT WRAPPER 120 BPM = 0.5s per beat. All animations key off this tempo. ============================================================ */ +.robot-reflection { + position: absolute; + left: 50%; + bottom: 32%; + transform: translateX(-50%) scaleY(-0.22); + transform-origin: bottom center; + opacity: 0; + transition: opacity 0.8s; + pointer-events: none; + /* mask in original (pre-flip) space: opaque at bottom (feet), transparent at top (head) + after scaleY(-1) this becomes: opaque at top of visible area (feet), transparent lower */ + -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%); + mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.45) 100%); + filter: blur(1.5px) brightness(0.5); +} + .robot-wrap { position: absolute; left: 50%; @@ -749,6 +765,11 @@ html, body {
+ +
+ +
+
@@ -1085,7 +1106,8 @@ function updateMusic(artist, title) { const sepEl = document.getElementById('musicSep'); const playing = !!(artist || title); isPlaying = playing; - document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0'; + document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0'; + document.getElementById('robotReflection').style.opacity = playing ? '1' : '0'; document.querySelector('.music-ticker').style.opacity = playing ? '1' : '0'; albumArtEl.style.opacity = playing ? '1' : '0'; if (!playing) vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });