Backgrounds✨ Premium
Rain on Glass
De la pluie sur une vitre, simulée pour de vrai : chaque goutte agit comme une lentille convexe et affiche le fond inversé et agrandi, glisse par à-coups selon une physique de collé-glissé, fusionne avec ses voisines et laisse derrière elle un ruban humide qui déforme l'arrière-plan puis s'évapore.
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 fond de nuit urbaine — dégradé ciel/sol plus une quinzaine de taches lumineuses floues — est peint une seule fois sur un canvas hors écran. Tout le reste s'appuie dessus : c'est ce qui rend la réfraction crédible sans coûter cher, puisque le fond n'est jamais redessiné.
Chaque goutte est un disque de découpe dans lequel on redessine ce fond, zoomé puis retourné horizontalement par un
translate suivi d'un scale(-1, 1). C'est le comportement optique d'une lentille convexe, et c'est ce détail — l'image inversée — qui distingue une vraie goutte d'un simple cercle flou. S'ajoutent un reflet radial en haut à gauche, un liseré blanc sur le bord supérieur et une ombre en croissant en bas.
La descente suit un modèle de collé-glissé : une goutte reste accrochée jusqu'à dépasser un seuil de masse légèrement aléatoire, puis file, peut se ré-accrocher, et dépose des micro-gouttelettes dans son sillage. Sa trace est tracée en blanc sur une carte d'humidité qui sert ensuite de masque pour composer le fond décalé et étiré : le verre reste mouillé là où l'eau est passée, puis sèche lentement.Accessibilité
- Sous
prefers-reduced-motion: reduce, l'effet ne s'éteint pas : il affiche une constellation figée de gouttes réfractantes. Le visiteur garde l'image de vitre mouillée, sans aucun mouvement. - Un mode opaque est prévu pour
prefers-reduced-transparencyet les réglages de contraste élevé : les gouttes cessent d'être translucides et sont peintes en aplat, ce qui supprime l'empilement de couches semi-transparentes. - Le canvas est marqué
aria-hidden="true", le conteneur porterole="img"et un libellé qui décrit la scène. Aucun contenu utile n'est enfermé dans le rendu. - Le fond est sombre et contrasté par nature (points lumineux sur nuit). Si vous posez du texte dessus, placez-le loin des taches de bokeh les plus vives, ou intercalez un voile sombre : les zones claires sont dispersées et un test de contraste sur un seul point ne suffit pas.
Compatibilité navigateur
Canvas 2D uniquement : clip, drawImage, transformations, dégradés radiaux et composition par masque. devicePixelRatio est plafonné à 2 pour éviter de peindre quatre fois trop de pixels sur les écrans très denses. Plus requestAnimationFrame et matchMedia. Aucune bibliothèque.
Chrome 60+✓ Complet
Edge 79+✓ Complet
Firefox 55+✓ Complet
Safari 11+✓ Complet
Safari iOS 11+✓ Complet — baisser
MAXD sur les vieux modèlesChrome Android 60+✓ Complet
Sans JavaScript, le canvas reste vide : donnez à .rog-scene une couleur ou un dégradé de nuit en CSS pour que la section garde sa présence. L'effet se dégrade alors en un simple fond sombre, ce qui reste cohérent.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
index.html — structure
<div class="rog-scene" id="rogScene"
role="img"
aria-label="Pluie sur une vitre — gouttes réfractantes qui glissent et fusionnent">
<!-- Tout est peint sur ce canvas : fond bokeh, ruban humide, gouttes.
Décoratif, donc retiré de l'arbre d'accessibilité. -->
<canvas class="rog-canvas" id="rogCanvas" aria-hidden="true"></canvas>
</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 |
|---|---|---|
CFG.rateMs — cadence d'apparition |
4 | Une goutte naît toutes les rateMs images environ. 18 donne une bruine très espacée, 3 une pluie torrentielle. C'est le réglage qui change le plus la lecture de la scène. |
CFG.sizeScale — échelle des gouttes |
1.3 | Multiplie tous les rayons. En dessous de 0,8 la réfraction devient illisible ; au-dessus de 2 les gouttes fusionnent presque immédiatement et forment des coulées. |
CFG.opaque — mode opaque |
false | Peint les gouttes en aplat au lieu de les rendre translucides. À activer pour les réglages de contraste élevé, ou quand le fond derrière la vitre est déjà chargé. |
MAXD — nombre maximal de gouttes |
72 | Plafond de la simulation. La détection de fusion est en O(n²), donc le coût grimpe vite : 72 est un compromis tenu ; au-delà de 120 la boucle devient sensible sur mobile. |
MAXT — micro-gouttelettes de sillage |
150 | Nombre de traces laissées derrière les gouttes qui glissent. Baisser à 60 donne une vitre plus nette, monter à 250 un verre visiblement ruisselant. |
| Vitesse d'évaporation du ruban humide | décroissance lente par image | Détermine combien de temps la trace reste visible. Une évaporation lente donne une vitre durablement mouillée ; rapide, des traînées qui disparaissent presque aussitôt. |
| Palette du fond bokeh | nuit urbaine | Le tableau des taches se lit [x %, y %, rayon, 'r,g,b', alpha]. Le remplacer suffit à passer d'une rue de nuit à un couchant ou à un intérieur chaleureux, sans toucher à la physique. |
FAQ
Parce que c'est ce que fait une goutte d'eau. Une goutte posée sur une vitre se comporte comme une lentille convexe : elle inverse l'image qu'elle transmet. Le code applique donc un
scale(-1, 1) après avoir zoomé le fond. C'est un détail que peu de simulations reproduisent, et c'est précisément lui qui fait qu'on lit « goutte » plutôt que « cercle flou ».Oui, avec une réserve. Le fond bokeh n'est peint qu'une fois, donc le coût par image vient des gouttes : détection de fusion en O(n²) plus une découpe et un
drawImage par goutte. À 72 gouttes c'est confortable sur un appareil récent. Sur un modèle d'entrée de gamme, descendez MAXD à 40 et MAXT à 80 : la scène reste convaincante et le budget par image est divisé par deux.Oui, et c'est la personnalisation la plus payante. Remplacez le fond hors écran par votre image, dessinée une fois à la taille du canvas. Toute la mécanique — réfraction, ruban humide, déformation — s'appuie sur ce canvas hors écran sans savoir ce qu'il contient. Une seule précaution : gardez une image contrastée, car la réfraction dans une goutte de quelques pixels n'est lisible que si le fond a des zones claires et sombres bien marquées.
