Backgrounds✨ Premium
Storm Veil
Un ciel d'orage complet en canvas : trois nappes de nuages en parallaxe, une pluie fine, et des éclairs générés par déplacement récursif du milieu — sept niveaux de subdivision, rendus en trois passes pour obtenir le halo, le corps et le cœur incandescent. Un clic déclenche la foudre.
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
L'éclair est construit par déplacement récursif du milieu : on part d'un segment, on décale son point central perpendiculairement d'une valeur aléatoire, et on recommence sur les deux moitiés. Sept niveaux de subdivision sur le tronc principal donnent une trajectoire brisée qui ne se répète jamais — c'est l'algorithme historique de génération d'éclairs, et il reste le plus convaincant.
Le tracé est rendu en trois passes superposées : d'abord un halo large et très translucide qui simule la diffusion dans l'air humide, puis le corps de la décharge, enfin un cœur fin et surexposé. Sans ces trois couches un éclair ressemble à un trait blanc ; avec elles, il éclaire son environnement.
Derrière, trois nappes de nuages composées de dégradés radiaux défilent en parallaxe : la couche haute est lente, sombre et riche en volutes, la couche basse plus rapide et plus claire. La pluie fine passe par-dessus. Le flash lui-même n'est pas peint sur le canvas mais appliqué à un voile CSS séparé, ce qui permet d'en contrôler l'intensité et la fréquence indépendamment du rendu.
Accessibilité
- Un plafond strict d'un flash par seconde est appliqué. Ce n'est pas un réglage esthétique : les contenus qui clignotent plus de trois fois par seconde peuvent déclencher des crises chez les personnes photosensibles, et cette limite garde une marge de sécurité large.
- Sous
prefers-reduced-motion: reduce, la scène se fige : nuages arrêtés, pluie suspendue, plus aucun éclair. Le ciel d'orage reste visible comme image fixe, ce qui préserve l'ambiance sans imposer ni mouvement ni flash. - Une région
aria-live="polite"annonce discrètement les éclairs aux lecteurs d'écran, sans interrompre la lecture en cours. Le canvas, lui, est retiré de l'arbre d'accessibilité et le conteneur porte unrole="img"décrivant la scène. - Le voile de flash est un élément distinct du canvas : vous pouvez en baisser l'opacité maximale, voire le neutraliser complètement, sans toucher au rendu des éclairs eux-mêmes. C'est le bon levier si le contexte demande de la prudence.
Compatibilité navigateur
Canvas 2D (tracés, dégradés radiaux, composition), ResizeObserver pour suivre les changements de taille, devicePixelRatio pour la netteté, plus requestAnimationFrame et matchMedia. Aucune bibliothèque, aucune image, aucun son.
Chrome 64+✓ Complet
Edge 79+✓ Complet
Firefox 69+✓ Complet
Safari 13.1+✓ Complet
Safari iOS 13.4+✓ Complet
Chrome Android 64+✓ Complet
Sans ResizeObserver la scène s'affiche mais ne se redimensionne plus : ajoutez un écouteur resize si vous devez couvrir des navigateurs très anciens. Sans JavaScript, le canvas reste vide — prévoyez un dégradé de ciel sombre en CSS sur .stv-scene.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
index.html — structure
<div class="stv-scene" id="stvScene"
role="img"
aria-label="Fond orage animé avec éclairs procéduraux — cliquez pour déclencher un éclair">
<!-- Nuages, pluie et éclairs sont peints ici -->
<canvas class="stv-canvas" id="stvCanvas" aria-hidden="true"></canvas>
<!-- Voile plein écran : c'est lui qui « flashe », pas le canvas.
Séparer les deux permet de plafonner la fréquence des flashs. -->
<div class="stv-flash" id="stvFlash" aria-hidden="true"></div>
<!-- Annonce discrète pour les lecteurs d'écran, sans interrompre la lecture -->
<div class="stv-sr" aria-live="polite" aria-atomic="true" id="stvSR"></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 |
|---|---|---|
| Niveaux de subdivision du tronc | 7 | Détail de la trajectoire. 4 donne un éclair anguleux et net, 7 une brisure crédible, 10 une ligne si découpée qu'elle redevient floue à l'écran — sans gain visible mais avec un coût réel. |
| Amplitude du déplacement | proportionnelle à la longueur du segment | Nervosité de l'éclair. Une amplitude faible donne une décharge presque verticale ; une amplitude forte, une trajectoire très erratique qui traverse la scène en zigzag. |
FADE — durée d'extinction |
460 ms | Temps que met l'éclair à disparaître. En dessous de 200 ms la décharge paraît sèche et électrique ; au-delà de 800 ms elle traîne et perd sa violence. |
| Intensité maximale du voile | flash plein | Opacité de pointe du voile CSS. C'est le premier réglage à baisser pour un contexte prudent : l'éclair reste visible sur le canvas, mais la page cesse de blanchir. |
| Intervalle entre deux frappes | aléatoire, première frappe rapide | Rythme de l'orage. Un intervalle court donne un orage violent et permanent ; un intervalle long, une tension d'attente. Le plafond d'un flash par seconde reste appliqué quoi qu'il arrive. |
| Densité et vitesse des nappes de nuages | 3 couches, lente/haute/sombre à rapide/basse/claire | Profondeur de la scène. Écarter les vitesses accentue la parallaxe ; les rapprocher aplatit le ciel. La couche haute porte le plus de volutes. |
| Densité de la pluie | fine | Nombre et longueur des traits de pluie. Une pluie dense masque partiellement les nuages et referme la scène ; une pluie rare la laisse respirer. |
FAQ
La question est légitime et l'effet la prend au sérieux. Un plafond d'un flash par seconde est appliqué en dur, là où le seuil de risque commence vers trois par seconde : la marge est large. S'ajoute le respect de
prefers-reduced-motion, qui supprime totalement les éclairs. Si votre contexte est sensible — public jeune, santé, service public — baissez en plus l'opacité maximale du voile : vous garderez la décharge sur le canvas sans faire blanchir la page.Pour pouvoir le contrôler séparément. Si le flash faisait partie du rendu, plafonner sa fréquence ou baisser son intensité obligerait à toucher au moteur de dessin. En le sortant sur un voile CSS, l'éclair et l'éclairement deviennent deux réglages indépendants : vous pouvez garder des décharges spectaculaires et un éclairement discret, ce qui est exactement ce que demande la plupart des contextes réels.
Oui. Le déplacement récursif du milieu tire un décalage aléatoire à chaque subdivision : sur sept niveaux, cela fait plus de cent points tirés indépendamment pour le seul tronc. La probabilité de voir deux fois la même trajectoire est nulle en pratique. C'est le principal avantage sur une séquence pré-rendue, qui trahit sa boucle dès la troisième répétition.
