Matrix Rain
Pluie de code Matrix entièrement en CSS animation + DOM : des colonnes de katakana et de chiffres dégringolent en boucle sur fond noir, sans canvas ni requestAnimationFrame.
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. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'animation de chute est entièrement pilotée par @keyframes matrixFall qui fait glisser chaque .matrix-column de top: -100% à top: 100%. Aucun requestAnimationFrame n'est lancé pour le mouvement — le navigateur gère la progression à sa fréquence native, ce qui libère le thread JS et rend l'effet peu coûteux en CPU.
writing-mode: vertical-rl et text-orientation: upright empilent les glyphes verticalement, chacun affiché debout. Associé à font-family: monospace, chaque caractère occupe une cellule de largeur fixe : la grille de colonnes est parfaitement alignée sans calcul de position.
Chaque colonne s'auto-recycle via l'événement animationend : à la sortie du viewport, l'élément se supprime lui-même (remove()) et en crée un nouveau à une position horizontale, une durée et une opacité aléatoires. Le pool de colonnes est ainsi constant sans accumulation de nœuds DOM.
Trois variables indépendantes simulent la profondeur en 2D : position horizontale (left: 0–100%), durée de chute (3–8 s — plus court = plus proche), opacité (0,3–1,0). Aucune transformation 3D ni Z-ordering n'est nécessaire. Les caractères sont tirés d'un tableau chars mêlant chiffres (0–9) et katakana (ア…ン), à définir avant l'initialisation.
Accessibilité
- prefers-reduced-motion : absent du code. L'animation tourne quels que soient les réglages système — à compenser côté intégrateur avec une media query
(prefers-reduced-motion: reduce)qui masque ou arrête les colonnes. - Le
.matrix-containerne porte niaria-hidden="true"nirole="presentation": le texte des colonnes sera lu par les lecteurs d'écran si le focus entre dans le conteneur. Ajouteraria-hidden="true"lors de l'intégration. - Contraste des caractères :
#0f0(vert pur) sur#000(noir) → ratio ≈ 15,3:1, bien au-delà du seuil WCAG AAA (7:1). L'effet de lueur (text-shadow) renforce encore la lisibilité. - Aucun élément interactif clavier dans l'effet lui-même — pas de piège de focus. Si du contenu CTA est superposé, il reste dans le flux de tabulation normal.
- Les colonnes en mouvement continu peuvent déclencher de l'inconfort vestibulaire chez certains utilisateurs : limiter l'usage plein-écran sans alternative statique.
Compatibilité navigateur
Repose sur CSS animations, writing-mode vertical et la manipulation DOM standard — supportés partout sans polyfill.
Si CSS animations ne sont pas supportées, le <code>.matrix-container</code> s'affiche comme un rectangle noir vide — aucune erreur JS. La page reste utilisable.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="matrix-container" id="matrixContainer">
<!-- Les .matrix-column sont injectées et recyclées par le JS.
Le conteneur doit avoir position:relative, overflow:hidden
et une hauteur définie (px ou vh). -->
</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 |
|---|---|---|
| color (CSS .matrix-column) | #0f0 | Couleur des caractères. Remplacez par #00d4ff (cyan), #f43f5e (rouge), #f59e0b (ambre) pour décliner l'ambiance. |
| text-shadow (CSS .matrix-column) | #0f0 0 0 5px | Halo lumineux. Augmentez le rayon (ex. 0 0 12px) pour un effet néon prononcé, réduisez à 0 0 2px pour un rendu plus discret. |
| font-size (CSS .matrix-column) | 14px | Taille des caractères et donc densité des colonnes. 10 px = colonnes étroites serrées, 20 px = colonnes larges aérées. |
| background (CSS .matrix-container) | #000 | Fond du conteneur. Passez à rgba(0,0,0,0.85) pour laisser transparaître un fond parent, ou à #0a0a1a pour un noir bleuté. |
| animationDuration (JS) | 3 + 5 * Math.random() + "s" | Plage de durée de chute (3–8 s). Resserrez à 1 + 2*Math.random() pour un flux rapide, 6 + 4*Math.random() pour un flux lent et planant. |
| opacity (JS) | .3 + .7 * Math.random() | Plage d'opacité des colonnes (0,3–1,0). Réduisez le plancher à 0,1 pour un effet très subtil en arrière-plan. |
| chars (JS, constante à définir) | katakana + 0–9 | Tableau de caractères à échantillonner. Remplacez par des lettres latines, des symboles binaires ("01".split('')) ou des emoji pour personnaliser l'identité visuelle. |
| n (JS, longueur de colonne) | 10 + Math.floor(20 * Math.random()) | Nombre de caractères par colonne (10–30). Augmentez le max (ex. 40) pour des colonnes plus longues qui dépassent la hauteur du conteneur. |
FAQ
requestAnimationFrame manuel. Le navigateur optimise les animations déclarées en CSS sur le compositor thread, sans bloquer le JS. Contrepartie : pas de contrôle pixel-par-pixel (fondu progressif de la tête de colonne, variation de teinte sur la longueur) qu'un canvas permettrait.getElementById('matrixContainer') — un seul élément par page. Pour plusieurs instances, écrivez une fonction factory qui prend un élément DOM en paramètre (ex. function createColumnFor(container)) et fermez-la sur ce conteneur plutôt que sur l'id global. La CSS (.matrix-column, @keyframes matrixFall) est partagée sans conflit.animationDelay négatif lors de la création : t.style.animationDelay = -(Math.random() * dur) + 's' (où dur = la durée en secondes). Un délai négatif fait démarrer l'animation en milieu de course — les colonnes apparaissent instantanément à des hauteurs variées au lieu de toutes partir du haut en même temps.
