From 48a6d29ec0186fab606fb292f82e38c2c124acec Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Wed, 19 Nov 2025 16:12:11 +0800
Subject: [PATCH] [+] Caret

---
 src/routes/song/[slug]/+page.svelte | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/routes/song/[slug]/+page.svelte b/src/routes/song/[slug]/+page.svelte
index e418251..aa431a6 100644
--- a/src/routes/song/[slug]/+page.svelte
+++ b/src/routes/song/[slug]/+page.svelte
@@ -100,6 +100,33 @@
   }
 
   $effect(() => inputChanged(inp, false))
+
+  // Animate caret position
+  let caret: HTMLDivElement
+  $effect(() => {
+    li; wi;
+    tick().then(() => {
+      const el = (document.querySelector('.here') as HTMLElement)
+      const update = () => {
+        const rect = el?.getBoundingClientRect()
+        if (!rect) return
+        caret.style.left = `${rect.left + window.scrollX}px`
+        caret.style.top = `${rect.top + window.scrollY}px`
+        caret.style.height = `${rect.height}px`
+      }
+      update()
+
+      // Keep updating for 300ms to handle CSS transitions (font-size change)
+      let start = performance.now()
+      const frame = () => {
+        if (performance.now() - start > 300) return
+        update()
+        requestAnimationFrame(frame)
+      }
+      requestAnimationFrame(frame)
+    })
+  })
+
   
   // Computed stats
   let flat = $derived(states.flat())
@@ -135,6 +162,7 @@
 </div>
 
 <!-- Lines -->
+<div bind:this={caret} class="absolute bg-amber w-2px h-24px transition-all duration-75"></div>
 <div class="vbox gap-12px py-32px lrc-wrapper" lang="ja-JP">
   {#each processedLrc as line, l}
     <div class="lrc p-content text-center m3-font-body-large" class:active={l === li} role="button" tabindex="0"