Effets glitch et distortion : RGB split et VHS

Introduction

Les effets glitch et distortion apportent une esthetique cyberpunk et retro-futuriste a vos interfaces web. Inspires des artefacts visuels des vieilles cassettes VHS, des ecrans CRT et des erreurs numeriques, ces effets sont devenus un element incontournable du design moderne.

Dans ce tutoriel, nous allons explorer 5 techniques differentes pour creer des effets de distortion en CSS pur : le glitch text classique, le RGB split (aberration chromatique), les scanlines VHS, l'ecran CRT et le bruit statique (noise). Chaque technique est accompagnee de code complet et d'une demo interactive.

1. Effet Glitch Text

L'effet glitch classique consiste a dupliquer le texte via les pseudo-elements, puis a deplacer chaque copie de maniere asynchrone avec un decalage de couleur. Le resultat evoque une erreur d'affichage numerique tres reconnaissable.

La technique repose sur trois couches de texte superposees : le texte original, une copie magenta (::before) decoupee sur la moitie haute, et une copie cyan (::after) sur la moitie basse. Les deux copies sont animees independamment.

.glitch {
  position: relative;
  font-size: 4rem;
  font-weight: 900;
  color: white;
  letter-spacing: 4px;
}

/* Duplication du texte avec pseudo-elements */
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Couche magenta - moitie haute */
.glitch::before {
  color: #ff00ff;
  animation: glitchTop 2s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

/* Couche cyan - moitie basse */
.glitch::after {
  color: #00ffff;
  animation: glitchBottom 3s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

@keyframes glitchTop {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

@keyframes glitchBottom {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(2px); }
  50% { transform: translateX(-3px); }
  75% { transform: translateX(1px); }
}

Comment ca fonctionne

Le principe repose sur trois couches superposees :

• content: attr(data-text) : Duplique le texte original dans les pseudo-elements sans le repeter dans le HTML
• clip-path: polygon() : Decoupe chaque pseudo-element pour ne montrer qu'une portion du texte
• Deux animations desynchronisees : Les couches bougent a des vitesses et directions differentes pour un effet aleatoire

2. RGB Split Effect

Le RGB split, aussi appele aberration chromatique, simule la separation des canaux de couleur rouge, vert et bleu. C'est un artefact que l'on retrouve sur les objectifs photographiques endommages et les ecrans defaillants.

Contrairement au glitch classique, le RGB split se concentre sur le decalage de couleur plutot que sur le mouvement erratique. Le resultat est plus subtil mais tout aussi impactant.

.rgb-split {
  position: relative;
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: 3px;
}

/* Canal rouge - tiers superieur */
.rgb-split::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: -2px;
  text-shadow: 2px 0 #ff0000;
  animation: rgbShift 0.5s infinite alternate;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

/* Canal cyan - tiers inferieur */
.rgb-split::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 2px;
  text-shadow: -2px 0 #00ffff;
  animation: rgbShift 0.5s infinite alternate-reverse;
  clip-path: polygon(0 66%, 100% 66%, 100% 100%, 0 100%);
}

@keyframes rgbShift {
  to {
    transform: translateX(3px);
  }
}

3. VHS / Scanlines

L'effet VHS reproduit l'apparence des cassettes video analogiques avec leurs lignes de balayage (scanlines) horizontales et leur scintillement subtil. C'est un classique de l'esthetique retrowave et synthwave.

La technique utilise un repeating-linear-gradient pour creer les lignes de scan et un second pseudo-element pour simuler le scintillement de la bande magnetique.

.vhs-container {
  position: relative;
  padding: 40px;
  background: #111;
  overflow: hidden;
}

/* Scanlines - lignes horizontales */
.vhs-container::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.3) 2px,
    rgba(0,0,0,0.3) 4px
  );
  pointer-events: none;
  animation: scanlines 0.1s infinite linear;
}

/* Scintillement de la bande */
.vhs-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.03) 50%,
    transparent 100%
  );
  animation: vhsFlicker 0.15s infinite;
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

@keyframes vhsFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
}

Personnaliser les scanlines

Vous pouvez ajuster plusieurs parametres pour obtenir l'effet desire :

• Epaisseur des lignes : Modifiez les valeurs 2px et 4px dans le gradient. Des lignes plus larges donnent un look plus retro
• Opacite : Ajustez le 0.3 dans rgba(0,0,0,0.3) pour des lignes plus ou moins visibles
• Vitesse de scan : Changez la duree de l'animation (0.1s) pour un defilement plus ou moins rapide

