Get it on npm

Chat thread

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

  • social/chat
  • Social
  • social
  • Overlay with alpha
  • 8 s (3–60 s)
Live in your browser
Chat thread at 16:9
0.00 / 8.00 s
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/chat --prop contact="Sam · Producer" --out 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/chat --aspect 9:16 --style cobalt --out chat-9x16.mov
volito render social/chat --format mp4 --out chat.mp4
volito still social/chat --t 4 --out chat.png
volito info social/chat     # every prop and part
volito add social/chat      # copy its source into ./motion to edit

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("social/chat"), { props: { contact: "Sam · Producer" }, out: "chat.mov" });

Or ask an agent with the MCP server connected: “Render the Volito chat thread (social/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
contacttextSam · Producer≤ 28 chars
messages
Messages (me: … / them: …)
list{"who":"them","text":"Did the new cut land?"}; {"who":"me","text":"Rendering now — 3 versions"}; {"who":"them","text":"Send the vertical one first"}; {"who":"me","text":"On its way 🚀"}—
gap
Seconds between
number1.40.4 – 6

Parts

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

PartWhat it is
headerthe contact bar
messageseach bubble
typingthe typing dots

Tags: chat, messages, dm, texting, ui

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.

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.

Now playing

A music card: the cover (or a generated one), the title and artist, a progress bar moving with the clip and an equaliser.