feat: add lines background animation

Author: hyperz111

src/components/Lines.svelte

@@ -0,0 +1,47 @@
+<script>
+	import { onMount } from "svelte";
+
+	const { height = $bindable(0), width = $bindable(0), ...rest } = $props();
+
+	let perHeight = $derived(Math.floor(height / 4));
+	let perWidth = $derived(Math.floor(width / 4));
+
+	let halfHeight = $derived(perHeight * 2);
+
+	/** @type {HTMLCanvasElement} */
+	let canvas;
+	/** @type {number} */
+	let frame;
+
+	let offset = $state(0);
+
+	onMount(() => {
+		const context = canvas.getContext("2d");
+		context.strokeStyle = "white";
+
+		function animate() {
+			context.clearRect(0, 0, width, height);
+
+			context.setLineDash([width, width]);
+			offset = offset - 5;
+			context.lineDashOffset = offset;
+
+			context.beginPath();
+
+			context.moveTo(0, halfHeight);
+			context.lineTo(perWidth, halfHeight);
+			context.lineTo(perWidth * 2, perHeight);
+			context.lineTo(perWidth * 3, halfHeight + perHeight);
+
+			context.lineTo(width, halfHeight);
+			context.stroke();
+			frame = requestAnimationFrame(animate);
+		}
+
+		animate();
+
+		return () => cancelAnimationFrame(frame);
+	});
+</script>
+
+<canvas bind:this={canvas} {height} {width} class="fixed mx-auto"></canvas>

src/routes/+layout.svelte

@@ -1,18 +1,25 @@
 <script>
 	import "$styles/index.css";
 	import Navbar from "$components/Navbar.svelte";
+	import Lines from "$components/Lines.svelte";
 
 	let { children } = $props();
+
+	let innerHeight = $state(0);
+	let innerWidth = $state(0);
 </script>
 
 <svelte:head>
 	<link rel="icon" href="/favicon.png" />
 </svelte:head>
 
+<svelte:window bind:innerHeight bind:innerWidth />
+
 <Navbar />
 
 <main class="grow bg-neutral-950 p-4 py-16 text-white">
-	<div class="mx-auto w-full max-w-3xl animate-up">
+	<Lines width={innerWidth - 50} height={innerHeight} />
+	<div class="relative mx-auto w-full max-w-3xl animate-up">
 		{@render children()}
 	</div>
 </main>