Chat Conversation
A chat conversation illustration with animated message bubbles. Each message includes an avatar and text bubble that animate in sequence when the component scrolls into view.
Messages alternate between left and right alignment to simulate a real conversation. The animation uses staggered delays so each message appears after the previous one, creating a natural flow.
Uses the useInView hook from Motion to trigger animations only when visible. Avatars scale in first, followed by the message bubble sliding in from the side.
Works well for messaging apps, customer support features, or any product that involves real-time communication.
Explore more
Part of Illustrations ยท All blocks
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
100+ templates and blocks combined
Ready to copy paste component blocks, save days of development time



