HTML + CSSFondos
Gotas en el estanque
Anillos que se abren sobre el agua oscura en puntos al azar, como gotas cayendo en un estanque en calma.
Ajustes
1x
1x
1
Código
<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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Fondos
Dónde usarlo
Las ondas en el agua hablan de calma, por eso funcionan en una app de mindfulness, en la web de un balneario o en la reserva de un retiro junto a un lago. Las gotas caen al azar y el ritmo nunca parece mecánico. Un fondo de ondas de agua animado en HTML y CSS, sin imágenes.
Para contenido de meditación o de sueño, baja un poco la velocidad; por defecto se parece más a una lluvia ligera. Un titular grande y fino en blanco queda estupendo flotando sobre los anillos, sobre todo con la opacidad algo más baja.