Motion Studio

Telegram Messages

An animated Telegram-style chat conversation with tailed bubbles, in-bubble timestamps, and the signature blue check marks.

Preview

Open editor

Usage

Telegram variant of the messages template. side: "right" is the blue outgoing bubble (with blue read-check marks), side: "left" is the white incoming bubble. The header shows the contact name with an online indicator.

Same ChatMessage shape as the iMessage component — text, side, typingFrames, delay. Bubbles spring in, the typing dots show until typingFrames elapses, then the bubble pops in. Older messages slide upward when newer ones arrive. The bubble tail collapses on consecutive messages from the same sender; only the most-recent in a run keeps the tail.

Props

NameTypeDefault
contactNamestring"sanku"
contactAvatarstring"https://avatars.githubusercontent.com/aryanranderiya?s=200"
messagesChatMessage[][5 items]
orientation"landscape" | "portrait""landscape"
scalenumber2

Composition

ID
TelegramMessages
Resolution
1280×720
FPS
60
Duration
11.0s

Source

Copy or download the React source — drop it into your own Remotion project. The only runtime dependency is remotion.

import type { ChatMessage } from "../../editors/types";
import { useDesignFrame } from "../../use-design-frame";
import { ChatDemo, type ChatMessageItem } from "../_chat-demo/ChatDemo";
import { ChatFill } from "../_chat-demo/ChatFill";

export type TelegramMessagesProps = {
  contactName: string;
  contactAvatar?: string;
  messages: ChatMessage[];
  orientation?: "landscape" | "portrait";
  scale?: number;
};

function buildItems(messages: ChatMessage[], frame: number): ChatMessageItem[] {
  const out: ChatMessageItem[] = [];
  for (let i = 0; i < messages.length; i++) {
    const m = messages[i]!;
    if (frame < m.delay) continue;
    const local = frame - m.delay;
    const isTyping = local < m.typingFrames;
    out.push({
      id: i,
      from: m.side === "right" ? "me" : "them",
      text: m.text,
      typing: isTyping,
      enterFrames: local,
    });
  }
  return out;
}

export const TelegramMessages: React.FC<TelegramMessagesProps> = ({
  contactName,
  contactAvatar = "https://avatars.githubusercontent.com/aryanranderiya?s=200",
  messages,
  orientation = "landscape",
  scale = 2,
}) => {
  const frame = useDesignFrame();
  const items = buildItems(messages, frame);

  return (
    <ChatFill
      backdrop="#2B78CD"
      chromeColor="#FFFFFF"
      scale={scale}
      orientation={orientation}
    >
      <ChatDemo
        platform="telegram"
        title={contactName}
        headerAvatar={contactAvatar}
        messages={items}
      />
    </ChatFill>
  );
};
Save as TelegramMessages/TelegramMessages.tsx
WhatsApp MessagesSlack Messages