Generative Flow Field
200 particules qui suivent un champ de directions tiré d'un bruit lissé, lequel dérive lentement : le canvas n'est jamais effacé, seulement voilé à 5 % par image, et les particules laissent de longs fils soyeux qui dessinent les lignes du courant — canvas 2D net sur Retina, fils déjà tracés au premier affichage, boucle arrêtée hors écran, image fixe si l'utilisateur réduit les animations. Un algorithme génératif, sans intelligence artificielle.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Liquid comprend 31 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .fx-0412-root fait 300 px de haut sur toute la largeur ; le canvas s'y cale (display: block, 100 % × 100 %), jamais l'inverse. Sa taille interne vaut la taille affichée multipliée par devicePixelRatio et le dessin se fait en pixels CSS (setTransform) : mesuré à densité 2, 1280 × 600 pour 640 × 300 affichés. Un ResizeObserver suit le cadre ; la hauteur reste à 300 px après 20 redimensionnements de suite (mesuré dans Chromium 151, Firefox 153 et WebKit 26).
Le champ vient d'un bruit de valeur : une valeur pseudo-aléatoire est tirée à chaque nœud d'une grille (fract(sin(12.9898 x + 78.233 y) × 43758.5453)), puis lissée entre les nœuds par une courbe en S. La particule lit ce bruit à sa position × 0,005 (une maille tous les 200 px) et le multiplie par 4π : elle prend cette direction et avance de 0,5 à 2 px par image selon sa vitesse propre. Le temps s'ajoute à la coordonnée verticale du bruit (+0,003 par image) : le champ glisse et se recompose lentement, sans jamais se répéter à l'identique. Une particule qui sort du cadre renaît ailleurs au hasard ; chacune garde sa teinte, entre 240 et 300 (indigo à magenta), en points de 1,5 px.
Les fils naissent du voile : à chaque image, un rectangle rgba(10, 10, 15, 0.05) couvre tout le canvas, si bien qu'un point s'efface en une soixantaine d'images. La couleur du voile est celle du fond, sinon le cadre vire peu à peu à cette couleur. Redimensionner un canvas l'efface : le fond est repeint, les particules hors du nouveau cadre sont replacées, et au premier affichage 40 pas sont rejoués d'un coup pour que les fils soient déjà là. La boucle requestAnimationFrame s'arrête quand un IntersectionObserver voit le canvas sortir de l'écran (mesuré : 0 image par seconde hors écran) et repart à son retour.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le script calcule 120 pas sans les montrer et affiche l'image obtenue, des fils figés ; aucune boucle. Mesuré dans les trois moteurs : 0 % de pixels changés en 500 ms, fils visibles sur toute la surface. - Rôle décoratif : le canvas ne porte aucune information. Posez votre texte par-dessus sur un fond assez opaque (un dégradé sombre comme dans les exemples) : les fils clairs passent partout et peuvent couper une ligne fine.
- Mouvement de fond : 20 % des pixels changent en 500 ms, en continu. Sur une page de lecture longue, réservez l'effet à un bandeau ou ralentissez les particules (voir Personnaliser).
- Vitesse liée à l'écran : tout est compté par image ; sur un écran à 120 Hz, les particules vont deux fois plus vite qu'à 60 Hz.
Compatibilité navigateur
Canvas 2D + 2,7 Ko de JavaScript, aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même champ, mêmes fils, taille interne doublée à densité 2, hauteur stable, boucle à l'arrêt hors écran, image fixe sous mouvement réduit. Coût mesuré par image : 0,2 ms de JavaScript dans Chromium, 2 à 3 ms dans Firefox (sans accélération graphique) ; les 40 pas du premier affichage prennent environ 10 ms dans Chromium et jusqu'à 100 ms dans Firefox, une seule fois. ResizeObserver existe depuis Chrome 64, Firefox 69 et Safari 13.1.
Sans JavaScript, le cadre reste noir bleuté (#0a0a0f), sans fils. Sans IntersectionObserver, la boucle tourne aussi hors écran ; sans ResizeObserver, le canvas suit le redimensionnement de la fenêtre seulement.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0412-root">
<div class="ai-flow-field-container">
<canvas class="ai-flow-canvas" width="393" height="280"></canvas>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Nombre de particules (JS — length: 200) |
200 | 400 donne un tissage plus dense ; le coût par image grandit d'autant. Sous 80, les fils deviennent épars. |
Longueur des fils (JS — rgba(10, 10, 15, 0.05)) |
voile de 5 % par image | 0,02 allonge les fils (le cadre se remplit), 0,15 donne de courtes comètes. Gardez la même couleur que le fond de .fx-0412-root et que le #0a0a0f repeint au redimensionnement. |
Teintes (JS — hue: 240 + 60 * Math.random()) |
de 240 à 300 (indigo à magenta) | 185 + 35 * Math.random() donne du cyan au bleu ; 30 + 20 * Math.random() des fils dorés. Saturation et clarté dans hsla(…, 80%, 65%, 0.8). |
Vitesse (JS — speed: .5 + 1.5 * Math.random()) |
0,5 à 2 px par image | Divisez par deux pour un courant paresseux, idéal derrière du texte. |
Échelle des tourbillons (JS — .005 * n.x, .005 * n.y) |
0,005 : une maille du bruit tous les 200 px | 0,01 donne des tourbillons deux fois plus serrés, 0,0025 de grandes nappes presque droites. |
Dérive du champ (JS — i += .003) |
0,003 par image | 0 fige le champ (les fils finissent par tracer des lignes fixes), 0,01 le fait changer en quelques secondes. |
Hauteur (CSS — .fx-0412-root { height: 300px }) |
300 px | Le canvas suit ; au premier affichage, les fils sont recalculés pour la nouvelle taille. |
FAQ
h par une bibliothèque de bruit : le reste du code ne change pas.
