From f13d950e48b289eb456cb21cfe0d4562937ce62b Mon Sep 17 00:00:00 2001
From: SrGooglo <srgooglo@ragestudio.net>
Date: Mon, 16 Jun 2025 20:49:44 +0000
Subject: [PATCH] Add motion animations to lyrics background gradient

---
 packages/app/src/pages/lyrics/index.jsx  | 15 +++++++++++----
 packages/app/src/pages/lyrics/index.less |  8 +++-----
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/pages/lyrics/index.jsx b/packages/app/src/pages/lyrics/index.jsx
index 61e2002e..db64ebd5 100644
--- a/packages/app/src/pages/lyrics/index.jsx
+++ b/packages/app/src/pages/lyrics/index.jsx
@@ -1,5 +1,6 @@
 import React from "react"
 import classnames from "classnames"
+import { motion } from "motion/react"
 
 import useFullScreen from "@hooks/useFullScreen"
 import useSyncRoom from "@hooks/useSyncRoom"
@@ -25,12 +26,12 @@ const EnhancedLyricsPage = () => {
 	const textRef = React.useRef()
 
 	const { toggleFullScreen } = useFullScreen({
-		onExit: () => app?.location?.last && app.location.back(),
+		onExit: () => app.location.back(),
 	})
 
 	const { trackManifest } = useTrackManifest(playerState.track_manifest)
 
-	const { dominantColor } = useCoverAnalysis(trackManifest)
+	const { dominantColor, cssVars } = useCoverAnalysis(trackManifest)
 
 	const { syncRoom, subscribeLyricsUpdates, unsubscribeLyricsUpdates } =
 		useSyncRoom()
@@ -61,9 +62,15 @@ const EnhancedLyricsPage = () => {
 			className={classnames("lyrics", {
 				stopped: playerState.playback_status !== "playing",
 			})}
-			style={dominantColor}
+			style={cssVars}
 		>
-			<div className="lyrics-background-color" />
+			<motion.div
+				className="lyrics-background-color"
+				initial={false}
+				animate={{
+					background: `linear-gradient(0deg, rgba(${dominantColor}), rgba(255, 255, 255, 0.5))`,
+				}}
+			/>
 
 			{playerState.playback_status === "stopped" && (
 				<div className="lyrics-stopped-decorator">
diff --git a/packages/app/src/pages/lyrics/index.less b/packages/app/src/pages/lyrics/index.less
index 0f713cfc..15d2aabb 100644
--- a/packages/app/src/pages/lyrics/index.less
+++ b/packages/app/src/pages/lyrics/index.less
@@ -1,5 +1,7 @@
 .lyrics {
-	position: relative;
+	position: fixed;
+	top: 0;
+	left: 0;
 
 	z-index: 100;
 
@@ -46,10 +48,6 @@
 
 		width: 100%;
 		height: 100%;
-
-		background:
-			linear-gradient(0deg, rgb(var(--dominant-color)), rgba(0, 0, 0, 0)),
-			url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0' numOctaves='10' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
 	}
 
 	.lyrics-background-wrapper {