Typewriter Glitch
Machine à écrire lettre par lettre avec bursts de glitch aléatoires — échanges de caractères et scintillements qui s'autocorrigent à chaque frappe, texte en boucle.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Texte comprend 56 effets, dont 4 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le texte de l'attribut data-text est tapé caractère par caractère via des setTimeout enchaînés (délai aléatoire 80–180 ms par frappe). Un curseur clignotant (|) est géré indépendamment par un setInterval à 530 ms qui appende ou retire le | du textContent de l'élément — les deux minuteries coexistent sans se bloquer.
À chaque frappe, une probabilité de 25 % déclenche un burst de glitch : 3 à 6 frames espacées de 50 ms parcourent les caractères déjà tapés et remplacent aléatoirement 35 % d'entre eux par un symbole du set !@#$%^&*()_+-=[]{}|;:<>?/~`0123456789. Pendant le burst, l'opacité de l'élément oscille entre 1 et 0,6 pour simuler un scintillement vidéo. À la fin du burst, le texte correct est restauré avant de passer à la lettre suivante.
À la fin du texte, l'animation marque une pause de 2 000 ms puis repart de l'index 0 — boucle infinie. L'ensemble est un IIFE vanilla : zéro dépendance, zéro canvas, zéro animation CSS. La police Courier New est une police système — aucun chargement réseau requis.
Accessibilité
- Pas de prefers-reduced-motion dans le code livré : l'animation tourne quel que soit le réglage OS. Pour les utilisateurs sensibles, ajoutez manuellement
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;en tête de l'IIFE. - L'élément expose son contenu via
textContent— lisible par les lecteurs d'écran, mais les mutations rapides pendant un burst de glitch peuvent déclencher des annonces parasites. Enveloppez dans un<span aria-live="off">pour les supprimer. - Contraste élevé : texte blanc (
#fff) sur fond sombre (#0a0a0f) — ratio ≈ 21:1, WCAG AAA. - Aucune interaction clavier ni zone focusable : effet purement décoratif. Si utilisé comme titre principal, ajoutez
aria-labelavec le texte final statique. - La police
Courier Newest une police système omniprésente — pas de FOUT, pas de requête réseau.
Compatibilité navigateur
Utilise uniquement textContent, setInterval et setTimeout — aucun Canvas, aucune animation CSS, aucune API récente requise.
Sans JavaScript, l'élément affiche le caractère <code>|</code> initial (contenu statique du DOM) — la page reste lisible, aucune erreur fatale.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="kt-text kt-typewriter-glitch" id="typewriter1" data-text="VOTRE TEXTE_">|</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| data-text | "TYPEWRITER_" | Texte à taper — modifiez cet attribut HTML pour changer le contenu sans toucher au JS. |
| var fullText (JS) | "TYPEWRITER_" | Fallback JS si data-text est absent. Initialisez cette variable directement dans le code. |
| setTimeout(80 + Math.random() * 100) (JS) | 80–180 ms/car. | Vitesse de frappe. Remplacez par setTimeout(typeNext, 120) pour une cadence constante, ou réduisez à 40 ms pour un rendu rapide. |
| Math.random() < 0.25 (JS) | 25 % | Probabilité de déclenchement d'un burst de glitch par caractère tapé. Montez à 0,50 pour un effet plus chaotique, descendez à 0,05 pour un rendu quasi propre. |
| Math.random() < 0.35 (JS) | 35 % | Taux de corruption des caractères pendant un burst. 0,10 = glitch subtil, 0,70 = texte quasi illisible. |
| setInterval(530) (JS) | 530 ms | Vitesse de clignotement du curseur. 300 ms = rapide, 800 ms = lent. Modifiez la valeur dans le setInterval. |
| .kt-text font-size (CSS) | 2.2rem | Taille du texte. Augmentez à 4–6rem pour un usage hero plein écran. |
| .kt-typewriter-glitch font-family (CSS) | "Courier New", monospace | Police. Remplacez par Georgia, Arial ou une police chargée localement pour changer l'esthétique. |
| setTimeout(…, 2000) (JS — boucle) | 2 000 ms | Délai avant redémarrage après le texte complet. Augmentez à 5 000 ms pour une pause longue, ou supprimez l'appel pour stopper après une seule passe. |
FAQ
getElementById unique. Pour plusieurs instances, extrayez la logique en fonction paramétrée : function initTypewriter(id, text) { var el = document.getElementById(id); var fullText = text; … typeNext(); } puis appelez-la pour chaque élément avec son id et son texte.setTimeout(function() { idx = 0; typeNext(); }, 2000) dans la branche finale de typeNext() — l'animation s'arrête alors sur le curseur clignotant une fois le texte complet affiché.setInterval du curseur et remplacez border-right: 3px solid rgba(255,255,255,.7) par border-right: none dans .kt-typewriter-glitch. Dans typeNext(), retirez aussi les concaténations (cursorVisible ? '|' : '').
