OnlyBands — Glitch FX Lab

RIOT SOUND

01

Chroma Split

Aberración cromática con los dos acentos de marca (Riot Red + Human Trace) en vez del cian/magenta cliché. Micro-jitter constante de ±1px, casi subliminal.

TítulosLogoCSS puroGPU only

NO PERMISSION

02

Slice Shift

Bandas horizontales recortadas con clip-path: inset() que se desplazan hasta ±14px en ráfagas de ~500ms cada 2.5s, con sangrado rojo/rosa. Al hover, el glitch se vuelve continuo.

Título heroCSS puroGPU only

LIVE SESSION

MADRID — SALA COPÉRNICO

23 · 07 · 2026 — SOLD OUT

03

CRT Scanlines

Overlay de líneas de barrido (repeating-linear-gradient) + banda de refresco que rueda lenta + flicker de luminancia del 2%. Convierte cualquier bloque en una pantalla de tubo.

FondosOverlays de mediaCSS puroGPU only

SIGNAL // FOUND

04

Static Noise

Grano analógico: textura feTurbulence en data-URI, capa sobredimensionada que salta de posición con steps(10). Opacidad 6% — textura de firma de marca, no protagonista.

FondosTexturasCSS + SVG estáticoGPU only

05

Glitch Button

CTA estable en reposo; al hover dispara una ráfaga única de slices + chroma split y un desplazamiento del bloque de sombra. Inspirado en el botón de Cyberpunk 2077, domesticado al radius 4px de marca.

Botones CTACSS puroGPU only

UNCHAIN THE SOUND

— pasa el ratón / entra en viewport —

06

Text Scramble

Decodificador: los caracteres resuelven de izquierda a derecha desde glifos de ruido (█▓▒░<>/\). Se dispara al entrar en viewport y al hover. En Angular: directiva obScramble.

TítulosNavegaciónJS mínimo (directiva)rAF, sin layout

▶ PLAY SP 0:00:13

07

VHS Tracking

Tres copias del media: dos recortadas en bandas que patinan horizontalmente con sangrado cromático, más línea de tracking y OSD de vídeo. Para covers, cabeceras de artista y vídeo en pausa.

MediaCoversCSS puroGPU only

HOVER / FOCUS

08

Image Glitch (hover)

La imagen está casi limpia en reposo (un blip sutil cada ~5s); al hover se rompe en continuo: bandas de las dos copias de color patinando con sangrado rojo/rosa mientras dure el cursor encima. Para cards de banda en listados.

Cards de bandaCoversCSS puroGPU only

09

Interference Link

Subrayado rojo que se materializa a trozos durante ~0.6s y un blip de skew con cambio de color al entrar el cursor. Mientras el cursor sigue encima, el texto mantiene un temblor de interferencia de 1px.

LinksNavCSS puroGPU only

PRÓXIMO LANZAMIENTO

EP · «STATIC»

4 pistas · master analógico · vinilo edición limitada 300 uds.

10

Corrupted Frame

El contenido queda intacto; sólo el borde de la card duplica marcos rojo/rosa desalineados en flashes de 2 frames cada ~6s. Manera de dar actitud a paneles sin tocar la legibilidad.

CardsPanelesCSS puroGPU only

11

SVG Displacement

Distorsión líquida real: feTurbulence + feDisplacementMap con la escala animada en ráfagas (0 → 26 → 0) y seed aleatorio. El único efecto que deforma de verdad los glifos — reservar para el logo en momentos clave.

LogoHeroSVG + JS mínimofiltro raster: usar con mesura

MANIFIESTO 003

LA MÚSICA NO PIDE PERMISO. SE TOMA EL ESCENARIO.

12

Flash Invert

Fotograma corrupto: un flash invierte la sección entera (mix-blend-mode: difference) y degenera en dos bandas parciales, ~350ms en total cada 5.5s. Puntúa el scroll sin interrumpir la lectura.

SeccionesTransicionesCSS puroGPU only

SIN CADENAS DESDE 2026

13

Type Flicker

Cada ~1s, 1–3 caracteres al azar parpadean ~200ms a un glifo corrupto en Rubik Glitch rojo (a veces con doble rebote) y vuelven. El texto siempre se puede leer. En Angular: directiva obFlicker.

Títulos displayJS mínimo (directiva)sin layout shift

ON AIR

◉ REC · 240 kbps ▮▮▯▯

14

Macroblock Drift

Compresión de vídeo rota (P-frames corruptos): bloques del propio fondo se copian desplazados en ráfagas, algunos con deriva de color rojo/rosa, y se reabsorben. El más «streaming caído» de la familia. En Angular: directiva obMacroblock.

FondosHerosJS mínimo (directiva)divs efímeros, sin canvas

STREAM

buffering… 87%

15

Block Quantization

Artefactos de cuantización: ruido pixelado a bloques gordos (image-rendering: pixelated sobre turbulencia diminuta) teñido de rojo que aparece por regiones localizadas, como un keyframe que llega a medias. CSS puro.

FondosOverlays de mediaCSS puroGPU only

FEED

16

Datamosh Smear

El barrido clásico del datamosh: una banda del fotograma se estira verticalmente (píxeles arrastrados) y recorre el frame hasta que la señal se recompone. Ráfaga de ~700ms cada 6s. CSS puro.

Fondos heroTransicionesCSS puroGPU only

NO SIGNAL

HOVER / FOCUS — 404 & estados vacíos

17

Signal Loss

Carta de ajuste en paleta de marca que pierde la señal al hover: las barras patinan con steps(), ruido y «NO SIGNAL» en chroma split. Pensado para 404, estados vacíos y mantenimiento.

404Estados vacíosCSS puroGPU only