Chat input with a send animation

Press send and the prompt lifts into a message bubble, the box shrinks into a Thinking pill, and the answer card opens out of it. React and Tailwind, no animation library.

By buying you agree to the Terms and ask for instant access, so you lose the 14-day withdrawal right. When we still refundWe'll also email you when a new piece lands (about once a week). Unsubscribe in one click, anytime.

Full product pageReact · Tailwind · TypeScript

Use it in Next.js

app/Chat.tsx

"use client";
import { useChat } from "@ai-sdk/react";
import PromptBloom from "@/components/PromptBloom";

export default function Chat() {
  const { messages, sendMessage, status } = useChat(); // posts to /api/chat by default
  const last = messages.at(-1);
  const reply = last?.role === "assistant"
    ? last.parts.map((p) => (p.type === "text" ? p.text : "")).join("")
    : "";
  return (
    <PromptBloom
      autoplayDemo={false}
      text={reply}
      streaming={status === "submitted" || status === "streaming"}
      onSubmit={(prompt) => sendMessage({ text: prompt })}
    />
  );
}

app/api/chat/route.ts

import { convertToModelMessages, streamText, type UIMessage } from "ai";
import { model } from "./model"; // your provider's model goes here

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();
  const result = streamText({ model, messages: await convertToModelMessages(messages) });
  return result.toUIMessageStreamResponse();
}

Good to know

The AI chat UI page below uses the same piece as a scripted landing page demo. This page is about the input and the send.
There's no Framer Motion here. One requestAnimationFrame loop in engine.ts works out every moment of the send and writes it to the DOM.
On send, the prompt lifts into a bubble over 0.6 s, the composer shrinks into a Thinking pill, and the answer card opens out of the pill.
With text and streaming passed in, the pill holds until the first token arrives, then the card opens and words fade in at the pace they stream. Tokens don't re-render React.
We tested the two files above in a fresh Next.js 16.4 app (React 19.3, ai 7.0, @ai-sdk/react 4.0) against a mock model. A real provider's model is not tested yet.
The loop books no frames while the component is off screen or the tab is hidden.
With Reduce Motion on, words appear as they arrive with no fade, and the composer and card switch states without the bloom.

Install

Copy from the zipPut react/src/components + react/src/data into src/, then none (React only).
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

onSubmit: gets the prompt the moment it's sent
text: the reply so far, while it streams
streaming: true until the reply is done
autoplayDemo: false in a real app

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Magic UIMagic UI is best for: landing pages built with shadcn/ui.

All comparisons, with prices read on each library's own site.

From the blog: Stream AI Responses With useChat: A Custom React UI That Handles Every State

From the blog: How to Animate Height Auto in React and Tailwind CSS

Questions

Does it need Framer Motion?

No. It's React with its own animation loop, so there's nothing extra to install.

Does it work without the Vercel AI SDK?

Yes. Append chunks to a string in state, pass it as text, and keep streaming true until the reader is done.

Is the reply safe to show as-is?

Every word is written as text, never as HTML, so model output can't inject markup. It understands **bold**, line breaks, - bullets and # headings.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.