Note · Canvas
Un champ de flux en canvas 2D, 60 fps, zéro dépendance
La réponse courte : pas besoin de WebGL ni de bibliothèque pour un fond génératif spectaculaire. Un champ de vecteurs en sinusoïdes, un tableau de particules, un voile translucide pour les traînées : environ 120 lignes de JavaScript vanilla suffisent, à condition de respecter trois règles de performance.
1. Le champ : du faux bruit qui ne coûte rien
Le bruit de Perlin est l'outil classique des champs de flux, mais il exige une implémentation ou une dépendance. Trois sinusoïdes déphasées donnent un champ continu, organique et animable pour trois appels à Math.sin :
function angle(x, y, t) {
return Math.sin(x * S * 1.3 + t * 0.34) * 1.5
+ Math.cos(y * S * 1.9 - t * 0.27) * 1.5
+ Math.sin((x + y) * S * 0.7 + t * 0.16) * 1.1;
}La somme sort de l'intervalle d'un tour complet : tant mieux, le champ s'enroule et crée des tourbillons. Le paramètre t fait dériver l'ensemble lentement, pour que l'image ne soit jamais deux fois la même.
2. Les traînées : ne jamais effacer
Le secret visuel du champ de flux tient en une ligne : au lieu d'effacer le canvas à chaque image, on le recouvre d'un voile de la couleur du fond, presque transparent. Chaque particule dessine un segment entre sa position précédente et la nouvelle ; les segments passés s'estompent progressivement sous les voiles.
ctx.fillStyle = 'rgba(10, 12, 18, 0.075)';
ctx.fillRect(0, 0, w, h);3. Les trois optimisations qui comptent
- Plafonner le devicePixelRatio à 1,5. Sur un écran 4K, passer de 2 à 1,5 divise presque par deux les pixels à remplir, sans différence visible sur un fond animé.
- Ne dessiner que si on est regardé. Un
IntersectionObservercoupe la boucle quand le hero sort du viewport,visibilitychangela coupe quand l'onglet passe en arrière-plan. Un fond d'écran qui tourne dans un onglet caché est une insulte à la batterie. - Zéro allocation dans la boucle. Les particules sont mutées en place, jamais recréées ; pas d'objets temporaires, pas de garbage collection en pleine animation.
La dégradation propre, non négociable
Le canvas est décoratif (aria-hidden), le titre est du vrai texte HTML. Sans JavaScript ou avec prefers-reduced-motion, un dégradé CSS prend la place. Le spectaculaire est un bonus, jamais une condition : c'est ce qui permet d'afficher un fond génératif et de garder des Core Web Vitals verts.