fix: temp page is good looking

package.json

@@ -20,6 +20,7 @@
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
+		"sass": "^1.77.0",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tailwindcss": "^3.4.3",

src/routes/+layout.svelte

@@ -3,3 +3,10 @@
 </script>
 
 <slot />
+
+<style lang="postcss">
+	:global(html) {
+		background-color: theme(colors.gray.900);
+		overflow-x: hidden;
+	}
+</style>

src/routes/+page.svelte

@@ -1,7 +1,69 @@
-<h1 class="text-3xl font-bold underline text-white">V2</h1>
+<div class="w-screen">
+	<h1 class="text-center text-white glitch" data-text="4T$">4T$</h1>
+</div>
 
-<style lang="postcss">
-	:global(html) {
-		background-color: theme(colors.gray.900);
+<style lang="scss">
+	@mixin glitchCopy {
+		content: attr(data-text);
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	.glitch {
+		position: relative;
+		color: #fff;
+		font-size: 4em;
+		letter-spacing: 0.5em;
+		animation: glitch-skew 1s infinite linear alternate-reverse;
+
+		&::before {
+			@include glitchCopy;
+			left: 2px;
+			text-shadow: -2px 0 #ff00c1;
+			clip: rect(44px, 450px, 56px, 0);
+			animation: glitch-anim 5s infinite linear alternate-reverse;
+		}
+
+		&::after {
+			@include glitchCopy;
+			left: -2px;
+			text-shadow:
+				-2px 0 #ff00c1,
+				2px 2px #ff00c1;
+			clip: rect(44px, 450px, 56px, 0);
+			animation: glitch-anim2 5s infinite linear alternate-reverse;
+		}
+	}
+
+	@keyframes glitch-anim {
+		$steps: 20;
+		@for $i from 0 to $steps {
+			#{percentage($i*(1/$steps))} {
+				clip: rect(random(100) + px, 9999px, random(100) + px, 0);
+				transform: skew((random(100) / 100) + deg);
+			}
+		}
+	}
+
+	@keyframes glitch-anim2 {
+		$steps: 20;
+		@for $i from 0 to $steps {
+			#{percentage($i*(1/$steps))} {
+				clip: rect(random(100) + px, 9999px, random(100) + px, 0);
+				transform: skew((random(100) / 100) + deg);
+			}
+		}
+	}
+
+	@keyframes glitch-skew {
+		$steps: 10;
+		@for $i from 0 to $steps {
+			#{percentage($i*(1/$steps))} {
+				transform: skew((random(10) - 5) + deg);
+			}
+		}
 	}
 </style>