glitchy

public/styles/css/color-scheme.css

@@ -18,11 +18,6 @@
     --alt-accent-950: #061900;
 }
 
-.glitch {
-    color: var(--alt-accent-900);
-    background-color: rgba(0, 0, 0, 0.233);;
-}
-
 @media (prefers-color-scheme: light) {
     :root {
         --text: #191209;

public/styles/css/glitch.css

@@ -2,6 +2,8 @@
   text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
     0.025em 0.04em 0 var(--glitch-3);
   animation: glitch 742ms infinite;
+  color: var(--alt-accent-900);
+  background-color: rgba(0, 0, 0, 0.233);
 }
 
 .glitch span {
@@ -24,31 +26,64 @@
   opacity: 0.75;
 }
 
+.glitch-alt {
+  text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
+    0.025em 0.04em 0 var(--glitch-3);
+  animation: glitch 742ms infinite;
+  color: var(--alt-accent-900);
+}
+
+.glitch-alt span {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.glitch-alt span:first-child {
+  animation: glitch 500ms infinite;
+  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
+  transform: translate(-0.04em, -0.03em);
+  opacity: 0.75;
+}
+
+.glitch-alt span:last-child {
+  animation: glitch 375ms infinite;
+  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
+  transform: translate(0.04em, 0.03em);
+  opacity: 0.75;
+}
+
 @keyframes glitch {
   0% {
     text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
       0.025em 0.04em 0 var(--glitch-3);
   }
+
   15% {
     text-shadow: 0.05em 0 0 var(--glitch-1), -0.03em -0.04em 0 var(--glitch-2),
       0.025em 0.04em 0 var(--glitch-3);
   }
+
   16% {
     text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
       -0.05em -0.05em 0 var(--glitch-3);
   }
+
   49% {
     text-shadow: -0.05em -0.025em 0 var(--glitch-1), 0.025em 0.035em 0 var(--glitch-2),
       -0.05em -0.05em 0 var(--glitch-3);
   }
+
   50% {
     text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
       0 -0.04em 0 var(--glitch-3);
   }
+
   99% {
     text-shadow: 0.05em 0.035em 0 var(--glitch-1), 0.03em 0 0 var(--glitch-2),
       0 -0.04em 0 var(--glitch-3);
   }
+
   100% {
     text-shadow: -0.05em 0 0 var(--glitch-1), -0.025em -0.04em 0 var(--glitch-2),
       -0.04em -0.025em 0 var(--glitch-3);

src/components/Footer.astro

@@ -85,7 +85,7 @@ const today = new Date();
       <a href="https://applianceri.ng/next?host=limepot.xyz"><img alt="Future Gadget 204 - A Functional Time Machine" src="/assets/webrings/FG204.png" width="100px"></a>
   </section>
   <section class="content">
-    <p class="small-quote">El. Psy. Kongroo.</p>
+    <p class="glitch-alt small-quote">El. Psy. Kongroo.</p>
     <a class="small-quote" href="/site-info">Site Info</a>
   </section>
 </footer>