Add html overlay
add_html_overlayPut an animated HTML overlay on the timeline: a library component with props (see list_components), or your own html/css/js. HTML overlays are full-frame transparent pages (project width x height px) laid over the video for the clip's duration. Authoring rules (the exporter seeks the page frame by frame, so motion must be seekable):
Animate with CSS @keyframes / transitions or the Web Animations API. Time 0 = clip start. Do not use setTimeout/requestAnimationFrame for motion.
For JS-driven motion define window.montikSeek = (t, duration) => {...} (e.g. gsapTimeline.seek(t)).
Exit animations: animation-delay: calc(var(--clip-duration) - 0.4s) with fill-mode forwards.
Your project's images: {{media:ID}} (ids from list_media) becomes the image's address, in html, css, js or a prop: . PNG, JPEG, WebP and GIF. A page can show one but can't read its pixels back from a canvas.
Brand variables: --brand-primary --brand-secondary --brand-accent --brand-text --brand-background, --font-heading --font-body, --brand-logo (url). Use them instead of hard-coded colours/fonts.
Lay out in px against the frame (var(--frame-w) / var(--frame-h)); keep text inside safe areas (avoid the top 8% and bottom 15% on vertical video).
No external network requests except fonts already in the library. Emoji render natively.
Design: one message per graphic, set as type in the shot's empty space, in the brand fonts. No eyebrow/kicker labels, pills, emoji, gradient text or white drop-shadow cards unless the brand calls for them; one motion idea per ad, easing out. See the brand-overlays playbook. Check the result with render_frame.
Tool call template
Replace each placeholder with a value matching the input schema. Only required parameters are included; add optional parameters as needed.
{
"id": 1,
"jsonrpc": "2.0",
"method": "tools/call",
"params": {
"arguments": {
"start": "<start>"
},
"name": "add_html_overlay"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| js | No | ||
| css | No | ||
| html | No | ||
| name | No | ||
| props | No | ||
| start | Yes | ||
| trackId | No | a text/graphics track; default picks or creates one | |
| duration | No | ||
| component | No | ||
| projectId | No | Project to act on (default: the open one) | |
| transform | No | x/y: offset in project pixels from canvas center (+y is down). scale: 1 = fit. rotation: degrees |