Avatar Pulse Message Chat
Avatar with pulsing animation and pop-in message bubble. Features dual pulse rings and animated message appearance with spring physics.
Main Features of Avatar Pulse Message Chat
How to Use Avatar Pulse Message Chat in Next.js
Installation Guide for Avatar Pulse Message Chat
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. |