Smooth progress line movement on sheet music

CSS transition on left/top for smooth motion within a staff line.
Transition disabled on line jumps so it snaps instantly to the new line.

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

app/src/components/SheetMusic.jsx

@@ -202,6 +202,7 @@ export default function SheetMusic({ midiObject, fileName, currentTimeRef, isPla
     if (!progressEl || !scrollEl) return;
 
     let lastColoredBeat = -1;
+    let lastLineIdx = -1;
 
     const tick = () => {
       const currentTime = currentTimeRef?.current ?? 0;
@@ -240,6 +241,14 @@ export default function SheetMusic({ midiObject, fileName, currentTimeRef, isPla
       const lineY = mLayout.y - 5;
       const lineHeight = BASS_Y_OFFSET + 80; // span treble + bass staves
 
+      // Enable smooth transition within the same staff line, disable on line jumps
+      if (mLayout.lineIdx !== lastLineIdx) {
+        progressEl.classList.remove('smooth');
+      } else {
+        progressEl.classList.add('smooth');
+      }
+      lastLineIdx = mLayout.lineIdx;
+
       progressEl.style.display = 'block';
       progressEl.style.left = `${lineX + 20}px`; // +20 for container padding
       progressEl.style.top = `${lineY + 20}px`;

app/src/index.css

@@ -742,6 +742,10 @@ input[type='range']::-moz-range-thumb {
   box-shadow: 0 0 6px rgba(139, 92, 246, 0.5);
 }
 
+.sheet-music-progress-line.smooth {
+  transition: left 0.12s linear, top 0.12s linear;
+}
+
 .sheet-music-empty {
   flex: 1;
   display: flex;