- ¿Al final quedamos el sábado?
- Yo puedo por la tarde
Chat message that flies up
The text leaves the input and turns into a bubble, then goes from sent to delivered and read before the other person replies.
Settings
Code
<div class="uvq15-cht"><header><span class="av" aria-hidden="true">L</span><div><b>Lola</b><small class="ty">online</small></div></header><ol class="ls" aria-live="polite"><li class="in"><span class="tx">So are we meeting on Saturday?</span></li><li class="in"><span class="tx">I can make it in the afternoon</span></li></ol><form class="cp"><input type="text" value="Great, at eight?" placeholder="Type a message" aria-label="Message" autocomplete="off" enterkeyhint="send"><button type="submit" class="sd" aria-label="Send"><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 12l7-7 7 7"/></svg></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 Microinteractions
See all MicrointeractionsWhere to use it
Sending a chat message feels better when you can see it travel. Here the text slides out of the input and settles as a bubble in the thread, the receipt changes from Sent to Delivered and Read with a second tick, and a typing indicator leads into a reply. It works with Enter or the round send button.
The main color paints your bubbles and the send button, the secondary one marks read receipts. The first message is the editable text, and the replies rotate through a short list in the script. Use it for support widgets, booking assistants or messaging mockups.