From 0663c06127e7c26215ef164cba07662c8ceda0b2 Mon Sep 17 00:00:00 2001
From: Emmanuel Imolorhe <imolorhe@gmail.com>
Date: Mon, 24 Feb 2025 19:10:52 +0100
Subject: [PATCH] add retro grid effect to home hero

---
 .../.vitepress/theme/components/Home.vue      | 150 +++++++++++-------
 1 file changed, 91 insertions(+), 59 deletions(-)

diff --git a/packages/altair-docs/.vitepress/theme/components/Home.vue b/packages/altair-docs/.vitepress/theme/components/Home.vue
index fc23ba4fae..f776713c02 100644
--- a/packages/altair-docs/.vitepress/theme/components/Home.vue
+++ b/packages/altair-docs/.vitepress/theme/components/Home.vue
@@ -12,95 +12,55 @@ const { theme, frontmatter: fm } = useData()
 </script>
 
 <template>
-  <main
-    class="home"
-    :aria-labelledby="fm.hero.text ? 'main-title' : undefined"
-  >
+  <main class="home" :aria-labelledby="fm.hero.text ? 'main-title' : undefined">
     <header class="hero" v-if="fm.hero">
       <div class="custom-wrapper">
         <div class="column">
 
           <div class="hero-content">
-
-            <h1
-              v-if="fm.hero.text"
-              id="main-title"
-              class="main-title"
-            >
+            <h1 v-if="fm.hero.text" id="main-title" class="main-title">
               {{ fm.hero.text }}
             </h1>
 
-            <p
-              v-if="fm.hero.tagline !== null"
-              class="description"
-            >
+            <p v-if="fm.hero.tagline !== null" class="description">
               {{ fm.hero.tagline }}
             </p>
 
-            <p
-              v-if="fm.hero.actions?.length"
-              class="hero-actions"
-            >
-              <VPButton
-                v-for="action in fm.hero.actions"
-                :key="action.link"
-                tag="a"
-                size="big"
-                :theme="action.theme"
-                :text="action.text"
-                :href="action.link"
-              />
+            <p v-if="fm.hero.actions?.length" class="hero-actions">
+              <VPButton v-for="action in fm.hero.actions" :key="action.link" tag="a" size="big" :theme="action.theme"
+                :text="action.text" :href="action.link" />
             </p>
             <div v-if="fm.heroSublimeAction" class="hero-sublime-actions">
-              <VPLink
-                :href="fm.heroSublimeAction.link"
-                class="hero-sublime-action"
-              >
+              <VPLink :href="fm.heroSublimeAction.link" class="hero-sublime-action">
                 {{ fm.heroSublimeAction.text }}
               </VPLink>
             </div>
           </div>
           <div class="image-wrapper">
-            <img
-              v-if="fm.hero.image"
-              :src="withBase(fm.hero.image.src)"
-              :alt="fm.hero.image.alt ?? 'hero'"
-            >
+            <img v-if="fm.hero.image" :src="withBase(fm.hero.image.src)" :alt="fm.hero.image.alt ?? 'hero'">
           </div>
         </div>
       </div>
+      <div class="retro-grid">
+        <div class="retro-grid-composition"></div>
+      </div>
     </header>
 
-    <div
-      v-if="fm.features && fm.features.length"
-      class="features-section"
-    >
+    <div v-if="fm.features && fm.features.length" class="features-section">
       <div class="clear-floats"></div>
 
       <div class="custom-wrapper">
         <div class="column">
           <div class="features-wrapper">
-            <div
-              v-for="(feature, index) in fm.features"
-              :key="index"
-              class="feature"
-            >
+            <div v-for="(feature, index) in fm.features" :key="index" class="feature">
               <h2>{{ feature.title }}</h2>
               <p>{{ feature.details }}</p>
             </div>
           </div>
 
-          <div
-            v-if="fm.featuresFooterText && fm.featuresFooterLink"
-            class="features-actions"
-          >
-            <VPButton
-              tag="a"
-              size="medium"
-              :theme="'alt'"
-              :text="fm.featuresFooterText"
-              :href="fm.featuresFooterLink"
-            />
+          <div v-if="fm.featuresFooterText && fm.featuresFooterLink" class="features-actions">
+            <VPButton tag="a" size="medium" :theme="'alt'" :text="fm.featuresFooterText"
+              :href="fm.featuresFooterLink" />
           </div>
         </div>
       </div>
@@ -113,9 +73,7 @@ const { theme, frontmatter: fm } = useData()
     <a name="download" id="download"></a>
     <Downloads :downloads="fm.downloads" />
 
