diff --git a/src/components/HeadGadient.astro b/src/components/HeadGadient.astro
deleted file mode 100644
index 3dfd0ca..0000000
--- a/src/components/HeadGadient.astro
+++ /dev/null
@@ -1,5 +0,0 @@
-<div
-  class="head-gradient absolute -z-1 top-0 inset-x-0 h-[350px] bg-gradient-to-r from-accent/5 to-accent/15"
-  style="mask-image: linear-gradient(black, transparent);"
->
-</div>
diff --git a/src/components/head-gradient/HeadGradient.tsx b/src/components/head-gradient/HeadGradient.tsx
new file mode 100644
index 0000000..60a6426
--- /dev/null
+++ b/src/components/head-gradient/HeadGradient.tsx
@@ -0,0 +1,14 @@
+import { motion } from 'framer-motion'
+
+export function HeadGradient() {
+  return (
+    <motion.div
+      className="absolute -z-1 top-0 inset-x-0 h-[350px] bg-gradient-to-r from-accent/5 to-accent/15"
+      style={{
+        maskImage: 'linear-gradient(black, transparent)',
+      }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+    ></motion.div>
+  )
+}
diff --git a/src/components/head-gradient/index.ts b/src/components/head-gradient/index.ts
new file mode 100644
index 0000000..8023484
--- /dev/null
+++ b/src/components/head-gradient/index.ts
@@ -0,0 +1 @@
+export { HeadGradient } from './HeadGradient'
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index 81b659f..70a94b2 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -1,6 +1,6 @@
 ---
 import Layout from './Layout.astro'
-import HeadGadient from '@/components/HeadGadient.astro'
+import { HeadGradient } from '@/components/head-gradient'
 import Footer from '@/components/footer/Footer.astro'
 import { Header } from '@/components/header/Header'
 import { SearchPanel } from '@/components/SearchPanel'
@@ -32,7 +32,7 @@ const { title, description, image, mdTitle, mdDescription, mdSlug } = Astro.prop
 
   <Header client:only="react" transition:persist="header" />
   <main class="relative z-1 pt-16 min-h-main bg-primary">
-    <HeadGadient />
+    <HeadGradient client:idle />
     <slot />
   </main>
   <Footer />