Chat Animation Studio

📁 Upload Background

Upload the HTML page where you want the chat to appear (e.g., M365 Copilot interface). Leave blank for a simple background.

📄

Click to Upload Background HTML

Or drag and drop here

✓ Loaded: snapshot-1760370929454.html (interactive elements removed for clean display)

🎨 Design Message Styles

Design message styles or import from a saved configuration.

Agent Message

Message Components Show Avatar/Icon Show Agent Name/Title Show Action Buttons

Background

Text Color

Border Radius 8px

Padding 16px

Customer Message

Message Components Show Avatar/Icon Show Customer Name/Title Show Action Buttons

Background

Text Color

Border Radius 8px

Padding 16px

Agent message preview

Customer message preview

💬 Build Conversation

Quick Start: Import a conversation JSON or add messages manually below.

Message Type

Message Text

Messages (8)

customer

Consolidate all assets for the Henderson family an...

agent

Consolidating customer assets across all accounts ...

customer

What specific financial products should I recommen...

agent

Analyzing portfolio gaps and generating targeted p...

customer

Generate natural language summaries I can use to e...

agent

Creating clear, natural language summaries to faci...

customer

How will implementing these recommendations help m...

agent

Analyzing impact on organizational C-Suite objecti...

📐 Position Overlay

Drag the chat overlay to position it on your background. Resize using the handle in the bottom-right corner.

Overlay Background

Overlay Opacity 100%

Border Radius 8px

▶️ Animation Preview

Watch your chat conversation animate. Adjust speed and playback options below.

Animation Speed 3.0s per message

Frame 2 / 8

💾 Export & Save

Export Frames: Download HTML files for each animation frame.
Export Standalone: Create a single self-contained HTML file with full animation controls.
Save Project: Save entire project to continue later.

🔊 Voice Narration Not Configured

Configure Azure Text-to-Speech to add voice narration to your chat animations. Voice will play automatically during playback.

Azure TTS Key

Region

Voice

Project Management

✓ Project saved successfully! File: chat-animation-project-1760731127009.json

Present & Export

What's included in project file:
• Background HTML
• All message styles
• Conversation messages
• Overlay position & styling
• Animation settings

🎉

Your Chat Animation is Ready!

You've successfully created a chat animation with 8 messages.

Use the sidebar to save your project for later, or export frames to use in presentations.

🎬

Present Mode

Screen record your demo

💾

Save Project

Reload anytime to continue editing

📥

Export Frames

8 HTML files ready

💡 Pro Tip

Save your project before exporting frames! This way you can come back later to make changes without starting from scratch.

🎬 Chat Animation Studio

Agent Message

Customer Message

Messages (8)

🔊 Voice Narration Not Configured

Project Management

Present & Export

Your Chat Animation is Ready!

🎨 Captured Styles