design tweaks

Author: smallergames

src/App.tsx

@@ -688,6 +688,12 @@ function App() {
 
   return (
     <main className="landing">
+      <svg width="0" height="0" aria-hidden="true" style={{ position: "absolute" }}>
+        <filter id="grain">
+          <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch" />
+          <feColorMatrix type="saturate" values="0" />
+        </filter>
+      </svg>
       <span className="landing-noise" aria-hidden="true" />
 
       <section className="landing-loader" aria-label="Loading indicator">

src/index.css

@@ -58,6 +58,15 @@ body {
     mask-image: radial-gradient(circle at center, #000 40%, transparent 100%);
 }
 
+.landing-noise::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.55;
+    filter: url(#grain);
+    background: transparent;
+}
+
 .landing-loader {
     position: absolute;
     top: 53%;
@@ -100,7 +109,7 @@ body {
     max-width: 100%;
     min-width: 0;
     margin-bottom: clamp(0.32rem, 1.3vw, 0.9rem);
-    animation: landing-rise 900ms ease-out both;
+    animation: landing-rise 900ms ease-out 1.1s both;
 }
 
 .landing-tag {