From e68741fee0734a37f4b9436aacbf58dfa4a8a503 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Sun, 24 Jul 2022 18:54:31 -0500
Subject: [PATCH] Add glitch header animation

---
 _includes/header.html |  8 +++++-
 _sass/glitch.scss     | 59 +++++++++++++++++++++++++++++++++++++++++++
 _sass/main.scss       |  3 ++-
 3 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 _sass/glitch.scss

diff --git a/_includes/header.html b/_includes/header.html
index b857d37..05c43d4 100644
--- a/_includes/header.html
+++ b/_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>
     :
diff --git a/_sass/glitch.scss b/_sass/glitch.scss
new file mode 100644
index 0000000..6b785d0
--- /dev/null
+++ b/_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;
+  }
+}
\ No newline at end of file
diff --git a/_sass/main.scss b/_sass/main.scss
index 6ea4435..b648392 100644
--- a/_sass/main.scss
+++ b/_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;
       }
     }
   }