Save component
save_componentSave an overlay to the library so it can be reused across videos. With a brand kit on the project it goes into that brand's pack (brandId; null = the whole team), which the brand's projects list first. Use {{prop}} placeholders in html/css (HTML-escaped in html) and {{prop_json}} in 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": {
"name": "<name>",
"html": "<html>"
},
"name": "save_component"
}
}Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| id | No | ||
| js | No | ||
| css | No | ||
| html | Yes | ||
| name | Yes | ||
| props | No | ||
| brandId | No | ||
| duration | No | ||
| projectId | No | Project to act on (default: the open one) | |
| description | No |