Notification bell

A bell that rings: it swings on its hook, a badge pops in with the count, and it clears when read. In a page, hovering rings it and a click marks it read.

ui/bell
UI
social
Overlay with alpha
3 s (3–3 s)

Notification bell 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.

Try it live

In a page it is a live element: each state plays its stretch of the timeline, and hover and click switch them. Your code sets the rest with player.state. See Interactive states.

Notification bell

Hover to ring it, click to clear.

state: …

<script type="module" src="https://cdn.jsdelivr.net/npm/volito/dist/player.js"></script>
<volito-player item="ui/bell" aspect="1000x500" ground="none"></volito-player>

State	Plays	Then
`enter`	once	`idle`
`idle`	loop	stays
`ring`	once	stays
`clear`	once	`idle`

Page events: pointerenter(idle): ring; click(ring): clear

Render it

npx volito render ui/bell --out bell.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

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

Or ask an agent with the MCP server connected: “Render the Volito notification bell (ui/bell) 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
`count` New	number	3	1 – 99

Tags: ui, notification, bell, badge, alert, inbox, interactive, micro-interaction, web

More in UI

Button

A product button with every state: it springs in, breathes while idle, lifts on hover, presses, spins while it loads and lands on a check with the done label. In a page, <volito-player> plays each state on hover and click.

Toggle

A settings switch with its label: the knob stretches as it slides, the track fills with the accent, and it slides back. In a page, a click turns it on and off.

Like

A heart and its count: it breathes while idle, pops full with a burst when liked as the count rolls up by one, and empties again when unliked. In a page, a click likes and unlikes.

Loader

A status card that waits, then ends one of two ways: a spinner turns while the line says what is happening, then it closes into a ring with a check, or turns into a cross with a shake. In a page, your code sets the state when the work finishes.