About this set
Three kinds of movement a speech bubble needs, all CSS keyframes. Typing indicators shows a bubble with three dots that bounce in turn beside the sender’s avatar, and a pill whose dots pulse beside the words Assistant is writing; both are role=”status” regions with readable text. Messages that pop in plays a four-message conversation in which each bubble scales up from the corner its tail sits on, with a slight overshoot, one after another; a –i custom property on each bubble sets its place in the order. A Replay animation button restarts the sequence, which is the only JavaScript in the set: about six lines that remove a class, force a reflow and add it back. Without JavaScript the messages still pop in once on load. Help nudge that pops in and bobs shows a support launcher whose help bubble appears after a second, bobs twice and then stays still, so it stops moving within five seconds. Under prefers-reduced-motion every animation is switched off and each bubble is shown in its final state.
What’s included
- Bouncing and pulsing typing indicators with role="status"
- Messages that pop in from their tail corner in sequence
- Replay button with about six lines of vanilla JavaScript
- Nudge bubble that bobs twice and stops
- Everything holds still under prefers-reduced-motion
Accessibility
Both typing indicators are role="status" regions with text, Ines is typing or Assistant is writing, so the dots are not the only cue. Messages start with visually hidden sender names, the replay and chat buttons have names and a 2px focus outline, and under prefers-reduced-motion all keyframes are removed and every bubble is visible.
Customise it
Set --an-out, --an-in and --an-dot on .an for colours, change the .55s step in the pop-in delay to speed the sequence up, and the iteration count of an-bob for the nudge (keep the total under five seconds). In Tailwind the animations are the --animate-an-* theme values; Bootstrap uses the same CSS with .btn and .rounded-pill.
