Lluvia en la ventana
Gotas que resbalan por el cristal de una ventana con luces de ciudad desenfocadas brillando detrás, en canvas.
Ajustes
Código
<div class="pt-rain-glass"><div class="bk"><i style="--x:0.1%;--y:97.0%;--s:18.1em;--c:var(--c1);--dl:-5.9s"></i><i style="--x:48.2%;--y:92.5%;--s:12.4em;--c:var(--c2);--dl:-6.2s"></i><i style="--x:81.6%;--y:5.7%;--s:19.8em;--c:var(--c3);--dl:-2.1s"></i><i style="--x:61.8%;--y:14.6%;--s:19.4em;--c:var(--c1);--dl:-1.6s"></i><i style="--x:7.5%;--y:70.1%;--s:19.7em;--c:var(--c2);--dl:-0.7s"></i><i style="--x:99.1%;--y:49.6%;--s:16.2em;--c:var(--c3);--dl:-5.4s"></i><i style="--x:0.1%;--y:95.1%;--s:13.4em;--c:var(--c1);--dl:-4.1s"></i><i style="--x:85.6%;--y:80.8%;--s:19.1em;--c:var(--c2);--dl:-2.9s"></i><i style="--x:88.3%;--y:31.9%;--s:20.8em;--c:var(--c3);--dl:-7.0s"></i><i style="--x:57.0%;--y:83.3%;--s:11.2em;--c:var(--c1);--dl:-2.0s"></i><i style="--x:48.1%;--y:41.2%;--s:18.1em;--c:var(--c2);--dl:-4.4s"></i><i style="--x:28.8%;--y:61.4%;--s:14.7em;--c:var(--c3);--dl:-4.1s"></i><i style="--x:81.7%;--y:71.3%;--s:18.0em;--c:var(--c1);--dl:-3.8s"></i><i style="--x:63.7%;--y:1.7%;--s:17.3em;--c:var(--c2);--dl:-1.2s"></i></div><canvas></canvas></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
Ver todos: FondosDónde usarlo
Un fondo cinematográfico y con atmósfera. Detrás del cristal brillan luces desenfocadas con tus tres colores mientras pequeñas gotas se acumulan en el vidrio. De vez en cuando una gota grande empieza a resbalar, se para, vuelve a acelerar, se traga las gotitas de su camino y deja un rastro de cuentas diminutas, como la lluvia en una ventana de verdad.
Cada gota lleva un brillo y un borde más oscuro que sugieren la refracción. La densidad controla lo mojado que está el cristal y la velocidad lo rápido que bajan las gotas. Encaja en podcasts, cafeterías, reproductores de música y webs de lectura.