From 87b89f0709cefb98286bdfeeed0c5c4b4fa92f97 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 11 Jan 2026 01:04:23 -0600
Subject: [PATCH] fix: restore lyrics sync in FocusMode and add shimmer effect

- Add explicit effect in FocusMode to ensure lyrics updates run
- Increase immersive mode font size by 2pts (24px/30px)
- Smoother easing with cubic-bezier curves (400ms)
- Add shimmer gradient effect for karaoke-style highlighting
- Add subtle accent glow on active lyrics line
---
 src/lib/components/FocusMode.svelte          | 13 +++++++-
 src/lib/components/lyrics/LyricsLines.svelte | 32 +++++++++++++-------
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/FocusMode.svelte b/src/lib/components/FocusMode.svelte
index 3de0f841c..1da1e6daa 100644
--- a/src/lib/components/FocusMode.svelte
+++ b/src/lib/components/FocusMode.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-  import { X, SkipBack, Play, Pause, SkipForward, ChevronDown } from 'lucide-svelte';
+  import { SkipBack, Play, Pause, SkipForward, ChevronDown } from 'lucide-svelte';
   import LyricsLines from './lyrics/LyricsLines.svelte';
+  import { startActiveLineUpdates, stopActiveLineUpdates } from '$lib/stores/lyricsStore';
 
   interface LyricsLine {
     text: string;
@@ -49,6 +50,16 @@
     lyricsError = null
   }: Props = $props();
 
+  // Ensure lyrics updates run when FocusMode is open with synced lyrics
+  $effect(() => {
+    if (isOpen && isPlaying && lyricsSynced) {
+      startActiveLineUpdates();
+    }
+    return () => {
+      // Cleanup is handled by the main page effect
+    };
+  });
+
   let showControls = $state(true);
   let hideTimeout: ReturnType<typeof setTimeout> | null = null;
   let progressRef: HTMLDivElement | null = $state(null);
diff --git a/src/lib/components/lyrics/LyricsLines.svelte b/src/lib/components/lyrics/LyricsLines.svelte
index fc1ad6e19..f7f1655e7 100644
--- a/src/lib/components/lyrics/LyricsLines.svelte
+++ b/src/lib/components/lyrics/LyricsLines.svelte
@@ -197,12 +197,12 @@
   }
 
   .lyrics-lines.immersive .lyrics-line {
-    font-size: 22px;
+    font-size: 24px;
     font-weight: 500;
   }
 
   .lyrics-lines.immersive .lyrics-line.active {
-    font-size: 28px;
+    font-size: 30px;
     font-weight: 700;
   }
 
@@ -215,11 +215,11 @@
     letter-spacing: 0.01em;
     opacity: var(--line-opacity, 1);
     transition:
-      opacity 150ms ease-out,
-      transform 150ms ease-out,
-      font-size 120ms ease-out,
-      font-weight 120ms ease-out,
-      color 150ms ease-out;
+      opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
+      transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
+      font-size 300ms cubic-bezier(0.4, 0, 0.2, 1),
+      font-weight 300ms cubic-bezier(0.4, 0, 0.2, 1),
+      color 500ms cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: left center;
     will-change: opacity, transform;
   }
@@ -238,23 +238,33 @@
     font-weight: 700;
     opacity: 1;
     transform: scale(1.02);
-    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15);
+    text-shadow:
+      0 0 40px rgba(99, 102, 241, 0.3),
+      0 0 80px rgba(99, 102, 241, 0.15);
   }
 
   .lyrics-lines.center .lyrics-line.active {
     transform: scale(1.05);
   }
 
-  /* Karaoke progress effect on active line */
+  /* Shimmer karaoke effect on active line */
   .lyrics-line.active .line-text {
+    --shimmer-width: 8%;
+    --progress-pos: calc(var(--line-progress, 0) * 100%);
     background: linear-gradient(
       90deg,
-      var(--accent-primary) calc(var(--line-progress, 0) * 100%),
-      var(--text-primary) calc(var(--line-progress, 0) * 100%)
+      var(--accent-primary) 0%,
+      var(--accent-primary) calc(var(--progress-pos) - var(--shimmer-width)),
+      rgba(255, 255, 255, 0.95) calc(var(--progress-pos) - 2%),
+      rgba(255, 255, 255, 0.95) var(--progress-pos),
+      var(--text-primary) calc(var(--progress-pos) + 2%),
+      var(--text-primary) 100%
     );
+    background-size: 100% 100%;
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
+    transition: background 50ms linear;
   }
 
   .lyrics-empty {