Get it on npm

Live chat

A live chat over the stream: messages arrive at the bottom and push the earlier ones up, each name in its own colour, under a LIVE header with the viewer count.

  • social/live-chat
  • Social
  • social
  • Overlay with alpha
  • 7 s (3–60 s)
Style
Live in your browser
Live chat at 16:9
0.00 / 7.00 s
npx volito render social/live-chat --style pastel --out live-chat.mov
Playing live with volito/browser, the engine a render uses. Each tab lays the item out again for that shape, not a crop. The graphic is transparent; the grey stands in for your footage.

Render it

npx volito render social/live-chat --prop viewers="2.4K" --out live-chat.mov

That writes ProRes 4444 with alpha, ready to drop over footage. The same item in another shape, brand or format:

volito render social/live-chat --aspect 9:16 --style cobalt --out live-chat-9x16.mov
volito render social/live-chat --format mp4 --out live-chat.mp4
volito still social/live-chat --t 3.5 --out live-chat.png
volito info social/live-chat     # every prop and part
volito add social/live-chat      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("social/live-chat"), { props: { viewers: "2.4K" }, out: "live-chat.mov" });

Or ask an agent with the MCP server connected: “Render the Volito live chat (social/live-chat) in 9:16, in our brand.”

Props

Set each with --prop name=value, or all at once with --props and a JSON object.

PropTypeDefaultTakes
viewerstext2.4K≤ 10 chars
messages
Messages (Name: text)
list{"name":"ana_r","text":"the colour on this is unreal"}; {"name":"kenji","text":"how long did the edit take?"}; {"name":"leanovak","text":"cutting on the beat >>>"}; {"name":"sam.o","text":"first time catching it live!"}; {"name":"priya","text":"can you share the LUT?"}; {"name":"tomasz","text":"this is the best one yet"}—

Parts

Each part takes any move, ease or idle: --motion panel.in=pop.

PartWhat it is
panelthe panel and header
messagesthe messages

Tags: live, chat, stream, comments, twitch

More in Social

Follow card

A profile card: picture or initials, name with a verified check, handle, a follower count that counts up, a line of bio and a Follow button a cursor presses.

Notification

A phone or desktop notification slides in: the app's icon and name, the time, a bold title and the message.

Notification stack

Notifications land one after another and stack up, each new one pushing the pile down.

Comments

Comment cards appear one by one: a picture or initials, the name, the time, the words typing on and a like count.

Chat thread

A message thread plays out: their bubbles arrive after a typing indicator, yours on the right in the accent.

Social post

A post card: picture or initials, name, handle and check, the words, and likes, reposts and replies counting up as a heart pops.