Texto con efecto glitch CSS

Funciones

• Tres niveles de intensidad: un salto ocasional, un temblor continuo y un desgarro evidente
• El color de las dos copias es ajustable; por defecto son cian y magenta (para simular el desajuste de color)
• En la previa se repite en bucle y se pausa al pasar el cursor, para ver un fotograma
• Se previsualiza mientras escribes (la herramienta tiene un campo de texto)
• El código entregado incluye el CSS completo y la explicación del `data-text` en el HTML
• Añade automáticamente el tratamiento de `prefers-reduced-motion`
• El nombre de la animación lleva un sufijo aleatorio, así no choca con keyframes del mismo nombre
• Debajo el código lleva coloreado de sintaxis y un botón de copiar
• Todo se ejecuta en tu navegador: no se sube nada

Cómo se usa

1. Escribe unas palabras en el campo de arriba
2. Elige la intensidad: para un titular va bien "fuerte", para un detalle dentro del texto "ligero"
3. Ajusta el color de las dos copias; separar los tonos hace el desgarro más intenso
4. Copia el código y acuérdate de poner al elemento el atributo `data-text` con el mismo texto

Preguntas frecuentes

¿Por qué las copias salen vacías después de copiar el código?

Porque falta el atributo `data-text`. Las dos copias se generan con `content: attr(data-text)`: toman el valor de ese atributo del elemento, no el texto que hay dentro. Por eso el HTML tiene que escribirse como `<div class="glitch" data-text="el mismo texto">el mismo texto</div>`, con las dos apariciones coincidentes. En la previa la herramienta ya lo ha puesto por ti, pero al pegar en tu proyecto lo añades tú; es el único punto en el que este efecto puramente CSS necesita colaborar con el HTML.

¿Por qué usar `clip-path` y no desgarrar la imagen de verdad?

Porque en CSS no existe la operación de "desgarrar": lo que sí hace es recortar. Así que la idea se da la vuelta: primero se preparan las copias desalineadas y luego se hace que cada una asome solo unas cuantas tiras horizontales (`clip-path: polygon(...)`), cuyas posición y extensión cambian con el tiempo. Cuando el ojo ve "unas barras horizontales desalineadas" lo interpreta como un fallo de señal. Es la aproximación que permite el CSS puro, y de hecho es la forma en que este efecto se implementa en la web.

¿Cómo afecta este efecto a la accesibilidad?

Es el menos amable con la accesibilidad de toda esta familia de efectos, por tres motivos. Uno, el texto tiembla sin parar y cuesta leerlo, así que jamás debe usarse en el cuerpo del texto. Dos, el contenido que parpadea rápido es un riesgo para las personas fotosensibles (en casos graves puede desencadenar una crisis epiléptica); en el código entregado ya hay una red con `prefers-reduced-motion`. Tres, roba la atención por definición, y usado al lado de contenido distrae. Así que: solo en titulares, páginas 404 e interfaces con estética de videojuego, y sin dejarlo en bucle perpetuo.