Product UI
Chat Conversation — editable Remotion component
A polished app-style message thread with grouped consecutive messages, adjustable timing, WhatsApp bubbles, and image or initials avatars.
Component details
- Version
- 0.9.0
- License
- MIT
- Duration
- 5.0 seconds
- Dimensions
- 1080 × 1350
Prerequisite: Create a Remotion project
Agent Motion installs components into an existing Remotion project. If you are starting fresh, create the standard project structure first:
npx @agent-motion/cli create remotion my-remotion-video
Add editable source
Run this command from the root of your Remotion project. No separate Agent Motion CLI installation is required.
npx @agent-motion/cli add chat-conversation@0.9.0
Agent guidance
- The outer canvas is transparent; the chat window keeps its own intrinsic app surface.
- Use two to twelve short messages in chronological order.
- Every message object must include text and a side value of incoming or outgoing.
- Repeat a side value in adjacent message objects to group consecutive messages from the same sender.
- Messages appear at the bottom and push the existing conversation upward like a real messenger.
- Use staggerInFrames to control conversation speed and bubbleStyle to choose WhatsApp tails or regular rounded bubbles.
- Pass avatarSrc for an image avatar or omit it to derive initials from contact.
- Use theme for a coordinated light or dark palette and pass backgroundSrc to replace the generated chat wallpaper.
- Adjust contactFontSize, statusFontSize, messageFontSize, composerFontSize, and avatarFontSize independently.
- Leave x, y, width, and height unset for a centered chat window occupying eighty percent of the composition.
- Do not fabricate customer quotes when the scene represents a real testimonial.