Avatar Pulse Message Chat
Avatar with pulsing animation and pop-in message bubble. Features dual pulse rings and animated message appearance with spring physics.
Refresh preview
Share Component
Copy CLI command
Props
| Property | Type | Default | Description |
|---|---|---|---|
| avatarUrl | string | "https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" | URL of the avatar image. |
| message | string | "Hey! I'm online now." | Message text displayed in the bubble. |
| showPulse | boolean | true | Whether to display the pulse animation. |
| pulseColor | string | "#ec4899" | Color of the pulse rings (hex, rgb, or hsl). |
| avatarSize | number | 64 | Size of the avatar in pixels. |
| messagePosition | 'right' | 'left' | 'right' | Position of the message bubble relative to avatar. |
| className | string | undefined | Additional CSS classes for custom styling. |
| delay | number | 1 | Delay before message appears in seconds. |
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.