Fenêtre sous la pluie
Des gouttes glissent sur la vitre et se rejoignent, chacune montre la ville à l’envers comme une minuscule lentille.
Réglages
Code
<div class="uvq11-rain"><div class="bg" aria-hidden="true"><span class="ne">Ouvert 24 h/24</span></div><div class="gl" aria-hidden="true"></div><button type="button" class="ch" aria-pressed="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 15a4 4 0 0 1 .5-8 5.5 5.5 0 0 1 10.5 1.5A3.5 3.5 0 0 1 17.5 15"/><path d="M9 18l-1 2M13 18l-1 2M17 18l-1 2"/></svg>Pluie</button></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 Liquid Glass
Voir tout : Liquid GlassOù l’utiliser
Une fenêtre de nuit sous la pluie, faite en HTML, CSS et un court script. La ville derrière est un bokeh doux en dégradés, et chaque goutte en porte une copie inversée, comme le font les vraies lentilles d’eau. Les grosses gouttes glissent, s’arrêtent, fusionnent et laissent une traînée. Idéal pour une appli météo, une page d’accueil d’ambiance ou un lecteur audio.
Changez les deux couleurs principales pour repeindre les néons et l’enseigne, et modifiez le texte avec le nom de votre bar ou boutique. Touchez la vitre pour poser une grosse goutte et mettez la pluie en pause avec le bouton.