Back to Gallery

GLITCH EFFECT

Cyberpunk-inspired distortion animations

> RGB SHIFT

CHROMATIC ABERRATION

Classic RGB channel separation effect

> DIGITAL CORRUPTION

> VHS TRACKING

RETRO WAVE

Old school VHS tracking error simulation

> MATRIX RAIN

> HOVER CORRUPTION

Hover over these words to corrupt them. Each word glitches independently when touched.

> GLITCH INPUT

> IMPLEMENTATION

/* CSS Glitch Effect */
.glitch {
    position: relative;
    color: white;
    animation: glitch-skew 1s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
}

.glitch::before {
    animation: glitch-1 0.5s infinite;
    color: #00ffff;
    z-index: -1;
}

.glitch::after {
    animation: glitch-2 0.5s infinite;
    color: #ff00ff;
    z-index: -2;
}

@keyframes glitch-1 {
    0% {
        clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
        transform: translate(-2px);
    }
    /* ... more keyframes ... */
}