From 78c4a6cb8e4a6b6c2abbefcb92b708ad5d78bf58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Wed, 25 Feb 2026 17:21:31 +0100
Subject: [PATCH 01/10] Added fullscreen composable and background for
 fullscreen

---
 app/components/Player/Fullscreen.vue | 75 ++++++++++++++++++++++++++++
 app/components/Player/index.vue      |  7 ++-
 app/composables/useFullscreen.ts     |  1 +
 3 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 app/components/Player/Fullscreen.vue
 create mode 100644 app/composables/useFullscreen.ts

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
new file mode 100644
index 0000000..c002134
--- /dev/null
+++ b/app/components/Player/Fullscreen.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const fullscreen = useFullscreen()
+const song = useSong()
+</script>
+
+<template>
+	<section class="fullscreen" v-show="fullscreen">
+		<template v-if="song">
+			<NuxtImg
+				:src="GET_FILE(song.album.file)"
+				:alt="song.name"
+				width="500"
+				height="500"
+				class="background"
+			/>
+		</template>
+
+		<section class="container">
+			<Icon
+				name="lucide:x"
+				class="close-btn show"
+				@click="fullscreen = false"
+			/>
+		</section>
+	</section>
+</template>
+
+<style lang="scss" scoped>
+.fullscreen {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 200vw;
+	height: 200vh;
+	z-index: 150;
+}
+
+.background {
+	position: absolute;
+	top: -25%;
+	left: -25%;
+
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	filter: blur(40px);
+}
+
+.container {
+	position: fixed;
+	top: 0;
+	left: 0;
+
+	width: 100vw;
+	height: 100vh;
+
+	background-color: rgba(0, 0, 0, 0.45);
+}
+
+.close-btn {
+	position: absolute;
+	top: 1rem;
+	right: 1rem;
+
+	cursor: pointer;
+	font-size: 24px;
+	transition: opacity 0.2s ease;
+	opacity: 0;
+
+	&.show {
+		opacity: 1;
+	}
+}
+</style>
diff --git a/app/components/Player/index.vue b/app/components/Player/index.vue
index 2e7501f..ec78d9d 100644
--- a/app/components/Player/index.vue
+++ b/app/components/Player/index.vue
@@ -39,6 +39,7 @@ const durationFormatted = computed(() =>
 )
 
 const toast = useToast()
+const fullscreen = useFullscreen()
 </script>
 
 <template>
@@ -106,13 +107,11 @@ const toast = useToast()
 					name="lucide:list"
 					@click="toast.show('Not yet implemented')"
 				/>
-				<Icon
-					name="lucide:expand"
-					@click="toast.show('Not yet implemented')"
-				/>
+				<Icon name="lucide:expand" @click="fullscreen = true" />
 			</div>
 		</template>
 	</article>
+	<PlayerFullscreen />
 </template>
 
 <style lang="scss" scoped>
diff --git a/app/composables/useFullscreen.ts b/app/composables/useFullscreen.ts
new file mode 100644
index 0000000..cf3c848
--- /dev/null
+++ b/app/composables/useFullscreen.ts
@@ -0,0 +1 @@
+export const useFullscreen = () => useState<boolean>("fullscreen", () => false)

From ed53c41a87e74505a369e1ee7b871be5bfbcedc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 27 Feb 2026 14:48:27 +0100
Subject: [PATCH 02/10] Add monochrome slider support with styling adjustments

---
 app/styles/_variables.scss |  1 +
 app/ui/RangeSlider.vue     | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index 6405e14..ac1bb92 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -7,6 +7,7 @@ $color-border: rgba(255, 255, 255, 0.16);
 $color-button: rgba(255, 255, 255, 0.08);
 $color-button-hover: rgba(255, 255, 255, 0.16);
 $color-attention: #fc8181;
+$color-slider-monochrome: white;
 
 $border-radius-standard: 0.3rem;
 $border-radius-lg: 0.6rem;
