First try

app/components/Player/Fullscreen.vue

@@ -1,11 +1,57 @@
 <script setup lang="ts">
 const { fullscreen, close: closeFullscreen } = useFullscreen()
 const song = useSong()
+const backgroundColors = ref(["#24202d", "#302238", "#182b35"])
+const backgroundPosition = ref("8% 14%, 88% 12%, 48% 76%, 0 0")
+
+const randomBackgroundPosition = () => {
+	return [0, 1, 2]
+		.map(() => `${Math.round(Math.random() * 100)}% ${Math.round(Math.random() * 100)}%`)
+		.concat("0 0")
+		.join(", ")
+}
+
+watch(
+	() => song.value?.album.file,
+	async (file) => {
+		if (!file || !import.meta.client) return
+
+		const image = new Image()
+		image.crossOrigin = "anonymous"
+		image.src = GET_FILE(file)
+		try {
+			await image.decode()
+			const canvas = document.createElement("canvas")
+			canvas.width = 3
+			canvas.height = 1
+			const context = canvas.getContext("2d", { willReadFrequently: true })
+			if (!context) return
+			context.drawImage(image, 0, 0, 3, 1)
+			const pixels = context.getImageData(0, 0, 3, 1).data
+			backgroundColors.value = [0, 1, 2].map((index) => {
+				const offset = index * 4
+				return `rgb(${pixels[offset]}, ${pixels[offset + 1]}, ${pixels[offset + 2]})`
+			})
+		} catch {
+			// Keep the default palette when the cover cannot be loaded or sampled.
+		}
+	},
+	{ immediate: true },
+)
 
 const mouseMovedRecently = ref(true)
 
 onMounted(() => {
 	let timeoutId: NodeJS.Timeout
+	let backgroundInterval: NodeJS.Timeout | undefined
+	const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)")
+
+	if (!reducedMotion.matches) {
+		backgroundPosition.value = randomBackgroundPosition()
+		backgroundInterval = setInterval(() => {
+			backgroundPosition.value = randomBackgroundPosition()
+		}, 9000)
+	}
 
 	const handleMouseMove = () => {
 		mouseMovedRecently.value = true
@@ -27,6 +73,7 @@ onMounted(() => {
 	onUnmounted(() => {
 		window.removeEventListener("mousemove", handleMouseMove)
 		window.removeEventListener("keydown", handleKeydown)
+		if (backgroundInterval) clearInterval(backgroundInterval)
 	})
 })
 
@@ -43,15 +90,15 @@ nuxtApp.hook("page:finish", () => {
 		:class="{ showCursor: mouseMovedRecently }"
 		v-show="fullscreen"
 	>
-		<template v-if="song">
+		<div
-			<NuxtImg
-				:src="GET_FILE(song.album.file)"
-				:alt="song.name"
-				width="500"
-				height="500"
 			class="background"
+			:style="{
+				'--background-color-one': backgroundColors[0],
+				'--background-color-two': backgroundColors[1],
+				'--background-color-three': backgroundColors[2],
+				backgroundPosition,
+			}"
 		/>
-		</template>
 
 		<section class="screen-container" v-if="song">
 			<Icon
@@ -97,13 +144,29 @@ nuxtApp.hook("page:finish", () => {
 
 .background {
 	position: absolute;
-	top: -25%;
+	inset: -25%;
-	left: -25%;
+	background:
+		radial-gradient(ellipse, var(--background-color-one) 0%, transparent 74%),
+		radial-gradient(ellipse, var(--background-color-two) 0%, transparent 76%),
+		radial-gradient(ellipse, var(--background-color-three) 0%, transparent 72%),
+		#15131a;
+	background-repeat: no-repeat;
+	background-size: 48% 48%, 44% 44%, 46% 46%, auto;
+	filter: blur(28px);
+	transition: background-position 9s ease-in-out;
+	will-change: background-position;
 
-	width: 100%;
+	&::after {
-	height: 100%;
+		content: "";
-	object-fit: cover;
+		position: absolute;
-	filter: blur(40px);
+		inset: 0;
+		background-color: rgb(0 0 0 / 55%);
+		pointer-events: none;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.background { transition: none; }
 }
 
 .screen-container {