iMessage Chat Flow

An animated iMessage-style chat conversation mockup with typing indicators, message bubbles, reactions and a live-typed composer, useful for product demo videos and landing pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds iMessage Chat Flow to your project and fits it to your theme.

import { ImessageChatFlow } from "@/components/ui/imessage-chat-flow";

export default function Preview() {
  return (
    <div className="relative w-full h-screen bg-white">
      <ImessageChatFlow
        contact={{ name: "shadcn", avatar: "https://unavatar.io/x/shadcn" }}
      />
    </div>
  );
}