diff --git a/app/ui/RangeSlider.vue b/app/ui/RangeSlider.vue
index c74fa4a..1a01e9b 100644
--- a/app/ui/RangeSlider.vue
+++ b/app/ui/RangeSlider.vue
@@ -4,6 +4,7 @@ interface SliderProps {
 	max?: number
 	step?: number
 	dontUpdateImmediately?: boolean
+	monochrome?: boolean
 }
 
 const props = withDefaults(defineProps<SliderProps>(), {
@@ -11,6 +12,7 @@ const props = withDefaults(defineProps<SliderProps>(), {
 	max: 100,
 	step: 1,
 	dontUpdateImmediately: false,
+	monochrome: false,
 })
 
 const value = defineModel<number>()
@@ -67,7 +69,11 @@ const onMouseDown = (event: MouseEvent) => {
 <template>
 	<div ref="slider-ref" class="slider" @mousedown="onMouseDown">
 		<div class="track">
-			<div class="fill" :style="{ width: percentage + '%' }" />
+			<div
+				class="fill"
+				:class="{ monochrome }"
+				:style="{ width: percentage + '%' }"
+			/>
 		</div>
 	</div>
 </template>
@@ -98,4 +104,8 @@ const onMouseDown = (event: MouseEvent) => {
 	background: $color-accent;
 	border-radius: 999px;
 }
+
+.slider .monochrome {
+	background-color: $color-slider-monochrome;
+}
 </style>

From 2561bd0e62a270a3e1fef53d2cceef138bdd42c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 27 Feb 2026 14:48:45 +0100
Subject: [PATCH 03/10] Add TrackDisplay component for fullscreen player with
 controls and styling

---
 .../Player/Fullscreen/TrackDisplay.vue        | 144 ++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 app/components/Player/Fullscreen/TrackDisplay.vue

diff --git a/app/components/Player/Fullscreen/TrackDisplay.vue b/app/components/Player/Fullscreen/TrackDisplay.vue
new file mode 100644
index 0000000..f990ec7
--- /dev/null
+++ b/app/components/Player/Fullscreen/TrackDisplay.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+const { showButtons } = defineProps<{ showButtons: boolean }>()
+
+const song = useSong()
+const {
+	isPlaying,
+	play,
+	pause,
+	next,
+	prev,
+	shuffle,
+	repeat,
+	secondsPlayed,
+	duration,
+} = usePlayer()
+
+const secondsPlayedFormatted = computed(() =>
+	new Date(secondsPlayed.value * 1000).toISOString().slice(14, 19),
+)
+
+const durationFormatted = computed(() =>
+	new Date((duration.value - secondsPlayed.value) * 1000)
+		.toISOString()
+		.slice(14, 19),
+)
+</script>
+
+<template>
+	<article class="track-display" v-if="song">
+		<NuxtImg
+			class="cover"
+			:src="GET_FILE(song.album.file)"
+			:alt="song.name"
+			width="512"
+			height="512"
+		/>
+
+		<div class="track">
+			<p class="name">{{ song.name }}</p>
+			<ArtistName :artists="song.artists" />
+		</div>
+
+		<div class="slider">
+			<RangeSlider
+				:model-value="secondsPlayed"
+				@update:model-value="(v) => (secondsPlayed = v ?? 0)"
+				:max="duration"
+				dont-update-immediately
+				monochrome
+			/>
+			<div class="time">
+				<p>{{ secondsPlayedFormatted }}</p>
+				<p>{{ durationFormatted }}</p>
+			</div>
+		</div>
+
+		<div class="btns" :class="{ hidden: showButtons }">
+			<Icon name="lucide:shuffle" @click="shuffle()" />
+			<Icon name="lucide:skip-back" @click="prev()" />
+			<Icon name="lucide:pause" v-if="isPlaying" @click="pause()" />
+			<Icon name="lucide:play" v-else @click="play()" />
+			<Icon name="lucide:skip-forward" @click="next()" />
+			<Icon
+				name="lucide:repeat"
+				:class="{ repeating: repeat }"
+				@click="repeat = !repeat"
+			/>
+		</div>
+	</article>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+@use "@/styles/variables" as *;
+
+.track-display {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+}
+
+.cover {
+	width: 100%;
+	aspect-ratio: 1;
+	object-fit: cover;
+	border-radius: $border-radius-standard;
+}
+
+.track {
+	@include fontSize(16px);
+	width: 100%;
+
+	line-height: 1.3;
+
+	.name {
+		@include fontSize(17px);
+		font-weight: bold;
+	}
+}
+
+.slider {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: 4px;
+
+	.time {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		opacity: 0.5;
+
+		& p {
+			@include fontSize(15px);
+		}
+	}
+}
+
+.btns {
+	cursor: pointer;
+	font-size: 30px;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+	gap: 1rem;
+
+	overflow: hidden;
+	max-height: 30px;
+	transition: max-height 0.2s ease-in-out;
+
+	&.hidden {
+		max-height: 0;
+	}
+
+	& > * {
+		transition: color 0.2s ease;
+	}
+
+	.repeating {
+		color: $color-accent;
+	}
+}
+</style>

From 4475b95aed62112885eb4893ec10bf021be63545 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 27 Feb 2026 14:48:53 +0100
Subject: [PATCH 04/10] Implement mouse movement detection for fullscreen
 player and update layout structure

---
 app/components/Player/Fullscreen.vue | 49 ++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index c002134..53e81d2 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -1,6 +1,27 @@
 <script setup lang="ts">
 const fullscreen = useFullscreen()
 const song = useSong()
+
+const mouseMovedRecently = ref(true)
+
+onMounted(() => {
+	let timeoutId: NodeJS.Timeout
+
+	const handleMouseMove = () => {
+		mouseMovedRecently.value = true
+
+		clearTimeout(timeoutId)
+		timeoutId = setTimeout(() => {
+			mouseMovedRecently.value = false
+		}, 2000)
+	}
+
+	window.addEventListener("mousemove", handleMouseMove)
+
+	onUnmounted(() => {
+		window.removeEventListener("mousemove", handleMouseMove)
+	})
+})
 </script>
 
 <template>
@@ -15,12 +36,18 @@ const song = useSong()
 			/>
 		</template>
 
-		<section class="container">
+		<section class="screen-container">
 			<Icon
 				name="lucide:x"
 				class="close-btn show"
 				@click="fullscreen = false"
 			/>
+
+			<div class="content-container">
+				<PlayerFullscreenTrackDisplay
+					:show-buttons="!mouseMovedRecently"
+				/>
+			</div>
 		</section>
 	</section>
 </template>
@@ -47,7 +74,7 @@ const song = useSong()
 	filter: blur(40px);
 }
 
-.container {
+.screen-container {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -72,4 +99,22 @@ const song = useSong()
 		opacity: 1;
 	}
 }
+
+.content-container {
+	/* TODO: A lot of magic numbers... should be variables */
+	max-width: 1280px;
+	width: 100%;
+	height: 100%;
+	margin: 0 auto;
+
+	display: grid;
+	grid-template-columns: 500px 1fr;
+	gap: 110px;
+
+	align-items: center;
+
+	& > * {
+		max-height: 675px;
+	}
+}
 </style>

From 76c57c1ba0d736111e2f0d2585b754f2f9568214 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 27 Feb 2026 14:51:45 +0100
Subject: [PATCH 05/10] Made cursor hide when no movement is detected

---
 app/components/Player/Fullscreen.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index 53e81d2..3caaf08 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -25,7 +25,11 @@ onMounted(() => {
 </script>
 
 <template>
-	<section class="fullscreen" v-show="fullscreen">
+	<section
+		class="fullscreen"
+		:class="{ showCursor: mouseMovedRecently }"
+		v-show="fullscreen"
+	>
 		<template v-if="song">
 			<NuxtImg
 				:src="GET_FILE(song.album.file)"
@@ -61,6 +65,12 @@ onMounted(() => {
 	width: 200vw;
 	height: 200vh;
 	z-index: 150;
+
+	cursor: none;
+
+	&.showCursor {
+		cursor: auto;
+	}
 }
 
 .background {

From ae79952ddc5cbeead77738db1061e3fd361bc71b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Fri, 27 Feb 2026 14:53:31 +0100
Subject: [PATCH 06/10] Update fullscreen player to show/hide close buttons

---
 app/components/Player/Fullscreen.vue              | 5 +++--
 app/components/Player/Fullscreen/TrackDisplay.vue | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index 3caaf08..40600f8 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -43,13 +43,14 @@ onMounted(() => {
 		<section class="screen-container">
 			<Icon
 				name="lucide:x"
-				class="close-btn show"
+				class="close-btn"
+				:class="{ show: mouseMovedRecently }"
 				@click="fullscreen = false"
 			/>
 
 			<div class="content-container">
 				<PlayerFullscreenTrackDisplay
-					:show-buttons="!mouseMovedRecently"
+					:show-buttons="mouseMovedRecently"
 				/>
 			</div>
 		</section>
diff --git a/app/components/Player/Fullscreen/TrackDisplay.vue b/app/components/Player/Fullscreen/TrackDisplay.vue
index f990ec7..9fc3180 100644
--- a/app/components/Player/Fullscreen/TrackDisplay.vue
+++ b/app/components/Player/Fullscreen/TrackDisplay.vue
@@ -54,7 +54,7 @@ const durationFormatted = computed(() =>
 			</div>
 		</div>
 
-		<div class="btns" :class="{ hidden: showButtons }">
+		<div class="btns" :class="{ hidden: !showButtons }">
 			<Icon name="lucide:shuffle" @click="shuffle()" />
 			<Icon name="lucide:skip-back" @click="prev()" />
 			<Icon name="lucide:pause" v-if="isPlaying" @click="pause()" />

From 22d61502907293941fafd695cdb5b8698793f9be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sat, 7 Mar 2026 15:32:20 +0100
Subject: [PATCH 07/10] Got synced lyrics working

---
 app/components/Player/Fullscreen.vue          |   3 +
 .../Player/Fullscreen/LyricsDisplay.vue       | 129 ++++++++++++++++++
 app/utils/parseLyrics.ts                      |  27 ++++
 3 files changed, 159 insertions(+)
 create mode 100644 app/components/Player/Fullscreen/LyricsDisplay.vue
 create mode 100644 app/utils/parseLyrics.ts

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index 40600f8..af0ddca 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import LyricsDisplay from "./Fullscreen/LyricsDisplay.vue"
+
 const fullscreen = useFullscreen()
 const song = useSong()
 
@@ -52,6 +54,7 @@ onMounted(() => {
 				<PlayerFullscreenTrackDisplay
 					:show-buttons="mouseMovedRecently"
 				/>
+				<LyricsDisplay :animation-duration="0.2" />
 			</div>
 		</section>
 	</section>
diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
new file mode 100644
index 0000000..eebcee2
--- /dev/null
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+const { animationDuration } = defineProps<{ animationDuration: number }>()
+
+const song = useSong()
+const { secondsPlayed } = usePlayer()
+
+const parsedLyrics = computed(() => {
+	if (!song.value || !song.value.lyrics.synced) return
+
+	if (song.value.lyrics.synced) return parseLyrics(song.value.lyrics.text)
+})
+
+const lyricsRefs = useTemplateRef("lyrics")
+
+const activeIndex = computed(() => {
+	if (!parsedLyrics.value) return -1
+
+	const time = secondsPlayed.value + animationDuration
+
+	return parsedLyrics.value.findIndex(
+		(lyric, i) =>
+			lyric.time <= time &&
+			(!parsedLyrics.value![i + 1] ||
+				parsedLyrics.value![i + 1]!.time > time),
+	)
+})
+
+const height = ref(0)
+
+watch(parsedLyrics, () => {
+	const trackDisplay = document.querySelector(".track-display")
+
+	if (!trackDisplay) return
+
+	const resizeObserver = new ResizeObserver((entries) => {
+		height.value = entries[0]!.target.clientHeight
+	})
+
+	resizeObserver.observe(trackDisplay)
+})
+
+onMounted(() => {})
+
+const transformY = computed(() => {
+	if (activeIndex.value < 0) return 0
+
+	let accumulatedHeight = 0
+
+	if (!lyricsRefs.value) return 0
+
+	for (let i = 0; i < activeIndex.value; i++) {
+		const el = lyricsRefs.value[i]
+		if (el) accumulatedHeight += el.getBoundingClientRect().height
+	}
+
+	return -accumulatedHeight
+})
+</script>
+
+<template>
+	<div
+		v-if="song && song.lyrics.synced"
+		class="synced-lyrics-container"
+		:style="{
+			height: `${height}px`,
+		}"
+	>
+		<div
+			class="synced-lyrics"
+			:style="{
+				transform: `translateY(${transformY + 150}px)`,
+				transition: `transform ${animationDuration}s ease`,
+			}"
+		>
+			<p
+				v-for="(lyric, i) in parsedLyrics"
+				:key="lyric.time"
+				:class="{ active: i == activeIndex }"
+				ref="lyrics"
+			>
+				{{ lyric.text }}
+			</p>
+		</div>
+	</div>
+	<template v-else-if="song"> </template>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.synced-lyrics-container {
+	position: relative;
+	overflow: hidden;
+}
+
+.synced-lyrics {
+	position: absolute;
+	scrollbar-width: none;
+	will-change: transform;
+
+	top: 0;
+
+	mask-image: linear-gradient(
+		transparent 0%,
+		#000 15%,
+		#000,
+		#000,
+		95%,
+		transparent 100%
+	);
+
+	& > p {
+		@include fontSize(40px);
+		font-weight: 600;
+		color: white;
+		opacity: 0.4;
+		padding: 10px 0;
+		transition:
+			opacity 0.1s ease,
+			filter 0.1s ease;
+		filter: blur(1.5px);
+
+		&.active {
+			opacity: 1;
+			filter: blur(0);
+		}
+	}
+}
+</style>
diff --git a/app/utils/parseLyrics.ts b/app/utils/parseLyrics.ts
new file mode 100644
index 0000000..0da10f6
--- /dev/null
+++ b/app/utils/parseLyrics.ts
@@ -0,0 +1,27 @@
+export const parseLyrics = (lrc: string) => {
+	const regex = /^\[(\d{2}:\d{2}(.\d{2,3})?)\](.*)/
+	const lines = lrc.split("\n")
+	const output: { time: number; text: any }[] = []
+
+	const parseTime = (time: any) => {
+		const minsec = time.split(":")
+		const min = parseInt(minsec[0]) * 60
+		const sec = parseFloat(minsec[1])
+		return min + sec
+	}
+
+	lines.forEach((line: any) => {
+		const match = line.match(regex)
+		if (match == null) return
+
+		const time = match[1]
+		const text = match[3]
+
+		output.push({
+			time: parseTime(time),
+			text: text.trim(),
+		})
+	})
+
+	return output
+}

From fd27fee6c7db460502012d355e5e7f7742f32e03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sat, 7 Mar 2026 15:42:34 +0100
Subject: [PATCH 08/10] Updated synced lyrics system to be more smooth

---
 .../Player/Fullscreen/LyricsDisplay.vue       | 49 ++++++++++++++-----
 1 file changed, 37 insertions(+), 12 deletions(-)

diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
index eebcee2..106dc5f 100644
--- a/app/components/Player/Fullscreen/LyricsDisplay.vue
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -15,7 +15,7 @@ const lyricsRefs = useTemplateRef("lyrics")
 const activeIndex = computed(() => {
 	if (!parsedLyrics.value) return -1
 
-	const time = secondsPlayed.value + animationDuration
+	const time = secondsPlayed.value
 
 	return parsedLyrics.value.findIndex(
 		(lyric, i) =>
@@ -24,6 +24,22 @@ const activeIndex = computed(() => {
 				parsedLyrics.value![i + 1]!.time > time),
 	)
 })
+const scrollActiveIndex = computed(() => {
+	if (!parsedLyrics.value) return -1
+
+	const time = secondsPlayed.value + animationDuration
+
+	let index = parsedLyrics.value.findIndex(
+		(lyric, i) =>
+			lyric.time <= time &&
+			(!parsedLyrics.value![i + 1] ||
+				parsedLyrics.value![i + 1]!.time > time),
+	)
+
+	if (index >= parsedLyrics.value.length - 1)
+		index = parsedLyrics.value.length - 2
+	return index
+})
 
 const height = ref(0)
 
@@ -48,7 +64,7 @@ const transformY = computed(() => {
 
 	if (!lyricsRefs.value) return 0
 
-	for (let i = 0; i < activeIndex.value; i++) {
+	for (let i = 0; i < scrollActiveIndex.value; i++) {
 		const el = lyricsRefs.value[i]
 		if (el) accumulatedHeight += el.getBoundingClientRect().height
 	}
@@ -77,12 +93,15 @@ const transformY = computed(() => {
 				:key="lyric.time"
 				:class="{ active: i == activeIndex }"
 				ref="lyrics"
+				@click="() => (secondsPlayed = lyric.time)"
 			>
 				{{ lyric.text }}
 			</p>
 		</div>
 	</div>
-	<template v-else-if="song"> </template>
+	<template v-else-if="song">
+		<p>{{ song.lyrics.text }}</p>
+	</template>
 </template>
 
 <style lang="scss" scoped>
@@ -91,14 +110,6 @@ const transformY = computed(() => {
 .synced-lyrics-container {
 	position: relative;
 	overflow: hidden;
-}
-
-.synced-lyrics {
-	position: absolute;
-	scrollbar-width: none;
-	will-change: transform;
-
-	top: 0;
 
 	mask-image: linear-gradient(
 		transparent 0%,
@@ -108,6 +119,14 @@ const transformY = computed(() => {
 		95%,
 		transparent 100%
 	);
+}
+
+.synced-lyrics {
+	position: absolute;
+	scrollbar-width: none;
+	will-change: transform;
+
+	top: 0;
 
 	& > p {
 		@include fontSize(40px);
@@ -122,7 +141,13 @@ const transformY = computed(() => {
 
 		&.active {
 			opacity: 1;
-			filter: blur(0);
+			filter: initial;
+		}
+
+		&:hover {
+			cursor: pointer;
+			opacity: 1;
+			filter: initial;
 		}
 	}
 }

From ab22cd6eb9671e3c7569a6a089364771ec4212f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sat, 7 Mar 2026 19:37:59 +0100
Subject: [PATCH 09/10] Implemented scrolling

---
 app/components/Player/Fullscreen.vue          |  2 +-
 .../Player/Fullscreen/LyricsDisplay.vue       | 48 +++++++++++++++++--
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index af0ddca..2511ee2 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -54,7 +54,7 @@ onMounted(() => {
 				<PlayerFullscreenTrackDisplay
 					:show-buttons="mouseMovedRecently"
 				/>
-				<LyricsDisplay :animation-duration="0.2" />
+				<LyricsDisplay :animation-duration="0.2" :offset="150" />
 			</div>
 		</section>
 	</section>
diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
index 106dc5f..ac39ed9 100644
--- a/app/components/Player/Fullscreen/LyricsDisplay.vue
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-const { animationDuration } = defineProps<{ animationDuration: number }>()
+const { animationDuration, offset } = defineProps<{
+	animationDuration: number
+	offset: number
+}>()
 
 const song = useSong()
 const { secondsPlayed } = usePlayer()
@@ -55,8 +58,6 @@ watch(parsedLyrics, () => {
 	resizeObserver.observe(trackDisplay)
 })
 
-onMounted(() => {})
-
 const transformY = computed(() => {
 	if (activeIndex.value < 0) return 0
 
@@ -71,20 +72,59 @@ const transformY = computed(() => {
 
 	return -accumulatedHeight
 })
+
+const containerRef = useTemplateRef("container-ref")
+const outerRef = useTemplateRef("outer-ref")
+
+const manualOffset = ref(0)
+const isScrolling = ref(false)
+
+let scrollingTimeout: any = null
+
+const onWheel = (event: WheelEvent) => {
+	if (!containerRef.value || !outerRef.value) return
+
+	isScrolling.value = true
+	clearTimeout(scrollingTimeout)
+
+	const delta = event.deltaY
+
+	manualOffset.value -= delta
+
+	const maxTranslate = offset
+	const minTranslate =
+		-containerRef.value.scrollHeight + outerRef.value.offsetHeight
+
+	manualOffset.value = Math.min(
+		maxTranslate,
+		Math.max(minTranslate, manualOffset.value),
+	)
+
+	scrollingTimeout = setTimeout(() => (isScrolling.value = false), 3000)
+}
+
+const finalTransform = computed(() => {
+	if (isScrolling.value) return manualOffset.value
+
+	return transformY.value + offset
+})
 </script>
 
 <template>
 	<div
+		ref="outer-ref"
 		v-if="song && song.lyrics.synced"
 		class="synced-lyrics-container"
 		:style="{
 			height: `${height}px`,
 		}"
+		@wheel.prevent="onWheel"
 	>
 		<div
+			ref="container-ref"
 			class="synced-lyrics"
 			:style="{
-				transform: `translateY(${transformY + 150}px)`,
+				transform: `translateY(${finalTransform}px)`,
 				transition: `transform ${animationDuration}s ease`,
 			}"
 		>

From d5482a9ea4b40c17d75d3c1d28c685d6e8c38bc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Sat, 7 Mar 2026 19:49:06 +0100
Subject: [PATCH 10/10] Added non synced text

---
 app/components/Player/Fullscreen.vue          |  6 ++-
 .../Player/Fullscreen/LyricsDisplay.vue       | 40 +++++++++++++++++--
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index 2511ee2..83bc7de 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -54,7 +54,11 @@ onMounted(() => {
 				<PlayerFullscreenTrackDisplay
 					:show-buttons="mouseMovedRecently"
 				/>
-				<LyricsDisplay :animation-duration="0.2" :offset="150" />
+				<LyricsDisplay
+					:animation-duration="0.2"
+					:offset="150"
+					:show-scroll-bar="mouseMovedRecently"
+				/>
 			</div>
 		</section>
 	</section>
diff --git a/app/components/Player/Fullscreen/LyricsDisplay.vue b/app/components/Player/Fullscreen/LyricsDisplay.vue
index ac39ed9..f541cb4 100644
--- a/app/components/Player/Fullscreen/LyricsDisplay.vue
+++ b/app/components/Player/Fullscreen/LyricsDisplay.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-const { animationDuration, offset } = defineProps<{
+const { animationDuration, offset, showScrollBar } = defineProps<{
 	animationDuration: number
 	offset: number
+	showScrollBar: boolean
 }>()
 
 const song = useSong()
@@ -46,7 +47,7 @@ const scrollActiveIndex = computed(() => {
 
 const height = ref(0)
 
-watch(parsedLyrics, () => {
+watch(song, () => {
 	const trackDisplay = document.querySelector(".track-display")
 
 	if (!trackDisplay) return
@@ -139,13 +140,21 @@ const finalTransform = computed(() => {
 			</p>
 		</div>
 	</div>
-	<template v-else-if="song">
+	<div
+		v-else-if="song"
+		class="lyrics"
+		:style="{
+			height: `${height}px`,
+		}"
+		:class="{ show: showScrollBar }"
+	>
 		<p>{{ song.lyrics.text }}</p>
-	</template>
+	</div>
 </template>
 
 <style lang="scss" scoped>
 @use "@/styles/util" as *;
+@use "@/styles/variables" as *;
 
 .synced-lyrics-container {
 	position: relative;
@@ -191,4 +200,27 @@ const finalTransform = computed(() => {
 		}
 	}
 }
+
+.lyrics {
+	overflow: hidden;
+
+	& > p {
+		height: 100%;
+		overflow-y: scroll;
+		white-space: pre-wrap;
+
+		&::-webkit-scrollbar {
+			width: 10px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: transparent;
+			border-radius: 5px;
+		}
+	}
+
+	&.show > p::-webkit-scrollbar-thumb {
+		background-color: $color-secondary-background;
+	}
+}
 </style>