Fade in animations hehe

Author: DuskyElf

src/index.css

@@ -18,6 +18,25 @@
       transform: rotate(10deg);
     }
   }
+
+  @keyframes fade-down {
+    0% {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}
+
+@layer components {
+  .fade-down {
+    animation: fade-down 500ms ease-out forwards;
+    animation-delay: var(--fade-in-delay, 0ms);
+    opacity: 0;
+  }
 }
 
 @layer base {

src/sections/Main.tsx

@@ -8,22 +8,24 @@ export default function Main(props: MainProps) {
       class={`flex snap-start items-center px-[8%] text-white ${props.className}`}
     >
       <main class="space-y-7">
-        <h1 class="font-logo text-7xl md:text-8xl text-violet-50">
+        <h1 class="font-logo fade-down text-7xl text-violet-50 md:text-8xl">
           Seg
           <span class="text-red-400 underline decoration-red-400 decoration-wavy decoration-2">
             fault
           </span>{" "}
           Club
         </h1>
         <div class="space-y-4 font-mono text-lg md:text-xl">
-          <p>Linux, Debugging, Chaos and legendary segfaults</p>
+          <p class="fade-down [--fade-in-delay:_50ms]">
+            Linux, Debugging, Chaos and legendary segfaults
+          </p>
           <a
-            class="rounded bg-slate-700 p-2 transition hover:bg-slate-600"
+            class="fade-down rounded bg-slate-700 p-2 transition [--fade-in-delay:_300ms] hover:bg-slate-600"
             href="https://discord.gg/gohar"
             target="_blank"
           >
             Join{" "}
-            <span class="underline decoration-blue-400 decoration-2">
+            <span class="fade-down underline decoration-blue-400 decoration-2 [--fade-in-delay:_400ms]">
               @discord.gg/gohar
             </span>
           </a>