feat: add enter animation for HeadGradient

lxchapu · May 27, 2024 · 9773aba · 9773aba
1 parent 30d0587
commit 9773aba
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/src/components/HeadGadient.astro b/src/components/HeadGadient.astro
diff --git a/src/components/head-gradient/HeadGradient.tsx 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
@@ -0,0 +1 @@
+export { HeadGradient } from './HeadGradient'
diff --git 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 />