Navigation & Structure
Avatar Pulse Message Chat
Avatar with pulsing animation and pop-in message bubble. Features dual pulse rings and animated message appearance with spring physics.
navigation-structurechatavatarpulsemessageanimationnotification
Props
Customize the component with these 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. |