feat: Apple-Music-like lyrics view with saving old-style

src/utils/springScroll.ts

@@ -0,0 +1,96 @@
+/**
+ * Spring-based scroll animation — iOS / Apple Music feel.
+ *
+ * Uses a critically-damped spring model driven by rAF:
+ *   velocity += (target − position) × stiffness
+ *   velocity *= damping
+ *   position += velocity
+ *
+ * Tuning:
+ *   stiffness  0.04 – 0.10  → lower = slower / more fluid
+ *   damping    0.80 – 0.88  → lower = more bounce; higher = overdamped / snappy
+ *   maxVelocity             → caps initial lurch when target is far away
+ *
+ * A single SpringScroller instance per container avoids fighting rAF loops
+ * when the target changes before the previous animation finishes — calling
+ * scrollTo() mid-flight just updates the target and the running loop picks it up.
+ */
+export class SpringScroller {
+  private container  : HTMLElement;
+  private target     = 0;
+  private velocity   = 0;
+  private rafId: number | null = null;
+
+  private readonly stiffness  : number;
+  private readonly damping    : number;
+  private readonly maxVelocity: number;
+
+  constructor(
+    container   : HTMLElement,
+    stiffness    = 0.065,   // gentle pull
+    damping      = 0.84,    // smooth settle, no oscillation
+    maxVelocity  = 28,      // px/frame cap — prevents jarring lurch on large jumps
+  ) {
+    this.container   = container;
+    this.target      = container.scrollTop;
+    this.stiffness   = stiffness;
+    this.damping     = damping;
+    this.maxVelocity = maxVelocity;
+  }
+
+  scrollTo(targetY: number) {
+    this.target = Math.max(0, targetY);
+    if (this.rafId === null) this.tick();
+  }
+
+  stop() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    this.velocity = 0;
+  }
+
+  /** Teleport without animation (e.g. on track reset). */
+  jump(y: number) {
+    this.stop();
+    this.target = y;
+    this.container.scrollTop = y;
+  }
+
+  private tick = () => {
+    const pos   = this.container.scrollTop;
+    const delta = this.target - pos;
+
+    let v = (this.velocity + delta * this.stiffness) * this.damping;
+    // Cap velocity so large distances don't start with a hard jerk.
+    if (v >  this.maxVelocity) v =  this.maxVelocity;
+    if (v < -this.maxVelocity) v = -this.maxVelocity;
+    this.velocity = v;
+
+    this.container.scrollTop += v;
+
+    const settled = Math.abs(v) < 0.12 && Math.abs(delta) < 0.5;
+    if (settled) {
+      this.container.scrollTop = this.target;
+      this.rafId    = null;
+      this.velocity = 0;
+    } else {
+      this.rafId = requestAnimationFrame(this.tick);
+    }
+  };
+}
+
+/**
+ * Convenience: compute the scroll position that places `el` at `fraction`
+ * from the top of `container` (0 = top, 0.5 = centre, 0.35 = Apple-style).
+ */
+export function targetForFraction(
+  container: HTMLElement,
+  el       : HTMLElement,
+  fraction  = 0.35,
+): number {
+  const cRect = container.getBoundingClientRect();
+  const eRect = el.getBoundingClientRect();
+  return container.scrollTop + (eRect.top - cRect.top) - cRect.height * fraction + eRect.height / 2;
+}