Add glitch header animation

_includes/header.html

@@ -1,4 +1,10 @@
-<header>Ryan Walters</header>
+<header>
+    <div class="stack" style="--stacks: 3;">
+        <span style="--index: 0;">ryan walters</span>
+        <span style="--index: 1;">ryan walters</span>
+        <span style="--index: 2;">ryan walters</span>
+    </div>
+</header>
 <nav>
     <a href="/">~/</a>
     :

_sass/glitch.scss

@@ -0,0 +1,59 @@
+.stack {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.stack span {
+  font-weight: bold;
+  grid-row-start: 1;
+  grid-column-start: 1;
+  font-size: 4rem;
+  --stack-height: calc(100% / var(--stacks) - 1px);
+  --inverse-index: calc(calc(var(--stacks) - 1) - var(--index));
+  --clip-top: calc(var(--stack-height) * var(--index));
+  --clip-bottom: calc(var(--stack-height) * var(--inverse-index));
+  clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
+  animation: stack 340ms cubic-bezier(.46, .29, 0, 1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
+}
+
+.stack span:nth-child(odd) {
+  --glitch-translate: 8px;
+}
+
+.stack span:nth-child(even) {
+  --glitch-translate: -8px;
+}
+
+@keyframes stack {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%);
+    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+  }
+  60% {
+    opacity: 0.5;
+    transform: translateX(50%);
+  }
+  80% {
+    transform: none;
+    opacity: 1;
+    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+  }
+  100% {
+    text-shadow: none;
+  }
+}
+
+@keyframes glitch {
+  0% {
+    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
+    transform: translate(var(--glitch-translate));
+  }
+  2% {
+    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
+  }
+  4%, 100% {
+    text-shadow: none;
+    transform: none;
+  }
+}

_sass/main.scss

@@ -1,3 +1,5 @@
+@import "glitch";
+
 ::selection {
   background: #606060;
   color: white;
@@ -380,7 +382,6 @@ article {
       a {
         text-decoration: none;
         font-style: italic;
-        //color: #90bcff;
       }
     }
   }