Social
Follow cards, notifications, comments, chat threads, posts, now playing and ratings — the social and app UI that videos borrow, in any brand, any aspect.
← All packs · 8 items · social/
Follow card
social/follow-cardA 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.
volito render social/follow-card --prop name="MONARC Studio" --prop handle="@monarcstudio" --out follow-card.mov| Prop | Type | Default | Takes |
|---|---|---|---|
name | text | MONARC Studio | ≤ 26 chars |
handle | text | @monarcstudio | ≤ 28 chars |
followers | number | 248000 | 0 – 999999999 |
bio | text | Edits that feel directed, not assembled. | ≤ 60 chars |
platform | choice | instagram | tiktok | youtube | x | linkedin | threads | website | |
photo | image | — | — |
verified | boolean | true | — |
action · Button | text | Follow | ≤ 14 chars |
done · Button after | text | Following | ≤ 14 chars |
position | choice | auto | auto | center | bottom-left | bottom-right |
Parts (each takes any move with --motion): card the card, avatar the picture, name the name and handle, stats the follower count, bio the bio, button the button, cursor the cursor.
Notification
social/notificationA phone or desktop notification slides in: the app's icon and name, the time, a bold title and the message.
volito render social/notification --prop app="MONARC" --prop title="Your cut is ready" --out notification.mov| Prop | Type | Default | Takes |
|---|---|---|---|
app | text | MONARC | ≤ 18 chars |
icon | icon | sparkle | — |
title | text | Your cut is ready | ≤ 40 chars |
message | text | Three versions exported in 4K. Tap to review before you post. | ≤ 110 chars |
time | text | now | ≤ 10 chars |
look | choice | phone | phone | desktop |
Parts (each takes any move with --motion): banner the notification.
Notification stack
social/notificationsNotifications land one after another and stack up, each new one pushing the pile down.
volito render social/notifications --out notifications.mov| Prop | Type | Default | Takes |
|---|---|---|---|
items · Notifications (App: message) | list | {"app":"Sales","text":"New order — $1,240"}; {"app":"Mail","text":"The client signed off on the cut"}; {"app":"Calendar","text":"Launch call moved to 3 pm"}; {"app":"Bank","text":"Payment received from Northwind"} | — |
gap · Seconds between | number | 0.75 | 0.2 – 5 |
icon | icon | bell | — |
Parts (each takes any move with --motion): items each notification.
Comments
social/commentsComment cards appear one by one: a picture or initials, the name, the time, the words typing on and a like count.
volito render social/comments --out comments.mov| Prop | Type | Default | Takes |
|---|---|---|---|
items · Comments (Name: words) | list | {"name":"maya.edits","text":"This transition is unreal. How long did it take?"}; {"name":"jordan_k","text":"Saving this for my next edit"}; {"name":"alex.rivera","text":"The pacing in the first 3 seconds 🔥"} | — |
likes · Likes on the first | number | 1240 | 0 – 9999999 |
gap · Seconds between | number | 1.6 | 0.4 – 6 |
Parts (each takes any move with --motion): items each comment.
Chat thread
social/chatA message thread plays out: their bubbles arrive after a typing indicator, yours on the right in the accent.
volito render social/chat --prop contact="Sam · Producer" --out chat.mov| Prop | Type | Default | Takes |
|---|---|---|---|
contact | text | Sam · 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 | number | 1.4 | 0.4 – 6 |
Parts (each takes any move with --motion): header the contact bar, messages each bubble, typing the typing dots.
Social post
social/postA post card: picture or initials, name, handle and check, the words, and likes, reposts and replies counting up as a heart pops.
volito render social/post --prop name="Maya Chen" --prop handle="@mayaedits" --out post.mov| Prop | Type | Default | Takes |
|---|---|---|---|
name | text | Maya Chen | ≤ 26 chars |
handle | text | @mayaedits | ≤ 26 chars |
text · Post | longtext | Stopped editing timelines by hand this year. I describe the cut, the agent builds it, I direct. Shipping three times as much. | ≤ 280 chars |
photo | image | — | — |
verified | boolean | true | — |
likes | number | 18400 | 0 – 999999999 |
reposts | number | 2310 | 0 – 999999999 |
replies | number | 412 | 0 – 999999999 |
time | text | 2h | ≤ 12 chars |
Parts (each takes any move with --motion): card the card, author the name line, text the words, stats the counts, heart the heart.
Now playing
social/now-playingA music card: the cover (or a generated one), the title and artist, a progress bar moving with the clip and an equaliser.
volito render social/now-playing --prop title="Midnight Edit" --prop artist="The Long Cut" --out now-playing.mov| Prop | Type | Default | Takes |
|---|---|---|---|
title · Song | text | Midnight Edit | ≤ 32 chars |
artist | text | The Long Cut | ≤ 32 chars |
cover | image | — | — |
length · Length (m:ss) | text | 3:42 | ≤ 6 chars |
start · Starts at (0–1) | number | 0.34 | 0 – 1 |
position | choice | auto | auto | center | bottom-left | bottom-right |
Parts (each takes any move with --motion): card the card, cover the cover, title the song and artist, progress the progress bar, eq the equaliser.
Rating
social/ratingStars fill one by one to the score, the score counts up, then a review and its author fade in.
volito render social/rating --prop count="from 2,480 reviews" --prop author="Priya S., creative director" --out rating.mov| Prop | Type | Default | Takes |
|---|---|---|---|
score · Score (out of 5) | number | 4.8 | 0 – 5 |
count · Count line | text | from 2,480 reviews | ≤ 40 chars |
quote · Review | longtext | The fastest way we've found to get from raw footage to something we're proud to post. | ≤ 200 chars |
author | text | Priya S., creative director | ≤ 40 chars |
Parts (each takes any move with --motion): ground the ground, stars the stars, score the score and count, quote the review, author who wrote it.