From b4b06a941a40ae6fe6e8e4a7a25ec5eda2adcd3b Mon Sep 17 00:00:00 2001
From: Raj Sharma <raj@tokio.space>
Date: Tue, 14 May 2024 22:53:16 +0530
Subject: [PATCH] fix: added transition to grain

---
 src/app/(home)/page.tsx      |  4 +++-
 src/components/css-grain.tsx | 20 ++++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 src/components/css-grain.tsx

diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 5c3e8c7..7b5b38b 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -9,6 +9,8 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { motion } from "framer-motion";
+import { CssGrain } from "@/components/css-grain";
 
 export const revalidate = 100;
 
@@ -16,7 +18,7 @@ export default function Page() {
   return (
     <main>
       <div className="container py-12 max-w-xl">
-        <div className="hero pointer-events-none fixed top-0 left-0 w-full h-screen"></div>
+        <CssGrain />
         {/* <GrainProvider */}
         {/*   grain_options={{ */}
         {/*     patternWidth: 200, */}
diff --git a/src/components/css-grain.tsx b/src/components/css-grain.tsx
new file mode 100644
index 0000000..1f060ae
--- /dev/null
+++ b/src/components/css-grain.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+export function CssGrain() {
+  return (
+    <motion.div
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 1,
+      }}
+      transition={{
+        duration: 10,
+      }}
+      className="hero pointer-events-none fixed top-0 left-0 w-full h-screen"
+    ></motion.div>
+  );
+}