Plugins
Filters
Post-processing effects including grain, vignette, duotone, blur, and chromatic aberration.
Post-processing filter layers that apply visual effects over the sketch canvas.
npm install @genart-dev/plugin-filters
| Type ID | Display Name | Description |
|---|
filter:grain | Grain | Film grain noise overlay |
filter:vignette | Vignette | Darkened edges with configurable radius and intensity |
filter:duotone | Duotone | Maps luminance to a two-color gradient |
filter:blur | Blur | Gaussian blur effect |
filter:chromatic-aberration | Chromatic Aberration | RGB channel offset for lens distortion effect |
| Property | Type | Default | Description |
|---|
intensity | number | 0.3 | Grain intensity (0-1) |
size | number | 1 | Grain particle size |
monochrome | boolean | true | Use monochrome grain |
| Property | Type | Default | Description |
|---|
intensity | number | 0.5 | Darkness intensity (0-1) |
radius | number | 0.7 | Inner radius before falloff (0-1) |
softness | number | 0.5 | Edge softness (0-1) |
color | color | "#000000" | Vignette color |
| Property | Type | Default | Description |
|---|
darkColor | color | "#000000" | Color mapped to shadows |
lightColor | color | "#ffffff" | Color mapped to highlights |
intensity | number | 1.0 | Effect strength (0-1) |
| Property | Type | Default | Description |
|---|
radius | number | 4 | Blur radius in pixels |
type | select | "gaussian" | Blur type: gaussian, box, motion |
angle | number | 0 | Angle for motion blur (degrees) |
| Property | Type | Default | Description |
|---|
offsetX | number | 3 | Horizontal channel offset in pixels |
offsetY | number | 0 | Vertical channel offset in pixels |
intensity | number | 0.5 | Effect strength (0-1) |
| Tool | Description |
|---|
design_apply_grain | Add or configure grain filter |
design_apply_vignette | Add or configure vignette filter |
design_apply_duotone | Add or configure duotone filter |
design_apply_blur | Add or configure blur filter |
design_apply_chromatic_aberration | Add or configure chromatic aberration |
{
"tool": "design_add_layer",
"arguments": {
"type": "filter:grain",
"properties": {
"intensity": 0.15,
"size": 1.5,
"monochrome": true
}
}
}