Vitre de voiture embuée
Essuyez la buée du doigt pour voir la forêt enneigée, puis regardez la vitre s’embuer de nouveau peu à peu.
Réglages
Code
<div class="uvq11-fog"><div class="sc"><svg viewBox="0 0 200 140" preserveAspectRatio="xMidYMid slice"><path class="h1" d="M0 96Q50 78 100 92T200 86V140H0Z"/><path class="tr" d="M0 83L12 115H-12ZM59 72L72 105H46ZM47 83L57 110H37ZM135 74L149 112H121ZM31 86L39 108H23ZM130 79L140 105H120ZM183 80L193 105H173ZM87 74L102 113H72ZM46 78L58 110H34ZM54 91L62 111H46ZM110 72L124 108H96Z"/><path class="h2" d="M0 118Q60 104 120 116T200 112V140H0Z"/></svg></div><div class="fg" aria-hidden="true"><div class="sc"><svg viewBox="0 0 200 140" preserveAspectRatio="xMidYMid slice"><path class="h1" d="M0 96Q50 78 100 92T200 86V140H0Z"/><path class="tr" d="M0 83L12 115H-12ZM59 72L72 105H46ZM47 83L57 110H37ZM135 74L149 112H121ZM31 86L39 108H23ZM130 79L140 105H120ZM183 80L193 105H173ZM87 74L102 113H72ZM46 78L58 110H34ZM54 91L62 111H46ZM110 72L124 108H96Z"/><path class="h2" d="M0 118Q60 104 120 116T200 112V140H0Z"/></svg></div></div><div class="gl" role="img" aria-label="Vitre embuée : passez le doigt pour l’essuyer" data-t="Bonjour"></div><button type="button" class="ch"><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="M4 18h16M4 6h16"/><path d="M8 15c-1.2-1.2 1.2-2.8 0-4s1.2-2.8 0-4M12 15c-1.2-1.2 1.2-2.8 0-4s1.2-2.8 0-4M16 15c-1.2-1.2 1.2-2.8 0-4s1.2-2.8 0-4"/></svg>Désembuer</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 vitre de voiture en hiver couverte de buée, construite avec deux copies de la même scène : l’une nette, l’autre floue sous une couche de brume. Un petit canvas sert de masque, si bien que le doigt efface la buée partout où il passe et qu’un mot caché apparaît au début. Parfait pour un widget météo, une campagne d’hiver ou un état vide ludique.
Écrivez votre propre mot dans le champ texte, il est tracé sur la vitre comme avec le doigt. Le bouton de désembuage dégage la vitre de bas en haut, et les couleurs repeignent le lever du soleil et les sapins.