-    <div
-      class="footer"
-    >
+    <div class="footer">
       <HomeCarbonAds v-if="theme.carbonAds" :carbon-ads="theme.carbonAds" />
       <p class="made-by">
         Made by <a href="https://twitter.com/imolorhe" target="_blank">Samuel</a> with ❤️🇳🇬
@@ -129,31 +87,91 @@ const { theme, frontmatter: fm } = useData()
   margin: 0px auto;
   display: block;
 }
+
 .home * {
   box-sizing: border-box;
 }
+
 .home .hero {
+  position: relative;
+  isolation: isolate;
+  /* To keep the retro grid in view, in spite of the z-index: -1 */
+
   text-align: center;
   height: auto;
   width: 100%;
   background: var(--vp-c-bg);
 }
+
 .home .hero .main-title {
   font-size: 48px;
   font-weight: 700;
   line-height: 1.3;
   margin-bottom: 10px;
 }
+
 .home .hero img {
   max-width: 100%;
   height: auto;
   display: block;
 }
+
 .home .hero .description {
   font-size: 22px;
   margin-top: 0;
   margin-bottom: 20px;
 }
+
+.retro-grid {
+  --perspective: 200px;
+  --retro-grid-angle: 50deg;
+  --fade-start: 35%;
+  --fade-end: 90%;
+  --grid-color: var(--vp-c-divider);
+  --grid-height: 60px;
+  --grid-width: calc(var(--grid-height) * 3);
+  --duration: 0.5s;
+
+  position: absolute;
+  inset: 0px;
+  z-index: -1;
+  overflow: hidden;
+  perspective: var(--perspective);
+
+  .retro-grid-composition {
+    position: relative;
+    width: 1000%;
+    height: 200%;
+    transform: rotateX(var(--retro-grid-angle));
+
+
+    &::before {
+      position: absolute;
+      content: "";
+      inset: 0px;
+      -webkit-mask-image: linear-gradient(#0000 var(--fade-start), #000 var(--fade-end));
+      mask-image: linear-gradient(#0000 var(--fade-start), #000 var(--fade-end));
+
+      background-image:
+        linear-gradient(to right, var(--grid-color) 1px, transparent 0),
+        linear-gradient(to bottom, var(--grid-color) 1px, transparent 0);
+      background-size: var(--grid-width) var(--grid-height);
+      background-repeat: repeat;
+
+      translate: -50% -50%;
+      transform-origin: bottom;
+
+      animation: retro-grid-slide var(--duration) linear infinite;
+    }
+  }
+}
+
+@keyframes retro-grid-slide {
+  to {
+    translate: -50% calc(-50% + var(--grid-height));
+  }
+}
+
 .home .hero .hero-content {
   margin: 0 auto;
   max-width: 650px;
@@ -161,12 +179,14 @@ const { theme, frontmatter: fm } = useData()
   padding: 100px 0 30px;
   text-align: center;
 }
+
 .home .hero-actions {
   display: flex;
   gap: 5px;
   justify-content: center;
   margin-bottom: 10px;
 }
+
 .home .hero-sublime-actions {
   font-size: 14px;
 }
@@ -175,9 +195,11 @@ const { theme, frontmatter: fm } = useData()
   text-decoration: underline;
   text-decoration-style: dashed;
 }
+
 .hero-sublime-action:hover {
   text-decoration-style: solid;
 }
+
 .home .hero .image-wrapper {
   margin: 30px 0;
   overflow: hidden;
@@ -185,23 +207,27 @@ const { theme, frontmatter: fm } = useData()
   box-shadow: 10px 10px var(--vp-c-gray-soft);
   font-size: 0;
 }
+
 .home .features-section {
   background-image: url("/assets/img/hero_bg.png");
   background-position: center;
   background-color: #7ebc59;
 }
+
 .home .features-wrapper {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   grid-gap: 20px;
   margin-bottom: 30px;
 }
+
 .home .feature {
   background: var(--vp-c-bg);
   border-radius: 10px;
   padding: 20px;
   box-shadow: 10px 10px var(--vp-c-gray-soft);
 }
+
 .home .feature h2 {
   font-size: 18px;
   font-weight: 500;
@@ -209,27 +235,33 @@ const { theme, frontmatter: fm } = useData()
   margin-bottom: 10px;
   border: none;
 }
+
 .home .feature p {
   margin: 0;
   font-size: 14px;
 }
+
 .home .features-actions {
   text-align: center;
   padding: 20px;
 }
+
 .home .footer {
   padding: 2.5rem;
   text-align: center;
 }
+
 .made-by {
   margin: 10px 0;
   font-size: 14px;
   color: var(--vp-c-text-2);
 }
+
 @media (min-width: 768px) {
   .home .hero {
     height: 700px;
   }
+
   .home .features-wrapper {
     grid-template-columns: repeat(3, 1fr);
   }