Ventanilla empañada
Pasa el dedo por el vaho para ver el bosque nevado; el cristal se vuelve a empañar poco a poco.
Ajustes
Código
<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="Cristal empañado: pasa el dedo para limpiarlo" data-t="Hola"></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>Desempañar</button></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 Liquid Glass
Ver todos: Liquid GlassDónde usarlo
Una ventanilla de coche en invierno llena de vaho, hecha con dos copias de la misma escena: una nítida y otra desenfocada bajo una capa de niebla. Un pequeño canvas hace de máscara, así que el dedo limpia el cristal por donde pasa y al principio aparece un saludo escondido. Sirve para widgets del tiempo, campañas de invierno o estados vacíos con gracia.
Escribe tu propia palabra en el campo de texto y se dibuja en el cristal con trazo de dedo. El botón de desempañar limpia la ventanilla de abajo arriba y los colores repintan el amanecer y los pinos.