Underwater Caustics
Deux couches de repeating-conic-gradient animées en sens opposés créent des caustiques aquatiques moirées — bulles CSS montantes incluses, zéro JavaScript.
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. Atmosphère comprend 57 effets, dont 10 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
L'effet repose sur deux couches CSS superposées (.caustics-layer), chacune portant une paire de repeating-conic-gradient. La première ancre ses cônes en at 25% 25% et at 75% 75%, répétés sur des tuiles de 80 × 80 px et 100 × 100 px. La seconde les décale à from 30deg at 60% 40% et from 60deg at 40% 60%, sur 90 × 90 px et 70 × 70 px. L'angle de départ (from) et la position (at) différents décalent la phase angulaire des deux grilles, créant ensemble un réseau de losanges lumineux (alpha 4–6 %) qui imite le patron optique des caustiques en piscine.
Les deux couches partagent la même animation causticsMove — translation ±10 px, rotation ±2° — mais avec des durées distinctes (4 s et 6 s) et des directions opposées (animation-direction: normal vs reverse). Ce déphasage de fréquence (rapport 2/3, battement à 12 s) génère un moiré animé : les deux grilles glissent l'une par rapport à l'autre en continu, produisant l'ondulation caractéristique des reflets sous-marins sans JavaScript ni canvas.
Le fond est un linear-gradient sur .caustics-container — trois stops : #006994 en surface, #046 à mi-profondeur, #034 en fond — qui joue le rôle de la masse d'eau. Les deux couches sont en position: absolute; inset: 0 et couvrent le conteneur quelle que soit sa taille. L'overflow: hidden évite tout débordement lors des translations.
Quatre bulles (.caustics-bubbles span) sont des cercles CSS purs — border-radius: 50%, fond quasi transparent (rgba(255,255,255,.05)), contour 1 px solid rgba(255,255,255,.2) — animées par bubbleRise (ease-in, montée de 220 px, scale(1.3)). Quatre durées distinctes (5 s, 6 s, 7 s, 5,5 s) et des délais échelonnés de 0 à 3 s évitent tout cycle répétitif visible.
Accessibilité
- prefers-reduced-motion absent dans le code : aucune règle
@media (prefers-reduced-motion)n'est présente. Les animationscausticsMoveetbubbleRisetournent même si l'utilisateur a activé « Réduire le mouvement ». À ajouter avant prod :@media (prefers-reduced-motion: reduce) { .caustics-layer, .caustics-bubbles span { animation: none; } }. - Le
.caustics-containerne porte pas d'aria-hidden. L'effet étant purement décoratif, ajouteraria-hidden="true"pour l'exclure de l'arbre d'accessibilité. - Aucun
roleniaria-labeln'est défini sur le conteneur. En usage réel, envelopper l'effet + le contenu overlay dans unrole="img"avecaria-labeldescriptif. - Aucune interaction clavier ni pointeur — effet 100 % décoratif. L'accessibilité repose sur le contenu texte positionné par-dessus (z-index supérieur).
- Le
.caustics-label(blancrgba(255,255,255,.85)sur fond bleu #006994) atteint un ratio de contraste estimé ≥ 4,6:1 — conforme WCAG AA pour le texte courant.
Compatibilité navigateur
Requiert repeating-conic-gradient (CSS Gradients Level 4). Supporté dans tous les navigateurs modernes depuis 2019–2020. Zéro JavaScript, zéro dépendance externe.
Les navigateurs sans support <code>repeating-conic-gradient</code> (IE, anciens Edge) affichent uniquement le <code>linear-gradient</code> de fond — dégradé bleu uni, aucune erreur JS, mise en page intacte.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="caustics-container">
<div class="caustics-layer"></div>
<div class="caustics-layer"></div>
<div class="caustics-bubbles">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>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 |
|---|---|---|
| linear-gradient sur .caustics-container | #006994, #046, #034 | Couleurs de fond de la masse d'eau — modifiez les 3 stops pour adapter la profondeur perçue (aqua vif, bleu nuit, vert algue). |
| animation-duration: 4s (.caustics-layer) | 4s | Vitesse de la couche 1. 4 s = dynamique, 8 s = contemplatif. Conserver un ratio non entier avec la couche 2 pour un moiré riche. |
| animation-duration: 6s (.caustics-layer:nth-child(2)) | 6s | Vitesse de la couche 2 (direction reverse). Le rapport 4 s/6 s crée un battement à 12 s — changez-le pour allonger ou raccourcir la période du cycle visuel. |
| rgba(100, 200, 255, .06) dans repeating-conic-gradient | .06 / .05 / .04 | Alpha des segments lumineux des cônes. Montez jusqu'à .15 pour des caustiques très prononcées, descendez à .02 pour une texture de fond quasi imperceptible. |
| background-size: 80px 80px (couche 1) | 80px / 100px | Taille des tuiles coniques — plus petites = grain fin, plus grandes = larges nappes lumineuses. Changez les deux valeurs de la même couche ensemble pour conserver l'aspect composite. |
| opacity: .8 sur .caustics-layer | .8 | Transparence globale de chaque couche. Descendez à .4 pour un effet très subtil, montez à 1 pour un rendu saturé. |
| animation-duration des .caustics-bubbles span | 6s, 5s, 7s, 5.5s | Durée de montée de chaque bulle. Valeurs variées = montée asynchrone naturelle. Valeurs identiques = cadence régulière et hypnotique. |
| translateY(-220px) dans @keyframes bubbleRise | -220px | Distance verticale parcourue par les bulles. Alignez sur la hauteur réelle du conteneur pour que les bulles disparaissent précisément en haut. |
FAQ
repeating-conic-gradient est supporté depuis Chrome 69 (2018), Firefox 83 (2020), Safari 12.1 (2019). Sur Internet Explorer ou un navigateur antérieur, seul le linear-gradient de fond est rendu — un dégradé bleu propre, sans erreur, sans mise en page cassée.position: absolute; z-index: 2 dans le même conteneur (position: relative; overflow: hidden). Ajoutez un scrim si nécessaire — un div inset: 0 absolu en z-index: 1 avec background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.3)) — pour garantir le contraste texte WCAG AA.
