* { box-sizing: border-box; }
body {
font-family: system-ui, "Segoe UI", sans-serif;
background: #050505;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.glitch {
font-size: 4rem;
font-weight: 900;
color: white;
position: relative;
letter-spacing: 4px;
}
/* Create two layers of the same text */
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #050505; /* Matches body bg */
}
.glitch::before {
left: 2px;
text-shadow: -1px 0 #ff00c1;
clip-path: inset(44% 0 61% 0);
animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch::after {
left: -2px;
text-shadow: -1px 0 #00fff9;
clip-path: inset(54% 0 10% 0);
animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
@keyframes glitch-anim {
0% { clip-path: inset(80% 0 10% 0); }
20% { clip-path: inset(10% 0 70% 0); }
40% { clip-path: inset(50% 0 20% 0); }
60% { clip-path: inset(10% 0 60% 0); }
80% { clip-path: inset(30% 0 40% 0); }
100% { clip-path: inset(60% 0 5% 0); }
}
