diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html
index 3ead22e..371ff5b 100644
--- a/plugin/contents/ui/dancer.html
+++ b/plugin/contents/ui/dancer.html
@@ -102,13 +102,15 @@ html, body {
    ============================================================ */
 .vu-meter {
   position: absolute;
-  bottom: 10%;
+  bottom: 4%;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: flex-end;
   gap: 4px;
   pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.8s;
 }
 .vu-bar {
   width: 9px;
@@ -210,6 +212,8 @@ html, body {
   left: 50%;
   bottom: 32%;
   transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.8s;
 }
 
 .skeleton-gif {
@@ -931,9 +935,12 @@ function updateMusic(artist, title) {
   const el = document.getElementById('musicText');
   const text = (artist && title) ? `${artist}  —  ${title}`
              : (title || artist || '— —');
+  const playing = !!(artist || title);
+  document.querySelector('.robot-wrap').style.opacity = playing ? '1' : '0';
+  document.querySelector('.vu-meter').style.opacity   = playing ? '1' : '0';
   if (el.textContent === text) return;
   el.textContent = text;
-  pickSkeleton();
+  if (playing) pickSkeleton();
   // scroll only if text is long
   const wrap = el.parentElement;
   el.classList.toggle('short', el.scrollWidth <= wrap.clientWidth + 10);