feat: added grain

src/app/(home)/page.tsx

@@ -16,16 +16,17 @@ export default function Page() {
   return (
     <main>
       <div className="container py-12 max-w-xl">
-        <GrainProvider
+        <div className="hero fixed top-0 left-0 w-full h-screen"></div>
-          grain_options={{
+        {/* <GrainProvider */}
-            patternWidth: 200,
+        {/*   grain_options={{ */}
-            patternHeight: 200,
+        {/*     patternWidth: 200, */}
-            grainOpacity: 0.1,
+        {/*     patternHeight: 200, */}
-            grainDensity: 1,
+        {/*     grainOpacity: 0.1, */}
-            grainWidth: 1,
+        {/*     grainDensity: 1, */}
-            grainHeight: 1,
+        {/*     grainWidth: 1, */}
-          }}
+        {/*     grainHeight: 1, */}
-        />
+        {/*   }} */}
+        {/* /> */}
         <header className="my-2 mt-8 relative">
           <Sparkle
             strokeWidth={1.5}

src/app/(home)/story/page.tsx

@@ -131,6 +131,8 @@ export default async function Story({
       {/*       "url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 600%22%3E%3Cfilter id=%22a%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23a)%22/%3E%3C/svg%3E')", */}
       {/*   }} */}
       {/* ></div> */}
+
+      <div className="hero fixed top-0 left-0 w-full h-screen"></div>
       <BackgroundGradentProvider className="-z-10 h-screen w-full opacity-60" />
       <Image
         width={400}

src/app/globals.css

@@ -78,3 +78,68 @@
 a {
   @apply text-primary font-medium hover:underline underline-offset-2;
 }
+
+.overlay {
+  /* position: absolute; */
+  /* width: 100vw; */
+  /* height: 100vh; */
+  /* background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5)); */
+  /* z-index: 1; */
+}
+.hero {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  /* background-image: url("https://i.picsum.photos/id/100/2500/1656.jpg?hmac=gWyN-7ZB32rkAjMhKXQgdHOIBRHyTSgzuOK6U0vXb1w"); */
+  background-position: center;
+}
+
+.hero:after {
+  content: "";
+  background-image: url("/grain.png");
+  height: 300%;
+  width: 300%;
+  position: fixed;
+  opacity: 0.08;
+  animation: animateGrain 8s steps(10) infinite;
+}
+
+@keyframes animateGrain {
+  0%,
+  100% {
+    transform: translate(0, 0);
+  }
+  10% {
+    transform: translate(-5%, -10%);
+  }
+  20% {
+    transform: translate(-15%, -20%);
+  }
+  30% {
+    transform: translate(-5%, -10%);
+  }
+  40% {
+    transform: translate(-15%, -20%);
+  }
+
+  50% {
+    transform: translate(-5%, -10%);
+  }
+  60% {
+    transform: translate(-15%, -20%);
+  }
+  70% {
+    transform: translate(-5%, -10%);
+  }
+  80% {
+    transform: translate(-15%, -20%);
+  }
+  90% {
+    transform: translate(-5%, -10%);
+  }
+  100% {
+    transform: translate(-15%, -20%);
+  }
+}