About
An animated iOS-style messenger chat that plays a conversation: typing in the composer, sending, file uploads with progress bar, typing indicator and read receipts. Pass your own contact, avatar and messages; themed with shadcn CSS variables for light and dark mode, plays when scrolled into view, can loop and respects reduced motion.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated WhatsApp Chat to your project and fits it to your theme.
Code
How Animated WhatsApp Chat is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
"use client";
import { WhatsAppChat, type ChatMessage } from "@/components/ui/whatsapp-chat";
// Keep the array outside the component (or memoize it) – a new array restarts the playback.
const messages: ChatMessage[] = [
{ from: "me", time: "10:02", text: "Hi Emma! Quick question about the new landing page 👋" },
{ from: "them", time: "10:03", text: "Hey! Sure, what's up?" },
{ from: "me", time: "10:04", text: "Here's the brief with all the sections we discussed." },
{
from: "me",
time: "10:04",
file: { name: "Landing_Page_Brief.pdf", meta: "6 pages · PDF · 2.4 MB" },
},
{
from: "them",
time: "10:06",
text: "Got it, thanks! Looks great. I'll send you the first draft by Friday.",
},
{ from: "me", time: "10:06", text: "Perfect, talk soon 🙌" },
];
function DemoOne() {
return (
<div className="flex min-h-[44rem] w-full items-center justify-center bg-background p-6">
<WhatsAppChat
contact={{
name: "Emma Walsh",
avatar:
"https://cdn.21st.dev/assets/mirror/61/6185acb0a3b13e1a809a4bc7f2d50d29759674f24dfb552e4035484f3bea91a1.jpg",
}}
messages={messages}
autoPlay="mount"
loop
/>
</div>
);
}
export default DemoOne;
More by Martin Geltl
View all
FAQ with AI Ask
Ember Fire Button