up

src/app/fonts.ts

@@ -0,0 +1,11 @@
+import { 
+  // Inter, Salsa, 
+  Arvo,
+  Signika_Negative
+} from 'next/font/google'
+
+
+// export const inter = Inter({ subsets: ['latin'] })
+// export const salsa = Salsa({ subsets: ['latin'], weight: ["400"] })
+export const arvo = Arvo({ subsets: ['latin'], weight: ["400", "700"] })
+export const signika = Signika_Negative({ subsets: ['latin'], weight: ["400", "700", "300", "500", "600"] })

src/app/globals.css

@@ -25,3 +25,7 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+@keyframes staticnoise {
+  100% {background-position: 50% 0, 60% 50%}
+}

src/app/page.tsx

@@ -4,7 +4,8 @@ import { AppQueryProps } from "@/types/general"
 import { Main } from "./main"
 import { getVideo } from "./api/actions/ai-tube-hf/getVideo"
 import { Metadata, ResolvingMetadata } from "next"
-
+import { arvo, signika } from './fonts'
+import { cn } from "@/lib/utils/cn"
 
 export async function generateMetadata(
   { params, searchParams: { v: videoId } }: AppQueryProps,
@@ -82,14 +83,28 @@ export default async function Page({ searchParams: { v: videoId } }: AppQueryPro
     neverThrow: true
   })
   return (
-    <div className="flex flex-col items-center justify-center h-screen v-screen bg-stone-900">
+    <div
+      className={cn(
+        `flex flex-col items-center justify-center h-screen v-screen bg-stone-800`,
+        signika.className
+      )}
+      style={{
+        background: `
+          repeating-radial-gradient(#0c0a09 0 0.0001%,#393534 0 0.0002%) 50% 0/2500px 2500px,
+          repeating-conic-gradient(#0c0a09 0 0.0001%,#393534 0 0.0002%) 60% 60%/2500px 2500px;
+        `,
+        backgroundBlendMode: 'difference',
+        animation: 'staticnoise .2s infinite alternate',
+        boxShadow: "inset 0 0 10vh 0 rgb(0 0 0 / 50%)" 
+      }}
+      >
       <div className="
       flex flex-col items-center justify-center text-center
       w-3/4 h-full
    
       ">
-      <h1 className="text-stone-200 text-6xl font-thin">Say goodbye to static videos.</h1>
-      <p className="mt-12 text-stone-400 text-xl font-thin">Beta planned for Winter 2024. Follow <a href="x.com/@flngr" className="font-normal font-mono text-stone-400 hover:text-stone-300 hover:underline hover:underline-offset-2" target="_blank">@flngr</a> for updates.</p>
+      <h1 className="text-yellow-400/90 text-6xl font-thin">Say goodbye to static videos.</h1>
+      <p className="mt-6 text-white/80 text-xl font-thin">Beta planned for Winter 2024. Follow <a href="x.com/@flngr" className="font-normal font-mono text-stone-50/60 hover:text-stone-50/80 hover:underline hover:underline-offset-2" target="_blank">@flngr</a> for updates.</p>
       </div>
     </div>
   )