Plugins
Animation
Keyframe animation, timeline control, and export.
Animation layers for keyframe-based motion with timeline control and video export.
Installation
npm install @genart-dev/plugin-animationLayer Types
| Type ID | Display Name | Description |
|---|---|---|
animation:timeline | Timeline | Keyframe timeline controlling parameter animation over time |
Properties
animation:timeline
| Property | Type | Default | Description |
|---|---|---|---|
duration | number | 5 | Animation duration in seconds |
fps | number | 30 | Frames per second |
loop | boolean | true | Loop the animation |
easing | select | "ease-in-out" | Default easing: linear, ease-in, ease-out, ease-in-out |
keyframes | array | [] | Array of keyframe definitions |
autoplay | boolean | false | Start playing automatically |
Each keyframe in the keyframes array has:
| Field | Type | Description |
|---|---|---|
time | number | Time position in seconds |
param | string | Parameter name to animate |
value | any | Value at this keyframe |
easing | string | Per-keyframe easing override |
MCP Tools
| Tool | Description |
|---|---|
add_keyframe | Add a keyframe at a specific time for a parameter |
set_animation | Configure animation duration, FPS, loop, and easing |
export_animation | Export the animation as video (MP4/WebM) or GIF |
Example
{
"tool": "design_add_layer",
"arguments": {
"type": "animation:timeline",
"properties": {
"duration": 10,
"fps": 30,
"loop": true,
"easing": "ease-in-out",
"keyframes": [
{ "time": 0, "param": "rotation", "value": 0 },
{ "time": 5, "param": "rotation", "value": 180 },
{ "time": 10, "param": "rotation", "value": 360 }
]
}
}
}