Glass Chat
Glassmorphism chat interface with backdrop blur and background image. Features frosted glass message bubbles and smooth animations.
Main Features of Glass Chat
How to Use Glass Chat in Next.js
Installation Guide for Glass Chat
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundImage | string | "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=1000&auto=format&fit=crop" | URL of the background image. |
messages | Array<{ id: number; text: string; sender: 'me' | 'other'; senderName?: string; time?: string }> | [] | Array of message objects to display. |
className | string | undefined | Additional CSS classes for custom styling. |
onSendMessage | (message: string) => void | undefined | Callback function called when a message is sent. |