doc title

src/lib/hooks/title.svelte.ts

@@ -0,0 +1,37 @@
+export const useDocumentTitle = () => {
+	$effect(() => {
+		let pattern = 0
+
+		const emptyTitle = '_______________'.split('')
+		const title1 = '_____zesty_____'.split('')
+		const title2 = '____p_l_u_s____'.split('')
+
+		const pattern1 = () => {
+			const last = title1.pop()
+			title1.unshift(last!)
+			document.title = title1.join('')
+		}
+
+		const pattern2 = () => {
+			document.title =
+				document.title === emptyTitle.join('')
+					? title2.join('')
+					: emptyTitle.join('')
+		}
+
+		const patterns = [pattern1, pattern2]
+
+		const id1 = setInterval(() => {
+			patterns[pattern]()
+		}, 300)
+
+		const id2 = setInterval(() => {
+			pattern = pattern === 0 ? 1 : 0
+		}, 2000)
+
+		return () => {
+			clearInterval(id1)
+			clearInterval(id2)
+		}
+	})
+}

src/routes/+layout.svelte

@@ -3,12 +3,15 @@
 
 	import { preload } from '$lib/preload'
 	import { Keybindings, useKeybinding } from '$lib/hooks/keybindings.svelte'
+	import { useDocumentTitle } from '$lib/hooks/title.svelte'
 
 	let { children } = $props()
 
 	$effect(() => preload())
 
 	useKeybinding(Keybindings.Fullscreen, () => document.body.requestFullscreen())
+
+	useDocumentTitle()
 </script>
 
 {@render children()}

src/routes/+page.svelte

@@ -21,7 +21,18 @@
     background-size: cover;
 	"
 >
-	<Logo class="w-[40%]" />
+	<div class="relative w-[40%]">
+		<img
+			alt=""
+			src="zesty.png"
+		/>
+		<img
+			alt=""
+			class="absolute bottom-0 right-0 -mr-8 w-[40%]"
+			src="plus.png"
+		/>
+	</div>
+
 	<div
 		class="flex flex-col gap-4 px-12 py-4 text-xs text-white opacity-80 sm:flex-row sm:gap-12 md:text-sm"
 	>