4. CRT Screen Effect

L'ecran CRT (Cathode Ray Tube) est un classique du design retro. Il combine un vignettage radial, des scanlines fines et un texte phosphorescent vert pour evoquer les terminaux informatiques des annees 80.

Cet effet est particulierement efficace pour les sections "terminal" de vos sites, les pages de statut ou tout element qui doit evoquer la technologie vintage.

.crt {
  position: relative;
  padding: 40px 60px;
  background: #000;
  border-radius: 20px;
  overflow: hidden;
}

/* Vignettage radial */
.crt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0,0,0,0.4) 100%
  );
  pointer-events: none;
}

/* Scanlines fines du CRT */
.crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0,0,0,0.15) 1px,
    rgba(0,0,0,0.15) 2px
  );
  pointer-events: none;
}

/* Texte phosphorescent */
.crt-text {
  font-family: 'JetBrains Mono', monospace;
  color: #00ff00;
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00;
  animation: crtFlicker 0.05s infinite;
}

@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.98; }
}

5. Noise / Static Overlay

Le bruit statique (noise) ajoute une texture granuleuse animee par-dessus vos elements. Il simule le bruit de fond des signaux analogiques et complete parfaitement les autres effets retro.

L'astuce consiste a utiliser un SVG inline avec un filtre feTurbulence encode en data URI. C'est une methode performante qui ne necessite aucun fichier image externe.

.noise-overlay {
  position: relative;
  overflow: hidden;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;

  /* SVG inline avec filtre feTurbulence */
  background-image: url("data:image/svg+xml,%3Csvg
    viewBox='0 0 400 400'
    xmlns='http://www.w3.org/2000/svg'%3E
    %3Cfilter id='n'%3E
      %3CfeTurbulence type='fractalNoise'
        baseFrequency='0.9'
        numOctaves='3'
        stitchTiles='stitch'/%3E
    %3C/filter%3E
    %3Crect width='100%25' height='100%25'
      filter='url(%23n)'/%3E
  %3C/svg%3E");

  opacity: 0.15;
  pointer-events: none;
  animation: noiseAnim 0.2s infinite;
}

@keyframes noiseAnim {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-1%, 1%);
  }
  50% {
    transform: translate(1%, -1%);
  }
  75% {
    transform: translate(-1%, -1%);
  }
}

Bonnes pratiques

Avant de conclure, voici quelques recommandations pour utiliser les effets glitch et distortion de maniere efficace :

Performance

• Limitez les animations simultanees : chaque pseudo-element anime consomme des ressources GPU. Evitez d'avoir plus de 2-3 effets actifs a la fois
• Utilisez will-change: transform sur les elements animes pour activer l'acceleration materielle
• Preferez transform a left/top : les transformations sont composees sur le GPU, contrairement aux proprietes de positionnement
• Desactivez les animations hors viewport avec l'Intersection Observer pour economiser les ressources

Design

• Reservez les glitchs aux titres : le contenu textuel principal doit rester lisible
• Fond sombre obligatoire : les effets glitch et CRT ne fonctionnent visuellement que sur fond noir ou tres fonce
• Dosez l'intensite : un decalage de 2-3px suffit. Au-dela, l'effet devient desagreable
• Coherence de l'univers : combinez ces effets entre eux pour un theme retro coherent

Accessibilite

/* Desactiver les animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .glitch::before,
  .glitch::after,
  .rgb-split::before,
  .rgb-split::after,
  .vhs-container::before,
  .vhs-container::after,
  .crt-text,
  .noise-overlay::after {
    animation: none;
  }

  /* Masquer les pseudo-elements decoratifs */
  .glitch::before,
  .glitch::after {
    display: none;
  }
}

Conclusion

Les effets glitch et distortion sont des outils puissants pour creer une esthetique retro-futuriste unique. En combinant les pseudo-elements, clip-path, @keyframes et les filtres SVG, vous pouvez reproduire l'ensemble des artefacts visuels analogiques en CSS pur.

Rappelez-vous que ces effets sont avant tout decoratifs. Utilisez-les avec parcimonie, sur des elements non essentiels, et pensez toujours a l'accessibilite. Le CSS ne cesse d'evoluer et offre des possibilites creatives sans avoir recours a JavaScript !