¿Subimos a ver el atardecer?
¡Sí! Llevo la cámara 📷
Chat with glass composer bar
A conversation over a colorful background with a glass message bar; the microphone turns into send as you type.
Settings
Code
<div class="uv-gcc"><div class="ms" aria-live="polite"><p class="in">Shall we go up to watch the sunset?</p><p class="me">Yes! I’ll bring the camera 📷</p></div><form class="cp"><button type="button" class="ad" aria-label="Attach"><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="Message" aria-label="Message"><button type="submit" class="sd" aria-label="Send"><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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Liquid Glass
See all Liquid GlassWhere to use it
Messaging apps now float the composer as a glass bar over the conversation. Incoming bubbles are frosted glass, your own are solid blue, and the bottom bar holds an attach button, the message field and a round button that shows a microphone while empty and morphs into a send arrow with a spin as soon as you type.
Sending adds your message as a new bubble that slides in, keeping the last few on screen. The morph is driven by :placeholder-shown, and the bar uses a native form, so Enter sends and screen readers announce new messages.