Chatmotion

Drop-in chat UI components with smooth typing animations. Perfect for landing pages, product demos, and making your app look polished before you've even built the backend.

This is a copy-paste component library, not an npm package. You own the code and can modify everything.

Quick Install

Copy the files

themes.ts

utils.ts

Install dependencies

npm install framer-motion clsx tailwind-merge

bun add framer-motion clsx tailwind-merge

pnpm add framer-motion clsx tailwind-merge

yarn add framer-motion clsx tailwind-merge

Use it

import { ChatAnimation } from '@/components/chat-animation';

export default function Hero() {
  return <ChatAnimation />;
}

That's it. You now have a chat animation that looks better than most production apps.

Variants

<ChatAnimation variant="phone" />

Full iPhone simulation with status bar, input bar, typing animation. The one that makes people go "wait, is that real?"

<ChatAnimation variant="simplified" />

Bigger bubbles, no input bar. The chat is the star, not the phone chrome. Great for hero sections.

<ChatAnimation variant="minimal" />

No frame at all. Transparent background. Use this when you're embedding it in something custom.

Next Steps

Getting Started - Full setup guide
Customization - All the knobs you can turn
API Reference - Types and props for the detail-oriented