Regions define areas where filters or effects are applied. They can be used with filters to create localized effects like selective blur, color grading in specific areas, or masked transitions.
Regions are specified in the region property of a filterAgent or effect configuration. They support various geometric shapes and gradient masks.
| Prop | Type | Required | Example | Value Range | Description |
|---|---|---|---|---|---|
| type | string | true | - | circle | ellipse | rectangle | roundedRect | triangle | polygon | star | ring | heart | linear | radial | The shape type of the region. |
| enabled | boolean | false | - | - | Whether the region mask is active. |
| invert | boolean | false | - | - | If true, the effect is applied outside the region instead of inside. |
| centerX | number | false | - | - | The horizontal center position of the region, normalized (0-1, where 0.5 is center). |
| centerY | number | false | - | - | The vertical center position of the region, normalized (0-1, where 0.5 is center). |
| width | number | false | - | - | The width of the region, normalized (0-1). |
| height | number | false | - | - | The height of the region, normalized (0-1). |
| rotation | number | false | - | - | The rotation angle of the region, in radians. |
| feather | number | false | - | - | The edge softness/blur amount, normalized (0-1). Higher values create softer edges. |
rectangle, roundedRect)star)ring)linear, radial)Apply a blur filter only to a circular area in the center:
1{
2"filterAgent": {
3 "type": "Basic Blur",
4 "options": [{ "key": "radius", "value": 10 }],
5 "region": {
6 "type": "circle",
7 "enabled": true,
8 "invert": false,
9 "centerX": 0.5,
10 "centerY": 0.5,
11 "width": 0.3,
12 "height": 0.3,
13 "feather": 0.1
14 }
15}
16}
17Apply a color filter everywhere except a rectangular area:
1{
2"filterAgent": {
3 "type": "Sepia",
4 "region": {
5 "type": "rectangle",
6 "enabled": true,
7 "invert": true,
8 "centerX": 0.5,
9 "centerY": 0.5,
10 "width": 0.6,
11 "height": 0.4,
12 "feather": 0.05
13 }
14}
15}
16Apply a filter with a gradient transition from top to bottom:
1{
2"filterAgent": {
3 "type": "Bloom",
4 "options": [{ "key": "strength", "value": 1.5 }],
5 "region": {
6 "type": "linear",
7 "enabled": true,
8 "linearAngle": 1.5708,
9 "gradientStart": 0.3,
10 "gradientEnd": 0.7,
11 "feather": 0
12 }
13}
14}
15Create a star-shaped mask:
1{
2"filterAgent": {
3 "type": "Glow",
4 "region": {
5 "type": "star",
6 "enabled": true,
7 "centerX": 0.5,
8 "centerY": 0.5,
9 "width": 0.4,
10 "height": 0.4,
11 "starPoints": 5,
12 "starInnerRadius": 0.4,
13 "rotation": 0,
14 "feather": 0.05
15 }
16}
17}
181{
2"filterAgent": {
3 "type": "Pixelate",
4 "options": [{ "key": "size", "value": 16 }],
5 "region": {
6 "type": "roundedRect",
7 "enabled": true,
8 "centerX": 0.5,
9 "centerY": 0.5,
10 "width": 0.5,
11 "height": 0.3,
12 "cornerRadius": 0.1,
13 "rotation": 0.785398,
14 "feather": 0.02
15 }
16}
17}
180.5 = center of the canvas/element0 = left/top edge1 = right/bottom edgeradians = degrees × π / 18090° = 1.5708 rad, 180° = 3.14159 rad, 45° = 0.785398 rad0 = hard edge (sharp transition)filterAgent.region): Controls where a filter effect is appliedmaskData): Crops the element itself (node-level clipping)| Shape | Description | Special Parameters |
|---|---|---|
| circle | Perfect circle | width sets diameter |
| ellipse | Elliptical shape | width and height independent |
| rectangle | Rectangular area | - |
| roundedRect | Rectangle with rounded corners | cornerRadius |
| triangle | Triangular shape | - |
| polygon | Multi-sided polygon | points (vertex count) |
| star | Star shape | starPoints, starInnerRadius |
| ring | Donut/ring shape | ringInnerRadius |
| heart | Heart shape | - |
| linear | Linear gradient mask | linearAngle, gradientStart/End |
| radial | Radial gradient mask | gradientStart/End |