ASCII fluid

Ce qui est inclus

Un moteur de rendu ASCII, 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 composant prend ce qui se trouve dans son balisage — une image, ou une ligne de texte — et le redessine à chaque image en glyphes ASCII sur un canvas. Le pointeur y dépose une traînée d’encre qui se diffuse à ses voisins et s’évapore, en éclairant les caractères qu’elle traverse. Trente styles changent la rampe de caractères et la façon dont les cellules bougent : pluie de type, blocs de terminal, tracé de contour, pluie Matrix, balayage radar, vortex.

Fonctionnalités

• Marche sans JavaScript — le sujet est un vrai <img> dans la page, cadré par la même variable que le rendu. Sans script, on voit l’image elle-même, au bon endroit et à la bonne taille.
• Une variable pour l’échelle — --af-glyph-size commande le glyphe, la cellule, le panneau de réglages et sa typographie. Tout suit ensemble.
• Trente styles — chacun avec sa rampe de caractères, son déplacement par cellule et son corps de glyphe. Un attribut data-mode suffit à changer.
• Panneau de réglages optionnel — posé sur le canvas avec data-controls="show". C’est un <details> et des contrôles natifs : il s’ouvre et se règle entièrement au clavier.
• Le sujet peut être du texte — le moteur relit sa police, son corps, son interlettrage et son interligne dans la feuille de style. Changer la typographie change le rendu.
• Il se tait quand il faut — la boucle s’arrête hors de l’écran, se fige sous prefers-reduced-motion, et suit Canvas / CanvasText en couleurs forcées.

Le poser dans une page

Deux fichiers à charger, puis le balisage habituel :

<link rel="stylesheet" href="ascii-fluid.css">
<script src="ascii-fluid.js" defer></script>

<figure class="ascii-fluid" data-mode="normal" data-density="10">
  <div class="ascii-fluid__source">
    <img src="logo.svg" alt="Notre logo" width="320" height="320">
  </div>
</figure>

La classe suffit, le composant s’installe au chargement — y compris sur un bloc inséré plus tard. Les réglages qui sont des nombres sont des attributs data-* (density, contrast, trail, fill, pointer) ; tout ce qui est une couleur, une longueur ou une durée est une variable CSS, à poser dans votre feuille de style.

Ce qu’il faut savoir

• La composition dépend de l’appareil. Le moteur se donne un budget de cellules — moins sur une machine modeste ou tactile — et agrandit la grille pour s’y tenir. Deux visiteurs ne voient donc pas exactement le même quadrillage. C’est le comportement de la référence ; data-max-cells l’épingle si la reproductibilité compte plus que le confort.
• La traînée naît du mouvement, pas de la présence. Un curseur immobile au-dessus du composant n’allume rien. C’est volontaire : le navigateur émet un déplacement de pointeur de sa propre initiative quand du contenu apparaît sous le curseur, et une traînée surgissait dans le coin de pages que personne n’avait touchées.
• La main passe avant la dérive. Avec data-motion="drift", l’encre se promène toute seule — mais dès qu’on bouge le pointeur, elle le suit. La dérive reprend après --af-drift-resume, une seconde et demie par défaut. La référence, elle, réécrit la position du pointeur à chaque image : la souris n’y change rien.
• Au doigt, la page défile toujours. La référence bloque le défilement sur toute la hauteur de l’effet ; ici le geste vertical reste à la page. data-touch="lock" rend le comportement d’origine.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site, et n’utilise jamais innerHTML : le panneau de réglages est construit nœud par nœud.
• Le dessin vient d’ailleurs. Les proportions et l’algorithme reprennent ceux d’un composant Framer publié par 1042 Studio, relevés image par image sur le site en ligne. Le rendu est identique au pixel près sur cinq largeurs ; le code, lui, est réécrit — sans React, sans style en ligne, avec le repli, le clavier et les préférences système que l’original n’a pas.