feat(timeline-editor): Add hoverable sequence name overlay with fade effect

UX improvement:
- Sequence name now displays as large centered overlay (24px bold)
- Strong text shadow for readability over effect stack
- Fades out smoothly when mouse enters sequence box (0.3s transition)
- Fades back in when mouse leaves sequence box
- Small info text (time, priority) stays in top-left corner

Visual hierarchy:
- Default: Large sequence name visible, dominates the view
- On hover: Name fades away, effects become clearly visible
- Smooth 300ms opacity transition for polished feel

CSS implementation:
- .sequence-name: Centered absolutely, z-index 10, pointer-events none
- .sequence.hovered .sequence-name: opacity 0
- .sequence-info: Small text in corner, always visible
- Multi-layer text shadow for high contrast

JavaScript:
- mouseenter: Add 'hovered' class to trigger fade out
- mouseleave: Remove 'hovered' class to restore name
- Supports custom sequence names from demo.seq file

1 files changed, 50 insertions, 4 deletions

diff --git a/tools/timeline_editor/index.html b/tools/timeline_editor/index.html
index c77ae41..4dd37ee 100644
--- a/tools/timeline_editor/index.html
+++ b/tools/timeline_editor/index.html
@@ -149,6 +149,36 @@
             box-shadow: 0 0 10px rgba(78, 201, 176, 0.5);
         }
 
+        .sequence-name {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            font-weight: bold;
+            color: #ffffff;
+            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.9),
+                         -1px -1px 4px rgba(0, 0, 0, 0.7);
+            pointer-events: none;
+            white-space: nowrap;
+            opacity: 1;
+            transition: opacity 0.3s ease;
+            z-index: 10;
+        }
+
+        .sequence.hovered .sequence-name {
+            opacity: 0;
+        }
+
+        .sequence-info {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            font-size: 11px;
+            color: #858585;
+            pointer-events: none;
+        }
+
         .effect {
             position: absolute;
             background: #3a3d41;
@@ -569,15 +599,31 @@
                     seqTimeDisplay = `Start: ${seq.startTime.toFixed(2)}s`;
                 }
 
-                seqDiv.innerHTML = `
-                    <strong>Sequence ${seqIndex + 1}</strong><br>
-                    <small>${seqTimeDisplay} | Priority: ${seq.priority}</small>
-                `;
+                // Create sequence name overlay (large, centered, fades on hover)
+                const seqNameDiv = document.createElement('div');
+                seqNameDiv.className = 'sequence-name';
+                seqNameDiv.textContent = seq.name || `Sequence ${seqIndex + 1}`;
+
+                // Create small info text in corner
+                const seqInfoDiv = document.createElement('div');
+                seqInfoDiv.className = 'sequence-info';
+                seqInfoDiv.innerHTML = `${seqTimeDisplay} | Priority: ${seq.priority}`;
+
+                seqDiv.appendChild(seqNameDiv);
+                seqDiv.appendChild(seqInfoDiv);
 
                 if (selectedItem && selectedItem.type === 'sequence' && selectedItem.index === seqIndex) {
                     seqDiv.classList.add('selected');
                 }
 
+                // Fade name on hover
+                seqDiv.addEventListener('mouseenter', () => {
+                    seqDiv.classList.add('hovered');
+                });
+                seqDiv.addEventListener('mouseleave', () => {
+                    seqDiv.classList.remove('hovered');
+                });
+
                 seqDiv.addEventListener('mousedown', (e) => startDrag(e, 'sequence', seqIndex));
                 seqDiv.addEventListener('click', (e) => {
                     e.stopPropagation();