Getting Started

Copy the files

Yes, you're copying files manually. This gives you full control to modify everything. No npm package to fight with when you want to change something.

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

Framer Motion does all the heavy lifting for animations. The other two are just for merging Tailwind classes cleanly.

Use it

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

export default function Hero() {
  return (
    <div className="h-[600px] w-[400px]">
      <ChatAnimation />
    </div>
  );
}