Move glitch CSS directly into Header component, refine animation directive

src/components/Header.astro

@@ -1,16 +1,98 @@
 ---
 interface Props {
-    className?: string | null;
-    children?: string | null;
+  className?: string | null;
+  text?: string | null;
 }
-const { className, children: propText } = Astro.props;
-console.log(Astro.props);
+const {
+  className,
+  text: propText,
+} = Astro.props;
 const text = propText ?? "undefined behaviors";
 ---
+
+<style lang="scss" >
+  .stack {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    &.glitch span {
+      animation:
+        jitter 340ms 1s ease 1 alternate-reverse,
+        glitch 2000ms calc(var(--index) * 120ms)
+          cubic-bezier(0.46, 0.29, 0, 1.24) infinite backwards;
+    }
+
+    span {
+      font-weight: bold;
+      grid-row-start: 1;
+      grid-column-start: 1;
+
+      --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: jitter 2000ms ease infinite 2s alternate-reverse;
+
+      &:nth-child(odd) {
+        --glitch-translate: 8px;
+      }
+
+      &:nth-child(even) {
+        --glitch-translate: -8px;
+      }
+    }
+  }
+
+  @keyframes glitch {
+    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 jitter {
+    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;
+    }
+  }
+</style>
 <header class:list={["text-5xl text-center lowercase", className]}>
-    <div class="stack" style="--stacks: 3;">
-        <span style="--index: 0;">{text}</span>
-        <span style="--index: 1;">{text}</span>
-        <span style="--index: 2;">{text}</span>
-    </div>
-</header>
+  <div class="stack" style="--stacks: 3;">
+    <span style="--index: 0;">{text}</span>
+    <span style="--index: 1;">{text}</span>
+    <span style="--index: 2;">{text}</span>
+  </div>
+</header>

src/styles/glitch.scss

@@ -1,71 +0,0 @@
-header {
-  .stack {
-    // overflow: hidden;
-    display: grid;
-    grid-template-columns: 1fr;
-
-    &.glitch span {
-      animation: glitch 340ms cubic-bezier(0.46, 0.29, 0, 1.24) 1 backwards
-          calc(var(--index) * 120ms),
-        jitter 2000ms ease infinite 2s alternate-reverse;
-    }
-
-    span {
-      font-weight: bold;
-      grid-row-start: 1;
-      grid-column-start: 1;
-
-      --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: jitter 2000ms ease infinite 2s alternate-reverse;
-
-      &:nth-child(odd) {
-        --glitch-translate: 8px;
-      }
-
-      &:nth-child(even) {
-        --glitch-translate: -8px;
-      }
-    }
-  }
-}
-
-@keyframes glitch {
-  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 jitter {
-  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;
-  }
-}

src/styles/global.scss

@@ -1,4 +1,3 @@
-@import "glitch";
 @import "mixins";
 @import "helpers";
 @import "code";