feat: verse-based lyric display with smooth active-line transitions

Replace circular ring-buffer scroll with verse-aware display: backend
now groups lyrics into verses on empty lines or timestamp gaps >3.5s
and exposes verse_lines + verse_active; frontend rebuilds the DOM once
per verse (fade-out/in) and animates only opacity/font/glow when the
active line advances within the same verse.  CSS mask-image gradient
replaces hard overflow clipping at top and bottom edges.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

plugin/contents/ui/dancer.html

@@ -237,18 +237,20 @@ html, body {
 }
 
 /* ============================================================
-   LYRICS DISPLAY — 5-line karaoke scroll
+   LYRICS DISPLAY — verse karaoke
    ============================================================ */
 .lyric-display {
   position: absolute;
   left: 2%;
   top: 4%;
-  width: 38%;          /* explicit width needed for abs-pos children */
+  width: 38%;
-  height: 150px;       /* 5 slots × 30px */
+  height: 150px;       /* 5 visible slots × 30px */
   overflow: hidden;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.5s ease;
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
+  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
 }
 .lyric-ctx {
   position: absolute;
@@ -894,14 +896,8 @@ html, body {
     </div>
   </div>
 
-  <!-- Lyrics display — 5-line karaoke context -->
+  <!-- Lyrics display — verse karaoke -->
-  <div class="lyric-display" id="lyricDisplay">
+  <div class="lyric-display" id="lyricDisplay"></div>
-    <div class="lyric-ctx" id="lctx0"></div>
-    <div class="lyric-ctx" id="lctx1"></div>
-    <div class="lyric-ctx" id="lctx2"></div>
-    <div class="lyric-ctx" id="lctx3"></div>
-    <div class="lyric-ctx" id="lctx4"></div>
-  </div>
 
   <!-- Scanlines overlay -->
   <div class="scanlines"></div>
@@ -1180,92 +1176,92 @@ const lyricDisplay = document.getElementById('lyricDisplay');
 
 let lastArtUrl = '';
 
-/* ── karaoke scroll ── */
+/* ── verse display ── */
-const SLOT_H     = 30;   // px per slot — must match CSS height: 150px / 5
+const SLOT_H = 30;
-const SCROLL_MS  = 500;  // must match CSS transition: top 0.5s
+const CENTER_PX = 60;   // top of the active slot within the 150px container
 
 const ACTIVE_SHADOW =
   '0 0 18px var(--theme-color,rgba(0,200,255,0.85)),' +
   '0 0  6px var(--theme-color,rgba(0,200,255,0.5)),' +
   '0  2px 10px rgba(0,0,0,0.95)';
 
-const SLOT_PROPS = [
+const VERSE_STYLES = [
-  { opacity:'0.2',  fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },
+  { opacity:'0.2',  fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },   // dist -2
-  { opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)',  color:'#bbb', shadow:'' },
+  { opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)',  color:'#bbb', shadow:'' },   // dist -1
-  { opacity:'1',    fontSize:'clamp(16px,1.3vw,18px)',  color:'#fff', shadow: ACTIVE_SHADOW },
+  { opacity:'1',    fontSize:'clamp(16px,1.3vw,18px)',  color:'#fff', shadow: ACTIVE_SHADOW }, // dist 0
-  { opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)',  color:'#bbb', shadow:'' },
+  { opacity:'0.48', fontSize:'clamp(13px,1.0vw,15px)',  color:'#bbb', shadow:'' },   // dist +1
-  { opacity:'0.2',  fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },
+  { opacity:'0.2',  fontSize:'clamp(11px,0.85vw,13px)', color:'#777', shadow:'' },   // dist +2
 ];
 
-let ring          = Array.from(document.querySelectorAll('.lyric-ctx'));
+let verseEls           = [];
-let currentActive = '';
+let currentVerseKey    = '';
-let scrollBusy    = false;
+let currentVerseActive = -1;
 
-function applySlotVisuals(el, slot) {
+function applyVerseStyle(el, dist) {
-  if (slot < 0 || slot > 4) { el.style.opacity = '0'; return; }
+  if (dist < -2 || dist > 2) {
-  const p = SLOT_PROPS[slot];
+    el.style.opacity = '0'; el.style.fontSize = 'clamp(11px,0.85vw,13px)';
+    el.style.color = '#777'; el.style.textShadow = ''; return;
+  }
+  const p = VERSE_STYLES[dist + 2];
   el.style.opacity    = p.opacity;
   el.style.fontSize   = p.fontSize;
   el.style.color      = p.color;
   el.style.textShadow = p.shadow;
 }
 
-function initSlots(context) {
+function positionVerseEls(verse_active) {
-  ring.forEach((el, i) => {
+  verseEls.forEach((el, i) => {
+    const dist = i - verse_active;
+    el.style.top = (CENTER_PX + dist * SLOT_H) + 'px';
+    applyVerseStyle(el, dist);
+  });
+}
+
+function buildVerse(verse_lines, verse_active) {
+  lyricDisplay.innerHTML = '';
+  verseEls = verse_lines.map(text => {
+    const el = document.createElement('div');
+    el.className = 'lyric-ctx';
+    el.textContent = text;
     el.style.transition = 'none';
-    el.textContent      = context[i]?.text ?? '';
+    lyricDisplay.appendChild(el);
-    el.style.top        = (i * SLOT_H) + 'px';
+    return el;
-    applySlotVisuals(el, i);
   });
+  positionVerseEls(verse_active);
   requestAnimationFrame(() => requestAnimationFrame(() => {
-    ring.forEach(el => { el.style.transition = ''; });
+    verseEls.forEach(el => { el.style.transition = ''; });
   }));
 }
 
-function scrollUp(context) {
+function updateLyricVerse(verse_lines, verse_active) {
-  if (scrollBusy) return;
+  if (!verse_lines || !verse_lines.length || verse_active < 0 || !isPlaying) {
-  scrollBusy = true;
+    lyricDisplay.style.opacity = '0';
-  ring.forEach((el, i) => {
+    currentVerseKey    = '';
-    el.style.top = ((i - 1) * SLOT_H) + 'px';
+    currentVerseActive = -1;
-    applySlotVisuals(el, i - 1);
+    return;
-  });
+  }
+  const verseKey = verse_lines.join('\x00');
+
+  if (verseKey !== currentVerseKey) {
+    currentVerseKey    = verseKey;
+    currentVerseActive = verse_active;
+    if (lyricDisplay.style.opacity === '1') {
+      lyricDisplay.style.opacity = '0';
       setTimeout(() => {
-    const recycled = ring[0];
+        buildVerse(verse_lines, verse_active);
-    recycled.style.transition = 'none';
-    recycled.textContent      = context[4]?.text ?? '';
-    recycled.style.top        = (4 * SLOT_H) + 'px';
-    applySlotVisuals(recycled, 4);
-    requestAnimationFrame(() => requestAnimationFrame(() => {
-      recycled.style.transition = '';
-    }));
-    ring = [...ring.slice(1), ring[0]];
-    scrollBusy = false;
-  }, SCROLL_MS + 50);
-}
-
-function updateLyricContext(context) {
-  if (!context || !context.length || !isPlaying) {
-    lyricDisplay.style.opacity = '0';
-    return;
-  }
-  const active = context.find(c => c.offset === 0);
-  if (!active || !active.text) {
-    lyricDisplay.style.opacity = '0';
-    return;
-  }
-  if (active.text === currentActive) {
         lyricDisplay.style.opacity = '1';
-    return;
+      }, 500);
-  }
-  currentActive = active.text;
-
-  if (lyricDisplay.style.opacity !== '1') {
-    initSlots(context);
     } else {
-    scrollUp(context);
+      buildVerse(verse_lines, verse_active);
-  }
       lyricDisplay.style.opacity = '1';
     }
+  } else if (verse_active !== currentVerseActive) {
+    currentVerseActive = verse_active;
+    positionVerseEls(verse_active);
+  } else {
+    lyricDisplay.style.opacity = '1';
+  }
+}
 
 function fetchCurrent() {
   fetch('http://127.0.0.1:8765/current')
@@ -1277,7 +1273,7 @@ function fetchCurrent() {
         document.getElementById('albumArtImg').src =
           'http://127.0.0.1:8765/art?' + Date.now();
       }
-      updateLyricContext(d.lyric_context || []);
+      updateLyricVerse(d.verse_lines || [], d.verse_active ?? -1);
     })
     .catch(() => {});
 }
@@ -1340,7 +1336,8 @@ function updateMusic(artist, title) {
   if (!playing) {
     vuBars.forEach(b => { b.style.height = '3px'; b.style.opacity = '0.15'; });
     lyricDisplay.style.opacity = '0';
-    currentActive = '';
+    currentVerseKey    = '';
+    currentVerseActive = -1;
   }
   if (playing) fetchCurrent();
   const key = artist + '|' + title;