Backgrounds✨ Premium
Topographic Drift
Une carte topographique qui dérive lentement, dessinée pixel par pixel : un champ de bruit fBm à 4 octaves, découpé en 12 bandes d'altitude dont on ne garde que les frontières. Le curseur soulève une colline sous le terrain, et les lignes de niveau se resserrent autour comme sur une vraie carte d'état-major.
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. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
🎈
🎊
✨
Comment ça marche
Un bruit de valeur est sommé sur 4 octaves (
fbm) pour produire un champ d'altitude continu entre 0 et 1. Chaque pixel du canvas interroge ce champ à sa position, décalée par un offset qui avance de 7,2 × 10⁻⁵ unité par milliseconde : c'est la dérive.
L'altitude est multipliée par le nombre de bandes (12) ; on ne conserve que les pixels dont la partie fractionnaire tombe sous LINE_THR (0,091). Autrement dit : on ne dessine que les frontières entre paliers — les lignes de niveau. Une bande sur quatre est tracée en teinte claire, ce sont les courbes maîtresses.
Quand le pointeur entre dans la scène, un dôme quadratique de rayon 190 px est ajouté au champ (HILL_AMP = 0,20). Comme les lignes suivent les frontières de bandes, cette bosse les fait naturellement se resserrer en anneaux concentriques. La position du curseur est lissée à 4,8 % par image, ce qui évite tout à-coup.Accessibilité
- Sous
prefers-reduced-motion: reduce, la dérive s'arrête et la colline du curseur n'est plus calculée : le terrain reste affiché, net et immobile. Le fond garde sa fonction décorative sans imposer de mouvement. - Le canvas porte
aria-hidden="true"et le conteneur unrole="img"avec unaria-labeldescriptif : un lecteur d'écran annonce une image et sa nature, jamais une suite de pixels. - Aucune information n'est portée uniquement par ce fond. Les lignes de niveau sont un décor, pas une donnée : rien de ce qu'un visiteur doit comprendre n'y est encodé.
- Les trois palettes sont construites avec un fond très sombre (luminance sous 8 %) et des lignes claires. Vérifiez malgré tout le contraste si vous posez du texte : les courbes maîtresses de la palette « slate » montent à un gris clair qui peut concurrencer un texte secondaire.
Compatibilité navigateur
Canvas 2D avec createImageData et écriture directe dans le tableau de pixels, plus requestAnimationFrame et matchMedia. Le bruit est calculé en JavaScript pur — aucune bibliothèque, aucun WebGL, aucun shader.
Chrome 60+✓ Complet
Edge 79+✓ Complet
Firefox 55+✓ Complet
Safari 11+✓ Complet
Safari iOS 11+✓ Complet — laisser
STRIDE à 2 ou 3Chrome Android 60+✓ Complet
Sans JavaScript le canvas reste vide : prévoyez une couleur de fond sur .tpd-scene pour que la section garde son allure. La vignette CSS, elle, s'affiche dans tous les cas et suffit à donner de la profondeur.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
index.html — structure
<div class="tpd-scene" id="tpdScene"
role="img"
aria-label="Fond topographique animé — lignes de niveau qui dérivent">
<!-- Le canvas porte tout le rendu ; il est décoratif, d'où aria-hidden -->
<canvas class="tpd-canvas" id="tpdCanvas" aria-hidden="true"></canvas>
<!-- Vignette CSS : assombrit les bords pour que le texte posé au centre reste lisible -->
<div class="tpd-vignette" aria-hidden="true"></div>
</div>
🔒 Débloquer le code complet — à partir de 2,99 € le 1er mois
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 |
|---|---|---|
numBands — nombre de paliers d'altitude |
12 | Densité des lignes de niveau. 6 donne un relief doux et aéré, 24 une carte très serrée. Au-delà de 30 les lignes se touchent et le motif redevient un aplat. |
FREQ — fréquence du champ de bruit |
3.6 | Échelle du terrain. Une valeur basse (1,5) donne quelques grands massifs ; une valeur haute (7) un paysage accidenté et répétitif. C'est le réglage qui change le plus l'identité du fond. |
DRIFT — vitesse de dérive |
7.2e-5 par ms | Avance du champ dans le temps. Doublez pour un survol perceptible, divisez par cinq pour un mouvement qu'on ne remarque qu'en revenant sur la page. |
HILL_AMP et HILL_R — colline au curseur |
0.20 et 190 px | Hauteur et rayon du dôme suivant le pointeur. HILL_AMP à 0 désactive l'interaction ; à 0,40 la colline devient un pic entouré d'anneaux très serrés. |
MAJOR_N — périodicité des courbes maîtresses |
4 | Une bande sur N est tracée en teinte claire et plus opaque. 5 ou 10 sont les conventions cartographiques usuelles ; 2 donne un rendu zébré plus graphique que réaliste. |
STRIDE — taille des blocs de pixels |
2 | Le levier de performance. Le rendu calcule un pixel sur STRIDE puis remplit le bloc. Passer de 2 à 3 divise le coût par plus de deux pour une perte de netteté à peine visible. |
PAL — palettes |
slate, teal, sable | Chaque palette donne trois couleurs : fond, ligne mineure, courbe maîtresse. Ajouter une entrée suffit à créer votre propre thème sans toucher au moteur. |
FAQ
Parce que la contrainte réelle ici n'est pas la puissance mais la robustesse. Un shader WebGL serait plus rapide, mais il ajoute un contexte graphique à gérer, des cas de perte de contexte, et un échec silencieux sur les machines où l'accélération est désactivée. Avec
STRIDE à 2, le canvas 2D tient largement 60 images par seconde sur un ordinateur portable courant, et il fonctionne partout, sans exception.Non, pas de façon perceptible. Le champ dérive en diagonale dans un bruit défini sur tout le plan : il ne boucle pas. En pratique, il faudrait laisser la page ouverte plusieurs heures pour revenir dans une zone déjà vue, et le terrain aurait de toute façon changé d'aspect entre-temps.
Oui, à deux conditions. Gardez la vignette : elle assombrit les bords et stabilise le fond derrière un titre centré. Et évitez de placer le texte là où les courbes maîtresses se concentrent — ce sont les seules lignes assez claires pour gêner. En cas de doute, baissez l'opacité globale du canvas à 0,6 : le motif reste lisible comme texture et cesse de concurrencer le texte.
