← Back to catalog
pointers / agent-cursor
Agent Cursor
An AI agent operating a UI: a cursor with an accent name label that types out each step, clicks each target with a small ring, and ends on a check.
Use this effect
VideoML XML
Save this example as example.videoml.xml. Run vml pipeline example.videoml.xml with a VideoML installation that supports frame effects.
<vml id="catalog-example" width="1280" height="720" fps="30" duration="4.8s">
<voiceover seed="0"/>
<scene id="example" start="0s" duration="4.8s">
<frame-effect id="effect" effect-id="videoml/agent-cursor" effect-version="1" props='{"parameters":{"agent_name":"Agent","steps":"Reading the page,Opening Settings,Turning on backups,Done","targets":"25,47;76,30","accent":"#0a84ff"}}' start="0s" duration="4.8s"/>
</scene>
</vml>
TypeScript
Requires the frozen stdlib package, a page element with id="effect-root", and the referenced local assets. Revoke any generated object URLs when the host disposes the effect.
import { createEffectRegistry, mountEffect } from '@videoml/stdlib/effects';
import { registerCatalogC001 } from '@videoml/stdlib/effects/catalog-c001';
const root = document.querySelector<HTMLElement>('#effect-root');
if (!root) throw new Error('Missing #effect-root');
const assets: Record<string, string> = {};
const registry = createEffectRegistry();
registerCatalogC001(registry);
const effect = mountEffect(root, registry, {
"id": "videoml/agent-cursor",
"version": "1",
"parameters": {
"agent_name": "Agent",
"steps": "Reading the page,Opening Settings,Turning on backups,Done",
"targets": "25,47;76,30",
"accent": "#0a84ff"
},
"startFrame": 0,
"endFrame": 144
}, { width: 1280, height: 720, fps: 30, seed: 0, assets });
await effect.seek(0);
// Call await effect.dispose() and revoke asset URLs when finished.implemented · interactive preview
This entry is implemented but not yet verified.