Pluie sur la vitre
Des gouttes glissent sur une vitre devant des lumières de ville floues qui brillent derrière, dessinées en canvas.
Réglages
Code
<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 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
Voir tout : Arrière-plansOù l’utiliser
Un fond cinématographique et plein d'ambiance. Derrière la vitre brillent des lumières floues dans tes trois couleurs pendant que de petites gouttes s'accumulent sur le verre. De temps en temps, une grosse goutte se met à glisser, s'arrête, repart, avale les gouttelettes sur son chemin et laisse une traînée de perles minuscules, comme la pluie sur une vraie fenêtre.
Chaque goutte porte un reflet et un bord plus sombre qui suggèrent la réfraction. La densité règle à quel point la vitre est mouillée et la vitesse la course des gouttes. Idéal pour les podcasts, les cafés, les lecteurs de musique et les sites de lecture.