TRUQUÉ ?
Repérer une photo ou une vidéo modifiée
Commencer · 4 étapes, 15 minLiquidGratuit
Generative Glitch
Un mot blanc doublé de deux copies — cyan sur sa bande haute, magenta sur sa bande basse — qui tremblent de 2 à 3 px sur des cycles de 2 s et 3 s : un glitch chromatique en CSS pur, 2 Ko, sans script ni hasard, lu une seule fois par les lecteurs d'écran et figé en léger décalage si l'utilisateur réduit les animations.
Mis à jour le
GLITCH
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie Liquid en contient 31 au total, dont 6 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Exemples d'usage
Exposition
REWIND
40 ans de cassettes vidéo
Octets d'histoire · épisode 12
AN 2000
Le bug de l'an 2000 : comment le monde a corrigé ses dates à temps
12:04 / 38:00
Comment ça marche
Le mot est un <span class="ai-glitch-text"> blanc, gras (800), en 2,5rem, centré dans .ai-glitch-container (fond #111). Il porte le même texte dans un attribut data-text, que ses deux pseudo-éléments recopient (content: attr(data-text)) en position absolue, exactement par-dessus. ::before est cyan (#0ff) et découpé par clip-path à ses 35 % du haut ; ::after est magenta (#f0f) et découpé à ses 35 % du bas. La bande du milieu reste blanche : le mot se lit toujours.
Chaque copie a son animation de tremblement. aiGlitch1 déplace la copie cyan par cinq positions fixes (−3/+2 px, +3/−1 px, −2/−2 px, +2/+1 px, retour à 0) en 2 s ; aiGlitch2 déplace la copie magenta par trois positions (+2/−2 px, −3/+1 px, +1/+2 px) en 3 s. Les deux tournent en alternate-reverse (aller puis retour), donc sur 4 s et 6 s : leurs mouvements ne se retrouvent synchronisés que toutes les 12 s, ce qui évite une répétition visible. Rien n'est tiré au hasard : les bandes et les positions sont écrites dans le CSS, et le nom « Generative » du catalogue ne recouvre aucun calcul ni aucune intelligence artificielle. Comme seul transform est animé, le navigateur déplace les copies sans redessiner le texte.
Le contenu des copies s'écrit content: attr(data-text) / "" : la partie après la barre est le texte de remplacement lu par les lecteurs d'écran, vide ici, donc les deux copies sont muettes. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : l'arbre d'accessibilité ne contient le mot qu'une fois. La ligne précédente, content: attr(data-text) seule, sert de repli aux navigateurs qui ne connaissent pas cette syntaxe : ils affichent les copies, et peuvent alors lire le mot trois fois. Le texte et data-text doivent rester identiques : une copie qui dirait autre chose que le mot se verrait dans les bandes colorées.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, les deux copies s'arrêtent sur un léger décalage fixe (cyan à −2/+1 px, magenta à +2/−1 px) : l'image garde son dédoublement coloré, sans aucun tremblement. Mesuré dans les trois moteurs : 0 % de pixels changés en 500 ms (contre 1 % en mode normal, le tremblement ne touchant que les bords des lettres). - Lecteurs d'écran : le mot est lu une seule fois, les copies ayant un texte de remplacement vide (
/ ""). Le mot reste un vrai texte, sélectionnable et traduisible. - Lisibilité et clignotement : la bande centrale reste blanche et les décalages ne dépassent pas 3 px : le mot se lit à tout instant. Le tremblement est continu mais sans éclair ni alternance de luminosité, loin des seuils de flash des WCAG ; sur un titre qui reste longtemps à l'écran, envisagez de l'arrêter après quelques secondes (
animation-iteration-count).
Compatibilité navigateur
CSS pur (clip-path: polygon(), pseudo-éléments avec attr(), animation de transform), 2 Ko, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même tremblement, même arrêt décalé sous mouvement réduit, mot lu une fois. Le texte de remplacement des pseudo-éléments (/ "") existe depuis Chrome 77, Firefox 128 et Safari 17.4 ; avant, la ligne de repli affiche les mêmes copies.
Chrome 77+✓ Complet
Firefox 128+✓ Complet (avant : copies visibles, lues en plus du mot)
Safari 17.4+✓ Complet (avant : copies visibles, lues en plus du mot)
Edge 79+✓ Complet
Mobile iOS 17.4+✓ Complet
Android Chrome 77+✓ Complet
Sans clip-path (navigateurs très anciens), les copies couvrent tout le mot : le dédoublement reste visible, plus marqué. Sans animation CSS, les copies sont superposées au mot sans décalage : on voit un mot tricolore (cyan, blanc, magenta), fixe.
Le code
Copiez les trois blocs dans votre page. Aucune dépendance.
HTML
<div class="fx-0416-root">
<div class="ai-glitch-container">
<span class="ai-glitch-text" data-text="GLITCH">GLITCH</span>
</div>
</div>
CSS
.fx-0416-root,
.fx-0416-root *,
.fx-0416-root *::before,
.fx-0416-root *::after {
box-sizing: border-box
}
.fx-0416-root {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 250px;
overflow: hidden;
position: relative;
background: rgb(26, 26, 36);
color: rgb(255, 255, 255);
font-family: sans-serif;
}
.ai-glitch-container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #111;
}
.ai-glitch-text {
font-size: 2.5rem;
font-weight: 800;
color: #fff;
position: relative;
}
.ai-glitch-text::before,
.ai-glitch-text::after {
content: attr(data-text);
content: attr(data-text) / "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ai-glitch-text::before {
animation: aiGlitch1 2s infinite linear alternate-reverse;
clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
color: #0ff;
}
.ai-glitch-text::after {
animation: aiGlitch2 3s infinite linear alternate-reverse;
clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
color: #f0f;
}
@keyframes aiGlitch1 {
0% {
transform: translate(0);
}
20% {
transform: translate(-3px, 2px);
}
40% {
transform: translate(3px, -1px);
}
60% {
transform: translate(-2px, -2px);
}
80% {
transform: translate(2px, 1px);
}
100% {
transform: translate(0);
}
}
@keyframes aiGlitch2 {
0% {
transform: translate(0);
}
25% {
transform: translate(2px, -2px);
}
50% {
transform: translate(-3px, 1px);
}
75% {
transform: translate(1px, 2px);
}
100% {
transform: translate(0);
}
}
@media (prefers-reduced-motion: reduce) {
.ai-glitch-text::before {
animation: none;
transform: translate(-2px, 1px);
}
.ai-glitch-text::after {
animation: none;
transform: translate(2px, -1px);
}
}
JavaScript (fx-0416)
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Texte (HTML — contenu et data-text) |
GLITCH dans les deux |
Écrivez le même texte aux deux endroits. Si le texte change dans la page (traduction, contenu dynamique), recopiez-le d'une ligne : el.dataset.text = el.textContent. |
Couleurs des copies (CSS — color de ::before et ::after) |
cyan #0ff, magenta #f0f |
Rouge et cyan (#ff2a2a, #00e5ff) donnent un décalage façon 3D anaglyphe ; deux tons proches de la couleur du texte, un glitch discret. |
Hauteur des bandes (CSS — clip-path: polygon(…)) |
35 % en haut, 35 % en bas | 20 % / 20 % laisse plus de blanc au centre et un effet plus fin ; 50 % / 50 % colore tout le mot, sans bande blanche. |
Amplitude (CSS — positions de @keyframes aiGlitch1 et aiGlitch2) |
de 1 à 3 px | Doublez les valeurs (jusqu'à 6 px) pour un titre très grand ; au-delà, les copies se détachent du mot et la lecture se fatigue. |
Rythme (CSS — animation: aiGlitch1 2s …, aiGlitch2 3s …) |
2 s et 3 s, en aller-retour | Gardez deux durées différentes : égales, les copies bougent ensemble et le tremblement paraît mécanique. 0,3 s et 0,5 s donnent un grésillement nerveux. |
FAQ
Le découpage est-il aléatoire ?
Non : les deux bandes sont fixes (35 % en haut, 35 % en bas) et les positions du tremblement sont écrites dans les @keyframes. C'est le décalage entre deux cycles de durées différentes qui donne une impression d'irrégularité. Pour un vrai découpage au hasard, il faut un peu de JavaScript : toutes les 100 à 300 ms, écrivez dans deux variables CSS des bornes tirées au hasard et utilisez-les dans le clip-path des pseudo-éléments.
Pourquoi répéter le mot dans data-text ?
Les pseudo-éléments ne peuvent pas lire le texte d'un élément, seulement ses attributs : attr(data-text) est le seul moyen, en CSS pur, de leur donner le même mot. C'est aussi pourquoi les copies ne suivent pas un texte qui change : si votre site traduit ou remplace le mot, recopiez-le dans data-text au même moment.
Quelle différence avec AI Typo Morph (fx-0419) ?
AI Typo Morph change de mot : il brouille les lettres en caractères tirés au hasard, puis fixe le mot suivant lettre par lettre, avec un peu de JavaScript. Generative Glitch garde le même mot et le fait trembler en couleurs, en CSS pur. Choisissez Generative Glitch pour un titre fixe à l'allure « signal perturbé » ; AI Typo Morph pour révéler ou faire défiler des mots.
