Retro Grid

1<script lang="ts">
2	import { cn } from "$UTILS$";
3	import type { HTMLAttributes } from "svelte/elements";
4 
5	interface RetroGridProps extends HTMLAttributes<HTMLDivElement> {
6		class?: string;
7		angle?: number;
8		cellSize?: number;
9		opacity?: number;
10		lightLineColor?: string;
11		darkLineColor?: string;
12	}
13 
14	let {
15		class: className,
16		angle = 65,
17		cellSize = 60,
18		opacity = 0.5,
19		lightLineColor = "gray",
20		darkLineColor = "gray",
21		...props
22	}: RetroGridProps = $props();
23</script>
24 
25<div
26	class={cn(
27		"pointer-events-none absolute size-full overflow-hidden perspective-[200px]",
28		`opacity-(--opacity)`,
29		className
30	)}
31	style="
32		--grid-angle: {angle}deg;
33		--cell-size: {cellSize}px;
34		--opacity: {opacity};
35		--light-line: {lightLineColor};
36		--dark-line: {darkLineColor};"
37	{...props}
38>
39	<div class="absolute inset-0 transform-[rotateX(var(--grid-angle))]">
40		<div
41			class="animate-grid inset-[0%_0px] ml-[-200%] h-[300vh] w-[600vw] origin-[100%_0_0] bg-[linear-gradient(to_right,var(--light-line)_1px,transparent_0),linear-gradient(to_bottom,var(--light-line)_1px,transparent_0)] bg-size-[var(--cell-size)_var(--cell-size)] bg-repeat dark:bg-[linear-gradient(to_right,var(--dark-line)_1px,transparent_0),linear-gradient(to_bottom,var(--dark-line)_1px,transparent_0)]"
42		></div>
43	</div>
44 
45	<div
46		class="absolute inset-0 bg-linear-to-t from-white to-transparent to-90% dark:from-black"
47	></div>
48</div>