add: css styling

2026-09-12 14:22:10 +02:00
parent 9e51a5fe29
commit e382256330
5 changed files with 175 additions and 16 deletions
@@ -0,0 +1,90 @@
+.glitch {
+  position: relative;
+  display: inline-block;
+  isolation: isolate;
+  z-index: 0;
+}
+
+/* Duplicated text layers inherit the element's color */
+.glitch::before,
+.glitch::after {
+  content: attr(data-glitch);
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  color: inherit;
+  pointer-events: none;
+}
+
+/* Horizontal glitch slices */
+.glitch::before {
+  z-index: 1;
+  animation: glitch-cyan 1.5s infinite steps(1);
+}
+
+.glitch::after {
+  z-index: 2;
+  animation: glitch-red 1.2s infinite steps(1);
+}
+
+/* Horizontal slices move left and right */
+@keyframes glitch-cyan {
+  0%,
+  100% {
+    clip-path: inset(0 0 80% 0);
+    transform: translateX(-8px);
+  }
+
+  15% {
+    clip-path: inset(20% 0 55% 0);
+    transform: translateX(10px);
+  }
+
+  30% {
+    clip-path: inset(55% 0 25% 0);
+    transform: translateX(-12px);
+  }
+
+  45%,
+  70% {
+    clip-path: inset(0 0 100% 0);
+    transform: translateX(0);
+  }
+
+  80% {
+    clip-path: inset(35% 0 45% 0);
+    transform: translateX(7px);
+  }
+}
+
+@keyframes glitch-red {
+  0%,
+  100% {
+    clip-path: inset(75% 0 5% 0);
+    transform: translateX(8px);
+  }
+
+  20% {
+    clip-path: inset(10% 0 70% 0);
+    transform: translateX(-11px);
+  }
+
+  35%,
+  60% {
+    clip-path: inset(0 0 100% 0);
+    transform: translateX(0);
+  }
+
+  75% {
+    clip-path: inset(50% 0 30% 0);
+    transform: translateX(-7px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .glitch::before,
+  .glitch::after {
+    animation: none;
+  }
+}