Dot matrix 404

Ce qui est inclus

Un afficheur matriciel dans deux fichiers : une feuille de style et un script. Aucune dépendance, aucune étape de build, aucune requête externe — on les copie dans un projet et ça marche.

Le message n’est pas une image : c’est du texte, dans la page. Le script le lit, le convertit en pastilles et le peint sur une toile. Le nœud de texte reste en place — sélectionnable, traduisible, lu par un lecteur d’écran, et affiché même si le script ne charge jamais.

Fonctionnalités

• Les pastilles reculent sous la souris — un recul radial, maximal sous le pointeur, éteint treize cellules plus loin. Relevé sur la référence à quatre positions de pointeur, puis ajusté : 0,05 px d’écart.
• Lisible sans JavaScript — la feuille de style fait passer le texte à travers un masque de points et pose la grille derrière. La page reste celle qu’on attend.
• Une variable pour l’échelle — tout dérive de la cellule, qui vaut la largeur divisée par --dm-columns. Les rangs suivent la hauteur tout seuls.
• Réglé depuis le CSS — grille, teintes, raréfaction des bords, poussière et durées sont des variables. Le script les relit : rien à modifier dedans.
• Fonte matricielle incluse — les dix chiffres, l’espace et le tiret. On ajoute un caractère en lui donnant ses douze lignes, sans toucher au reste.
• Rendu stable — la raréfaction des bords est tirée d’une graine : même dessin à chaque chargement, et après un redimensionnement.
• Trois variantes — page sombre, sans voile, et grille dense pour une petite boîte.

Le poser dans une page

Deux fichiers à charger, puis le balisage habituel :

<link rel="stylesheet" href="dot-matrix-404.css">
<script src="dot-matrix-404.js" defer></script>

<div class="dot-matrix" data-dot-matrix>
  <p class="dot-matrix__text">404</p>
</div>

L’attribut data-dot-matrix suffit, le composant s’installe au chargement. Remplacez le <p> par un <h1> si le message est le titre de la page.

Ce qu’il faut savoir

• La toile ne se repeint que si quelque chose bouge. Sans pointeur à portée, elle est peinte une fois par changement de taille et ne coûte plus rien par image. Le recul des pastilles est écouté sur la fenêtre et non sur l’élément, pour qu’il s’amorce pendant que le pointeur approche : sinon la grille sursaute au franchissement du bord.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site et n’utilise jamais innerHTML. Vérifié en servant le dossier en HTTP avec l’en-tête, pas en le supposant.
• Ce n’est pas un contrôle. Rien n’est focusable, le composant n’entre pas dans l’ordre de tabulation et n’intercepte aucune touche.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, relevées par analyse d’image à sept largeurs. Le code, lui, est original : son implémentation n’a jamais été lue.