some changes for 404

src/app/not-found.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Wep wep",
+};
+
+export default function NotFound() {
+  return (
+    <main className="flex items-center h-screen pt-16 md:pt-32 pb-12 px-8 md:px-0">
+      <div className="mx-auto w-[480px]">
+        <header className="mb-8 text-center">
+          <h1 className="font-bold text-8xl">404</h1>
+        </header>
+        <div className="">
+          Oh you lost, you know there's nothing here...
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/page.tsx

@@ -1,4 +1,5 @@
 import { ExpirationDate } from "@/components/expiration-date";
+import { NolaGlitchClientOnly } from "@/components/nola-glitch";
 import Image from "next/image";
 
 export default function Home() {
@@ -10,13 +11,16 @@ export default function Home() {
             Nomi Nonsense Workspace
           </h1>
         </header>
-        <Image
-          className="mb-12 mx-auto"
-          alt="Spining ENA <3"
-          src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
-          width={200}
-          height={200}  
-        />
+        <noscript>
+          <Image
+            className="mb-12 mx-auto"
+            alt="Spining ENA <3"
+            src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
+            width={200}
+            height={200}  
+          />
+        </noscript>
+        <NolaGlitchClientOnly />
         <article className="space-y-6 leading-relaxed">
           <p>What? what are you expecting specifically on this base page?</p>
           <p>

src/components/nola-glitch.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useEffect, useRef, useState } from "react";
+
+export const NolaGlitch = () => {
+  const ascii = useRef<HTMLDivElement>(null);
+
+  const chars = "asdfghjklzxcvbnmqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP1234567890";
+  const symbols = "10!@#$%^&*~|\;,./?<>:";
+
+  function randomChar(len: number) {
+    let char = "";
+    for (let i = 0; i <= len; i++) {
+      const cindex = Math.floor(Math.random() * chars.length);
+      char += chars[cindex];
+    }
+    return char;
+  }
+  
+  function randomSymbol(len: number = 1) {
+    let char = "";
+    for (let i = 0; i <= len; i++) {
+      const cindex = Math.floor(Math.random() * symbols.length);
+      char += symbols[cindex];
+    }
+    return char;
+  }
+
+  useEffect(() => {
+    const art = ascii.current as HTMLDivElement;
+    const artasci = art.innerHTML;
+    
+    const interval = setInterval(() => {
+      const glitch_probality = Math.floor(Math.random() * 3);
+      
+      if (glitch_probality == 1) {
+        art.innerHTML = [...artasci].map(v => {
+          const char_probality = Math.floor(Math.random() * 50);
+          const delchar_probablity = Math.floor(Math.random() * 40);
+    
+          if (delchar_probablity == 1) {
+            return ' ';
+          }
+          else {
+            if (v == "⠀") {
+              return char_probality == 1 ? randomSymbol(0) : v;
+            }
+            else if (v === " ") {
+              return char_probality == 1 ? "-" : v;
+            }
+          }
+    
+          return v;
+        }).
+        join("");
+      }
+      else {
+        art.innerHTML = artasci;
+      }
+    }, 60);
+
+    return () => {
+      clearInterval(interval);
+    }
+  }, []);
+
+  return (
+    <div ref={ascii}>
+            ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⣴⠶⠶⠿⠿⢶⣶⠶⠶⠿⠛⠻⠷⠶⣦⣄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡾⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠷⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⠀⠀⠀⣀⣴⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢷⣄⠀⠀⠀⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⠀⠀⣴⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣷⡀⠀⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⠀⣾⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⡄⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⢸⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡆⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⢰⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⣾⠇⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⢠⡿⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⢠⣶⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⣆⠀⠀⠀⠀⠀⠀⠀⠀⢻⡆⠀⠀⠀<br/>
+            ⠀⠀⠀⣾⠇⠀⠀⠀⠀⢰⣿⠀⠀⢀⣀⣤⣿⣧⠀⠀⠀⠀⠀⢠⡄⠀⣤⣤⣤⣤⣤⡹⣧⡀⠀⠀⠀⠀⠀⠀⠈⢿⡄⠀⠀<br/>
+            ⠀⠀⢰⡿⠀⠀⠀⠀⠀⢸⣿⣤⣾⠛⠋⠁⢙⣿⣧⣀⡀⠀⠀⢸⣷⡀⠀⠀⠀⠀⠈⣹⡿⣧⠀⠀⠀⢻⣆⠀⠀⠘⣿⡀⠀<br/>
+            ⠀⠀⣾⠃⠀⠀⠀⠀⠀⢸⣿⠉⠙⠛⠛⠛⠛⢉⣈⡉⠛⠛⠿⠿⠛⠛⠛⠛⠛⠛⠛⠋⠀⢻⡆⠀⠀⠀⢿⡆⠀⠀⠘⣷⠀<br/>
+            ⠀⣸⡏⠀⠀⢠⡦⠀⠀⢸⣿⠀⠀⢀⣤⣶⣿⣿⣯⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠄⠘⣷⠀⠀⠀⠈⣿⡀⠀⠀⢹⡇<br/>
+            ⢠⡿⠀⠀⠀⣼⠇⠀⠀⢸⣿⠀⠾⠛⠁⢿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⢤⣤⠴⠶⠛⠉⠀⠀⣿⡄⠀⠀⠀⢸⡇⠀⠀⠈⣿<br/>
+            ⢸⡇⠀⠀⠀⣿⠀⠀⠀⠈⣿⠀⠀⠀⠀⠘⠿⠿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡇⠀⠀⠀⠘⣿⠀⠀⢠⡿<br/>
+            ⠘⣷⠀⠀⠀⣿⠀⠀⠀⠀⢻⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⣠⣶⠀⠀⠀⠀⠀⠀⣸⡇⠀⠀⠀⠀⣿⠀⣀⣾⠃<br/>
+            ⠀⠹⣧⠀⠀⣿⠀⠀⠀⠀⠸⣧⠀⠀⠀⠀⠀⠀⠀⠻⠷⠿⠛⠉⠉⠉⠉⠀⠀⠀⢀⣀⣤⡾⣿⡇⠀⠀⠀⢰⣿⡾⠛⠁⠀<br/>
+            ⠀⠀⠙⣷⡄⢹⡇⠀⠀⠀⠀⢿⣶⣦⣤⣀⣀⣀⣀⣀⣀⣀⣀⣤⣤⣤⣴⠶⠶⠿⠛⠋⠁⠀⣿⠀⠀⠀⢀⣿⠃⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠈⠻⣾⣿⡀⠀⠀⠀⠘⣷⡀⠉⠉⠉⠛⠛⠛⠋⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡏⠀⣀⣴⠟⠁⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⠈⠙⢷⡄⠀⠀⠀⠹⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡿⠿⠛⠋⠁⠀⠀⠀⠀⠀⠀⠀<br/>
+            ⠀⠀⠀⠀⠀⠀⠀⠈⠛⠷⣦⣤⣤⣽⡧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
+    </div>
+  )
+}
+
+export const NolaGlitchClientOnly = () => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) {
+    return null;
+  }
+
+  return <div className="text-[9px] mb-4 leading-[0.8rem] h-[320px] text-center">
+    <NolaGlitch />
+  </div>
+}