¿Subimos a ver el atardecer?
¡Sí! Llevo la cámara 📷
Chat con barra de cristal
Una conversación sobre un fondo de color con barra de mensaje de cristal; el micro se convierte en enviar al escribir.
Ajustes
Código
<div class="uv-gcc"><div class="ms" aria-live="polite"><p class="in">¿Subimos a ver el atardecer?</p><p class="me">¡Sí! Llevo la cámara 📷</p></div><form class="cp"><button type="button" class="ad" aria-label="Adjuntar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button><input placeholder="Mensaje" aria-label="Mensaje"><button type="submit" class="sd" aria-label="Enviar"><span class="mi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21"/></svg></span><span class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/></svg></span></button></form></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
Las apps de mensajería colocan ya la barra de escribir como cristal flotante sobre la conversación. Las burbujas recibidas son de cristal esmerilado, las tuyas azules y sólidas, y la barra inferior lleva un botón de adjuntar, el campo de mensaje y un botón redondo que muestra un micrófono cuando está vacío y se transforma en una flecha de enviar con un giro en cuanto escribes.
Al enviar, tu mensaje entra como burbuja nueva y se conservan los últimos en pantalla. La transformación depende de :placeholder-shown y la barra es un formulario nativo, así que Intro envía y los lectores de pantalla anuncian los mensajes.