The beauty of broken data. We find aesthetics in technological failure -- pixel corruption, signal interference, and the hidden structures revealed when digital systems malfunction. This is not an error. This is the message.
Glitch Art typography favors monospaced, technical, and geometric typefaces that reference code editors, terminal displays, and early computing. Display text is a surface for corruption -- body text prioritizes legibility.
The glitch is not failure. It is the moment when a system reveals its true nature -- the hidden substrate of pixels, compression blocks, and encoding structures that normally remain invisible. When we datamosh a video stream or bend the bytes of an image file, we are not destroying information. We are liberating it from the tyranny of intended presentation.
Drawn from the RGB color model itself -- the raw channels of digital displays -- combined with neon accents that evoke CRT phosphors, VHS artifacts, and corrupted data streams. Deep black backgrounds maximize luminosity.
Each component explores a different facet of digital disruption. Cards feature scan line overlays, RGB split on hover, and corrupted-data borders. Hover to corrupt.
A real-time video corruption tool that removes I-frames from compressed video streams, producing the flowing, painterly distortions of datamoshing.
Open any image file as raw hexadecimal data and paint directly into the byte stream. Watch the image reconstruct with each corrupted edit.
An interactive installation that separates red, green, and blue channels of a live webcam feed and maps each to independent mouse-controlled offsets.
Generative compositions simulating electromagnetic interference, scan line degradation, and VHS tracking errors using pure CSS and SVG filters.
A visual explainer that deconstructs JPEG, PNG, and WebP compression in real time, revealing the block artifacts and quantization tables hidden inside every image.
Upload an image and apply pixel sorting algorithms by brightness, hue, or saturation to create cascading, waterfall-like distortions of sorted pixel rows.
/* RGB Split Text Effect */ .rgb-split { position: relative; color: var(--glitch-white); font-family: 'Orbitron', sans-serif; font-weight: 900; } .rgb-split::before { content: attr(data-text); color: var(--glitch-red); mix-blend-mode: screen; animation: rgb-split-red 3s infinite; }
Core visual effects that define the Glitch Art aesthetic -- RGB channel splitting, VHS tracking errors, pixel displacement, and screen tearing. Each effect uses pure CSS with no external dependencies.
Chromatic aberration via offset pseudo-elements with mix-blend-mode: screen. Red and blue copies animate independently with clip-path masking.
Simulated VHS tracking error bars using gradient-filled elements with staggered vertical animations and faint horizontal scan lines.
Grid of colored blocks with CSS transform offsets on hover, simulating pixel corruption and block displacement from codec failure.
Horizontal tear lines with glowing color trails that simulate a display failing to synchronize its refresh rate, exposing frame boundaries.
Measured distortion parameters across active signal channels. Table rows feature RGB split on hover to reinforce the corruption aesthetic.
| Channel | Offset X/Y | Noise Floor | Artifact Rate | Blend Mode | Status |
|---|---|---|---|---|---|
| RED | +3px / -1px | 0.042 | 12.7/sec | screen | CORRUPTED |
| GREEN | +0px / +2px | 0.018 | 3.1/sec | screen | NOMINAL |
| BLUE | -2px / +1px | 0.037 | 9.4/sec | screen | DEGRADED |
| ALPHA | +0px / +0px | 0.003 | 0.2/sec | normal | NOMINAL |
| SYNC | +7px / -4px | 0.089 | 24.1/sec | multiply | CRITICAL |
| LUMA | -1px / +3px | 0.056 | 15.8/sec | overlay | CORRUPTED |
| CHROMA | +4px / -2px | 0.071 | 19.3/sec | screen | DEGRADED |
| SCANLINE | +0px / +0px | 0.012 | 1.0/sec | darken | NOMINAL |