Plugins
Compositing
Layer compositing — solid fills, gradients, images, and groups.
Compositing layers for backgrounds, overlays, and layer organization.
npm install @genart-dev/plugin-compositing
| Type ID | Display Name | Description |
|---|
composite:solid | Solid | Flat color fill layer |
composite:gradient | Gradient | Linear or radial gradient fill |
composite:image | Image | Image layer with fit/fill/stretch modes |
composite:group | Group | Layer group with shared blend mode and opacity |
| Property | Type | Default | Description |
|---|
color | color | "#ffffff" | Fill color |
opacity | number | 1.0 | Layer opacity (0-1) |
| Property | Type | Default | Description |
|---|
type | select | "linear" | Gradient type: linear, radial, conic |
angle | number | 180 | Gradient angle in degrees (linear only) |
stops | array | [{"offset":0,"color":"#000"},{"offset":1,"color":"#fff"}] | Color stop array |
centerX | number | 0.5 | Center X for radial/conic (0-1) |
centerY | number | 0.5 | Center Y for radial/conic (0-1) |
radius | number | 0.5 | Radius for radial gradient (0-1) |
opacity | number | 1.0 | Layer opacity (0-1) |
| Property | Type | Default | Description |
|---|
src | string | "" | Image source (URL or data URI) |
fit | select | "cover" | Fit mode: cover, contain, fill, stretch |
positionX | number | 0.5 | Horizontal position (0-1) |
positionY | number | 0.5 | Vertical position (0-1) |
opacity | number | 1.0 | Layer opacity (0-1) |
| Property | Type | Default | Description |
|---|
children | array | [] | Array of child layer IDs |
blendMode | select | "normal" | Group blend mode |
opacity | number | 1.0 | Group opacity (0-1) |
collapsed | boolean | false | Collapsed in layer panel |
| Tool | Description |
|---|
design_add_solid | Add a solid color fill layer |
design_add_gradient | Add a gradient fill layer |
design_add_image | Add an image layer |
design_add_group | Create a layer group |
{
"tool": "design_add_layer",
"arguments": {
"type": "composite:gradient",
"properties": {
"type": "radial",
"stops": [
{ "offset": 0, "color": "#1a1a2e" },
{ "offset": 0.5, "color": "#16213e" },
{ "offset": 1, "color": "#0f3460" }
],
"centerX": 0.5,
"centerY": 0.4,
"radius": 0.8
}
}
}