Live preview · real tokens, not a screenshot
When to pick it
The most animated design here. Bubbles arrive with a spring rather than a fade and the radius is fully round. Right for a young consumer audience, wrong for a bank.
How it is built
A spring curve on entry with a small overshoot. Every spring is disabled under prefers-reduced-motion — overshoot is exactly the motion that causes problems, so it is cut rather than shortened.
Accessibility
13.4:1. All spring motion is removed, not reduced, under reduced-motion.
Every design in this gallery states that it is an AI assistant at the start of the conversation and honours prefers-reduced-motion. Neither is configurable, because both are obligations rather than preferences.
Good fit for
- Consumer apps
- Gaming
- Social
- Youth brands
Source code
Take Bloom anywhere.
You can deploy this design through ChatBrace on any plan, including the free trial — that never changes. A paid plan also gets you the standalone HTML, CSS and JavaScript for it, to drop into a project of your own with or without ChatBrace behind it.
Seven designs ship their source to everyone, no account needed.
Put it on your site
before you finish your coffee.
A hundred free messages, no card, and a playground to try it in before you touch a single line of your own markup.