Drag and drop

The cursor picks up a file card — it lifts, with a deeper shadow — carries it along a curve to a dashed drop zone that lights up as it arrives, lets go, and the zone confirms.

cursors/drag-drop
Cursors
callout
Overlay with alpha
5 s (3–20 s)

Drag and drop 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 cursors/drag-drop --prop file="interview_final.mp4" --prop size="2.4 GB · 4K" --out drag-drop.mov

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

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

From Node:

import { findItem, renderVideo } from "volito";

await renderVideo(findItem("cursors/drag-drop"), { props: { file: "interview_final.mp4", size: "2.4 GB · 4K" }, out: "drag-drop.mov" });

Or ask an agent with the MCP server connected: “Render the Volito drag and drop (cursors/drag-drop) 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
`file`	text	interview_final.mp4	≤ 40 chars
`size`	text	2.4 GB · 4K	≤ 24 chars
`zone`	text	Drop to upload	≤ 30 chars
`done`	text	Uploaded	≤ 24 chars
`fromX` Card across (%)	number	28	0 – 100
`fromY` Card down (%)	number	50	0 – 100
`toX` Zone across (%)	number	70	0 – 100
`toY` Zone down (%)	number	50	0 – 100

Parts

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

Part	What it is
`zone`	the drop zone
`card`	the file card
`cursor`	the cursor

Tags: drag and drop, upload, file, cursor, ui

More in Cursors

Agent cursor

An AI agent working a UI: its cursor glides to each target while its name tag types out the step, clicks with a ring, moves on, and ends with a check and the done line. Places in % of the frame.

Multiplayer cursors

Several people's cursors at once, each with a name tag in its own colour, drifting over the frame on their own paths and clicking now and then — a live, shared document.

Text select

Selecting text: a paragraph on a card, an I-beam drags across a phrase as the highlight grows word by word, lets go, and a small toolbar pops over the selection with one action pressed.

Context menu

A right-click: the cursor arrives and clicks, a menu opens beside it with items and shortcuts, the cursor moves to one item — it lights up — and clicks it, and the menu closes. Places in % of the frame.