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 en ráfagas de ~300ms cada 5s. El 92% del timeline está en reposo: la contención es lo que lo hace profesional.

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á limpia en reposo; al hover se rompe en canales rojo/rosa y slices durante 400ms y se vuelve a ensamblar. Ideal para cards de banda en listados: feedback táctil sin ensuciar la grid.

Cards de bandaCoversCSS puroGPU only

09

Interference Link

Subrayado rojo que se materializa a trozos (dash interference) y un único blip de skew de 90ms al entrar el cursor. Para navegación y links inline sin volverse ruidoso.

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

Una banda horizontal invierte la sección (mix-blend-mode: difference) durante 2 frames, como un fotograma corrupto. Frecuencia bajísima (~9s) — puntúa el scroll, no lo interrumpe.

SeccionesTransicionesCSS puroGPU only

SIN CADENAS DESDE 2026

13

Type Flicker

Cada ~3s, 1–2 caracteres al azar parpadean 120ms a un glifo corrupto en Rubik Glitch rojo y vuelven. Interferencia mínima viable: el texto siempre se puede leer. En Angular: directiva obFlicker.

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

BACKSTAGE

14

Pixel Sort

Columnas de píxel estiradas (datamosh) construidas con gradientes verticales por franjas y deriva lenta con steps(). Fondo abstracto y oscuro para heros y cabeceras de sección, con vetas Riot Red muy espaciadas.

Fondos heroCSS puroGPU only

NO SIGNAL

HOVER / FOCUS — 404 & estados vacíos

15

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