Preview
Usage
Each message in the conversation is described by a ChatMessage:
type ChatMessage = {
text: string
side: "left" | "right"
typingFrames: number // how long the "..." typing indicator shows
delay: number // frame at which this message starts animating
}
Messages stack from the bottom of the screen. As newer messages arrive, older ones spring upward to make room. Tune typingFrames and delay per message to control the rhythm of the conversation.
Props
| Name | Type | Default |
|---|---|---|
| contactName | string | "sanku" |
| contactAvatar | string | "https://github.com/aryanranderiya.png" |
| messages | ChatMessage[] | [5 items] |
| theme | "light" | "dark" | "light" |
Composition
- ID
- MessageBubbles
- Resolution
- 1280×720
- FPS
- 60
- Duration
- 13.0s