Guides · · Maxwell Prehoda
12 Chatbot UI Animation Examples That Make a Reply Feel Alive
A chatbot interface has four moments that need motion: the message you send leaving the composer, the wait while the model works, the reply arriving, and whatever the bot does between words (searching, calling a tool, asking a question). Get those four right and a slow model feels responsive. Get them wrong and a fast one feels broken.
The examples below are the real implementations people copy: Apple's and Telegram's message animations, the streaming and shimmer components shipped by Vercel and the open source AI chat kits, and Duolingo's animated AI character. Each one says what it is best for, what it runs on, and the trap to avoid. Where we have a pure-CSS version of the same pattern in our directory, it plays live under the entry so you can copy it.
Most chatbot UI galleries are static screenshots of whole products. This list is about the motion itself, so you can pick the one pattern your chat is missing.
1. Telegram's send animation: Best for the moment a sent message leaves the composer
Platform: Telegram for iOS (native app)
Can you make this headline shorter?
Try “Ship fewer, better things.”
In its June 2021 update, Telegram made the text you type physically become the message. On iOS, your input text smoothly transforms into the message bubble as it flies into the chat, and stickers and emoji hop from the keyboard into the thread. The same update shipped gradient wallpapers that shift every time you send a message, so the whole chat reacts to the send.
The lesson for a chatbot is continuity. When the user's words leave the input and reappear as a bubble in the same place they were typed, nobody wonders whether the message went through. A fade-in at the top of the thread can't do that.
Our Chat Reply Arriving below is a pure-CSS version of the same idea: the user message springs up into the thread, the thread makes room, and the assistant bubble opens out of typing dots with an animated clip-path.
Watch out for: A true input-to-bubble morph needs you to measure two positions and animate between them (a FLIP or shared-element transition). In a web chat that streams and auto-scrolls at the same time, keep it under about 300ms or it fights the scroll.
2. iMessage bubble and screen effects: Best for messages that need to carry an emotion
Platform: Apple Messages on iPhone and iPad (iMessage only)
Apple's Messages app lets the sender pick how a message arrives. Touch and hold the Send button and you get bubble effects such as Slam, Loud, Gentle and Invisible Ink, which blurs the bubble until the recipient swipes it. Tap Screen instead and the whole conversation fills with balloons, confetti or lasers. Some phrases trigger effects on their own, like balloons for a birthday message.
For a chatbot this is the reference for celebratory and emphatic states: an order confirmed, a goal reached, a reveal. It also shows the restraint to copy. The effects are opt-in, they play once, and there is a Replay button under the message instead of a loop.
Apple ties the effects to the Reduce Motion setting: its support page tells people who can't see bubble or full-screen effects to check Reduce Motion. That is the right default for any big chat effect you build.
Watch out for: These are native iOS effects and only work when both people use iMessage. A bot that fires confetti on every reply turns a delight into noise; save full-screen effects for real milestones.
3. Vercel AI Elements Shimmer: Best for a Thinking label in a React and shadcn/ui app
Platform: React, shadcn/ui registry, Framer Motion
AI Elements is Vercel's component registry for AI apps, built on shadcn/ui conventions, with chatbot pieces like Conversation, Message, Reasoning, Chain of Thought, Tool and Shimmer. Shimmer sweeps a highlight across its text in a continuous loop using a CSS gradient and Framer Motion. It takes a `duration` (2 seconds by default) and a `spread` multiplier that sets how wide the light band is relative to the text.
A moving band of light on a word like Thinking is the most common waiting state in AI chat right now because it says "working" without promising how long. It also works on any label, so the same component covers Searching, Reading files and Generating.
Our Thinking Shimmer Label below is a pure-CSS version: a gradient clipped to the text plus a small sparkle that turns and breathes, no Framer Motion needed.
Watch out for: The AI Elements site says the registry is moving into shadcn/ui and will be deprecated at the end of November 2026, so check where the component lives before you install it.
4. Streamdown's animated streaming: Best for fading in streamed Markdown word by word
Platform: React, open source (vercel/streamdown)
Yes. Runes replace stores for local state in Svelte 5, but keep a store when several components need to share one value.
Streamdown is a drop-in replacement for react-markdown built for AI output. Its main job is rendering half-finished Markdown (an unclosed code fence, a bold marker with no partner) without the layout jumping. Turn on `animated` and a rehype step wraps each newly arrived word in a span, so only fresh text animates.
It ships three animations: `fadeIn` (the default), `blurIn`, and `slideUp`, which rises 4px. Duration defaults to 150ms, and you can split by character for a typewriter feel at the cost of more DOM nodes. The docs recommend `blurIn` with 200 to 300ms and ease-out for fast models, because blur hides the fact that tokens arrive in batches. Set `isAnimating` to false when the message finishes and the extra spans are removed.
Our Streaming Reply With Soft Caret below shows the blur-in idea as a pure-CSS loop, with a glowing caret riding the newest word.
Watch out for: Per-word spans multiply DOM nodes in long answers. Turn animation off for finished messages and for history you load from the server, or a long thread gets heavy to scroll.
5. AI SDK smoothStream: Best for evening out bursty token streams
Platform: Vercel AI SDK (TypeScript, server side)
Some of the best chatbot animation is not animation at all, it is pacing. Models often send text in uneven bursts, so the reply lurches. `smoothStream` is a transform you pass to `streamText` that buffers output and releases it word by word (or line by line, or by your own pattern) with a short delay between chunks, 10ms by default. Tool calls pass straight through.
Pair it with a front-end fade and the reply reads at a steady rhythm. The docs flag a real trap: word chunking does not work well for Chinese, Japanese, Korean, Thai or Vietnamese, and they recommend passing an `Intl.Segmenter` for the locale instead.
Our Gradient Edge Streaming Text below is the visual half: lines write themselves behind a soft glowing leading edge, moved by one registered @property.
Watch out for: Smoothing adds latency on purpose. If your users are reading code or numbers as they arrive, a long delay feels like a slower model; keep it near the default.
6. prompt-kit Loader variants: Best for picking a waiting state from many styles
Platform: React, shadcn CLI, Tailwind CSS
prompt-kit, by the developer ibelick, is a set of copy-in components for AI interfaces: Message, Chat Container, Reasoning, Tool, Steps, Text Shimmer and more. Its Loader component alone has twelve variants, including `typing`, `dots`, `wave`, `bars`, `terminal`, `text-blink`, `text-shimmer` and `loading-dots`, three of which can carry a label like Thinking.
It is the fastest way to try the options side by side inside a real chat layout, and then keep the one that fits your brand. You install a component with the shadcn CLI and own the code afterwards.
Watch out for: The docs note that on Tailwind CSS v4 you may need to add the keyframes to your global CSS by hand. Pick one loader per state and stick to it; mixing a typing bubble and a shimmer in the same thread reads as two different products.
7. assistant-ui: Best for streaming chat with auto-scroll that behaves
Platform: React (also Vue and React Native), MIT
assistant-ui is a Y Combinator backed, MIT licensed TypeScript library for AI chat with around 13,000 GitHub stars. Its primitives cover the unglamorous motion problem that ruins most chatbots: scrolling. The Thread keeps the view pinned to the bottom while a reply streams, a scroll anchor stops streaming from yanking the page while you read earlier messages, and a button lets you jump back down.
On top of that it offers animated pieces, including streaming text where the newest words land in blue and settle into ink, a typing indicator, number tickers and a shimmer plugin for Tailwind CSS v4.
Pick it when you are building a full chat product and want streaming, branching, attachments and tool UI handled, not just a pretty loader.
Watch out for: It is a framework, not a snippet. If you only need a typing indicator, you are pulling in a runtime and a set of primitives you may never use.
8. Gifted Chat typing indicator: Best for React Native chat apps
Platform: React Native, MIT
Gifted Chat is the long-running React Native chat UI, with about 14,000 stars. Set `isTyping` to true and it shows its built-in typing indicator at the bottom of the thread; pass `renderTypingIndicator` to swap in your own component, or `typingIndicatorStyle` to restyle the default one.
It is a good reference for the plumbing behind a typing indicator: the dots are a footer of the message list, so they scroll with the thread and disappear when the next message arrives, instead of floating over it.
Watch out for: The README says the original package is in maintenance mode and points to a maintained fork, kesha-antonov/react-native-chat, which adds streaming AI messages. Start new projects there.
9. Duolingo's Lily in Video Call, built with Rive: Best for an AI character that listens and reacts
Platform: Rive (state machine), native mobile apps
Duolingo turned its deadpan character Lily into a conversation partner for Video Call, and Rive's case study explains how the motion is wired. A Rive State Machine drives her mouth positions, facial expressions and camera moves; nested artboards let her head and body move independently; and events let the AI's responses trigger expressions in sync. She listens, ponders during processing delays and reacts.
The team built eight head and eight body animations that combine into more than 64 idle variations, and the final file is under a megabyte. That is the pattern for any chatbot with a face: a small set of states blended by input, not a library of long pre-rendered clips.
If you want the stateful idea without a character, our Voice Orb below is a pure-CSS take: it wobbles gently while listening and beats in bigger pulses while speaking.
Watch out for: Character work is a design project, not a component. Budget for an animator who knows Rive state machines, and make sure the idle loop is calm enough to sit on screen for a whole conversation.
10. Our Assistant Typing Indicator: Best for a modern typing bubble with no JavaScript
Platform: Motions directory, free, pure CSS Ours
The classic three dots, updated for an assistant: an avatar with a light arc circling its rim, and a soft bubble where the dots rise and brighten in a smooth wave, 0.15s apart. The bubble's tail points at the avatar so it reads as the bot, not the user.
It is HTML and CSS only, with `role="status"` and an accessible label so screen readers hear that the assistant is typing. With reduced motion on, the arc stops and the dots slow to a gentle 3.9 second pulse instead of disappearing, so the state is still visible.
Watch out for: Show it only while you are actually waiting for the first token. Once text streams, swap it for the reply; a typing bubble sitting above streaming text says the same thing twice.
11. Our Agent Tool Call Card: Best for showing a bot that is running a tool
Platform: Motions directory, free, pure CSS Ours
npm test
Running 42 tests
42 passed, 0 failed
Modern chatbots do more than talk: they search, read files and run commands, and the user needs to see that happening. This card reads Bash npm test, pings a live dot while a timer counts up, then pops a check and settles on 42 passed. The timer is an animated @property integer, so there is no script ticking it.
Use the same card shape for every tool your bot calls and only change the label and result. For other agent states, the AI Animations directory has web search chips, file reading pills, permission prompts and error retries in the same style.
Watch out for: A timer that counts up forever is worse than none. If a tool can take minutes, add a real progress source or a plain "still working" line after a few seconds.
12. Our Follow-up Suggestion Chips: Best for suggested replies after an answer lands
Platform: Motions directory, free, pure CSS Ours
Ask a follow-up
The end of a reply is the moment to offer the next question. These pill buttons rise into place under the answer on a staggered spring with a little blur, then one glint passes across each chip so the eye notices them once and moves on.
They are real buttons with hover and focus styles, so they work from the keyboard. Stagger only on first appearance; when the user scrolls back up, the chips should already be there.
Watch out for: Do not animate suggestions in before the reply finishes streaming. Chips that jump in under half a sentence pull attention away from the answer.
How to choose chatbot animations
Map the four moments first
List what your chat does: send, wait, reply, and side work like tools or searches. Each needs exactly one motion. A send transition like Telegram's, one waiting state (a typing bubble or a shimmer, not both), one streaming treatment like Streamdown's fade, and one card shape for tool calls. Most chats that feel messy have three loaders and no send animation.
Match it to your stack
On React with shadcn/ui, AI Elements and prompt-kit drop straight in. For a full chat product with branching and auto-scroll, assistant-ui saves weeks. React Native chats start from the maintained Gifted Chat fork. If you want no dependencies, every pattern in our AI Animations directory is plain HTML and CSS you can paste into any framework, and the AI Loaders collection covers the waiting states.
Match it to the model's speed
Fast models stream in bursts, so use a blur-in fade or a server-side smoother like smoothStream. Slow reasoning models need a waiting state that can sit for ten seconds without looking stuck, which is why shimmering labels and a step-by-step reasoning trace beat bouncing dots there. Our AI thinking animation guide goes deeper on that wait.
Fix your chat's weakest moment today
Open your chatbot, send a message and watch it like a stranger would. Find the moment where nothing moves, or where three things move at once, and replace it with one pattern from this list. Most teams start with the waiting state or the send transition, because those are the ones users notice.
If none of these match your brand, describe the motion you want, or paste your existing chat component, and the creator turns it into production CSS keyframes with a reduced-motion fallback.
Make a typing indicator for my AI chat assistant. An avatar on the left with a thin accent ring, and a rounded bubble with three dots. The dots rise 3px and brighten in a wave, 1.3s loop, 0.15s stagger, ease-in-out. When the first token arrives, the bubble widens into the reply with a 200ms clip-path reveal. With prefers-reduced-motion, stop the ring and slow the dots to a soft opacity pulse. Use role="status" and an aria-label, and CSS only.
Common questions
How do you animate a chatbot typing indicator?
Use three small circles inside a bubble and run one @keyframes animation on all of them with staggered delays (about 0.15s to 0.2s apart) that changes opacity and a few pixels of translateY. Keep it under 1.5 seconds per loop, give the container role="status" with a label, and under prefers-reduced-motion slow it down rather than removing it. Our Assistant Typing Indicator is a working example.
Should AI chat responses stream word by word or appear all at once?
Stream them. Showing the first words early makes the wait feel shorter, and a short fade on each new word hides the uneven bursts that models send. Tools like the AI SDK's smoothStream pace the text on the server, and Streamdown's animated mode fades it in on the client.
What animation should a chatbot show while it is thinking?
For a short wait, a typing bubble is enough. For reasoning models that can take ten seconds or more, use a shimmering label such as Thinking or Searching, or a step list that updates as the model works, so the user can tell it is making progress rather than stuck.
How do I make chat animations accessible?
Respect prefers-reduced-motion, as Apple does by tying iMessage effects to Reduce Motion. Announce waiting states with role="status" instead of relying on motion, never auto-play full-screen effects on every message, and make sure streaming does not move the scroll position while someone is reading.
Can I build chatbot UI animations with only CSS?
Yes for the visuals: typing dots, shimmer labels, message entrances, fades on streamed words and tool-call cards are all CSS keyframes and transitions. You still need JavaScript to decide when each state starts and ends, because that depends on your stream.