Notification stack

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

social/notifications
Social
social
Overlay with alpha
6 s (3–30 s)

Notification stack at 16:9 — 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/notifications --out notifications.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("social/notifications"), { props: {}, out: "notifications.mov" });

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

Props

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

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 part takes any move, ease or idle: --motion items.in=pop.

Part	What it is
`items`	each notification

Tags: notification, stack, cascade, ui, overlay

Notification stack

Render it

Props

Parts

More in Social

Follow card

Notification

Comments

Chat thread

Social post

Now playing