Gouttes sur l’étang
Des cercles s’ouvrent au hasard sur une eau sombre, comme des gouttes tombant sur un étang calme.
Réglages
Code
<div class="pt-pond"><i style="left:5.0%;top:35.7%;--t:8.7s;--dl:-1.2s"></i><i style="left:57.3%;top:25.3%;--t:7.2s;--dl:-3.6s"></i><i style="left:42.5%;top:81.0%;--t:7.6s;--dl:-1.3s"></i><i style="left:43.0%;top:17.7%;--t:8.1s;--dl:-4.3s"></i><i style="left:18.3%;top:27.9%;--t:7.6s;--dl:-1.9s"></i><i style="left:74.9%;top:64.7%;--t:6.7s;--dl:-6.3s"></i><i style="left:88.1%;top:40.0%;--t:5.1s;--dl:-5.2s"></i><i style="left:70.5%;top:17.5%;--t:5.2s;--dl:-1.4s"></i><i style="left:64.5%;top:56.0%;--t:6.2s;--dl:-7.5s"></i><i style="left:83.9%;top:91.5%;--t:7.8s;--dl:-0.5s"></i><i style="left:18.7%;top:43.2%;--t:8.4s;--dl:-7.7s"></i><i style="left:50.0%;top:40.9%;--t:8.4s;--dl:-1.8s"></i><i style="left:94.9%;top:41.1%;--t:6.2s;--dl:-6.9s"></i><i style="left:81.2%;top:11.5%;--t:8.4s;--dl:-4.5s"></i></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Arrière-plans
Où l’utiliser
Les ronds dans l’eau parlent de calme et de présence. Ils conviennent à l’écran d’accueil d’une application de pleine conscience, au site d’un spa ou à la réservation d’une retraite au bord d’un lac. Les gouttes tombent au hasard, le rythme ne paraît jamais mécanique. Un fond animé de ronds dans l’eau, en HTML et CSS.
Pour du contenu de méditation ou de sommeil, ralentissez un peu ; par défaut, on est plus proche d’une pluie fine. Un grand titre fin en blanc flotte joliment au-dessus des cercles, surtout avec une opacité un peu réduite.