Overview

Element

Basic Element

View Element

Video

Effect

Filter

Filters can be applied in two ways:

As an element attribute (filterAgent) - affects a specific image or video element
As a standalone element (effect array with type: "Filter") - applies to the entire canvas

Both methods support optional region masking to limit the filter effect to a specific area.

Prop	Type	Required	Example	Value Range	Description
type	string	true	Pixelate	Pixelate \| Ascii \| CRT \| Glitch \| Bloom \| RGB Split \| Old Film \| Dot \| Emboss \| Hatch \| Basic Blur \| Motion Blur \| TiltShift \| Zoom \| Glow \| Progressive blur \| Noise \| Vignette \| Koda \| Polaroid \| Sepia \| Lsd \| Desaturate \| Saturate \| Duotone \| Gradient Map \| Hologram \| 3D bulge/pinch \| Waves \| Mirror \| Replicate \| Noise Fill \| Pattern \| Reflective surface \| Chromatic aberration	The type of filter applied to the element.
options	array	false	-	-	An array of filter-specific options. Optional for filters with default values.
region	object	false	-	-	Optional region configuration to limit the filter effect to a specific area of the canvas or element. See the Region documentation for details.

Filter Categories

Stylize

Pixelate: Pixelates the image with configurable block size (default: size: 8)
Ascii: Converts image to ASCII art (default: size: 8, color: 0xffffff, replaceColor: 0)
Dot: Halftone dot effect (default: scale: 120)
Emboss: Creates an embossed appearance (default: strength: 1.5)
Hatch: Cross-hatch drawing effect (default: density: 80)
Chromatic aberration: Color channel separation effect (default: offset: 0.005, angle: 0)

Blur

Basic Blur: Simple Gaussian blur (default: radius: 2)
Motion Blur: Directional motion blur (default: radius: 6, direction: 0)
TiltShift: Tilt-shift blur effect (default: radius: 4)
Zoom: Radial zoom blur (default: strength: 0.1)
Progressive blur: Graduated blur effect (default: strength: 1.0, direction: 0)

Distort

RGB Split: Separates RGB channels (default: offset: 0.0025)
Glitch: Digital glitch effect (default: slices: 5, offset: 0.02, direction: 0)
CRT: CRT monitor simulation (no parameters)
3D bulge/pinch: 3D distortion effect (default: center: [0.5, 0.5], radius: 0.4, strength: 0.5)
Waves: Wave distortion (default: frequencyX: 10.0, frequencyY: 10.0, amplitudeX: 0.02, amplitudeY: 0.02)

Grading (Color Adjustment)

Sepia: Sepia tone effect
Saturate: Increases color saturation
Desaturate: Decreases color saturation (grayscale when fully applied)
Duotone: Two-color gradient mapping
Gradient Map: Maps luminance to custom color gradients
Hologram: Holographic visual effect
Koda, Polaroid, Lsd: Preset color grading styles

Effects

Bloom: Glow/bloom lighting effect
Glow: Neon glow effect
Noise: Film grain/noise overlay (default: amount: 0.1)
Vignette: Edge darkening effect (default: amount: 0.5, power: 2.0)

Composite (Multiple Filters Combined)

Old Film: Combines sepia, noise, and vignette for vintage film look

Misc

Mirror: Mirror reflection along an axis (default: axis: 0, position: 0.5)
Replicate: Tile/repeat the image (default: countX: 2.0, countY: 2.0)
Noise Fill: Procedural noise fill (default: scale: 10.0, intensity: 1.0, colorful: 0)
Pattern: Procedural pattern generation (default: scale: 10.0, patternType: 0)
Reflective surface: Simulates reflective materials (default: intensity: 0.5, roughness: 0.2)

Filter Application Order

When multiple effects are applied to an element, they are processed in this order:

Tone adjustments (brightness, contrast, saturation, etc.)
LUT (Lookup Table) color grading
Filters (filterAgent)

Effects in the effect array are applied in order of their trackIndex and start time.

Examples

Filter as Element Attribute

Apply a filter directly to a specific element using the filterAgent property:

imageWithFilter.json

{
"type": "",
"width": 1920,
"height": 1080,
"fill": "#000000",
"view": [
  {
    "id": "6b91fbc5-a69c-4783-8216-395b8feac9b2",
    "type": "Image",
    "start": 0,
    "duration": 5,
    "trackIndex": 1,
    "x": 0,
    "y": 0,
    "blendMode": "normal",
    "anchorX": 1310.5,
    "anchorY": 1965.5,
    "rotation": 0,
    "scaleX": 0.27473925209870265,
    "scaleY": 0.27473925209870265,
    "alpha": 1,
    "skewX": 0,
    "skewY": 0,
    "keyframes": [],
    "filterAgent": {
      "type": "RGB Split"
    },
    "externalUrl": "https://images.pexels.com/photos/30473423/pexels-photo-30473423.jpeg",
    "ext": "jpeg"
  }
],
"audio": [],
"effect": [],
"transition": [],
"version": 0,
"duration": 5
}

Filter as Canvas Effect

Apply a filter to the entire canvas by adding it to the effect array:

canvasFilter.json

{
"type": "",
"width": 1920,
"height": 1080,
"fill": "#000000",
"view": [
  {
    "id": "6b91fbc5-a69c-4783-8216-395b8feac9b2",
    "type": "Image",
    "start": 0,
    "duration": 5,
    "trackIndex": 1,
    "x": 0,
    "y": 0,
    "blendMode": "normal",
    "anchorX": 1310.5,
    "anchorY": 1965.5,
    "rotation": 0,
    "scaleX": 0.27473925209870265,
    "scaleY": 0.27473925209870265,
    "alpha": 1,
    "skewX": 0,
    "skewY": 0,
    "keyframes": [],
    "externalUrl": "https://images.pexels.com/photos/30473423/pexels-photo-30473423.jpeg",
    "ext": "jpeg"
  }
],
"audio": [],
"effect": [
  {
    "id": "87043853-c68d-4553-a7cb-6f4d503e9f17",
    "start": 0,
    "duration": 5,
    "trackIndex": 0,
    "filterAgent": {
      "type": "Pixelate",
      "options": [{ "key": "size", "value": 8, "min": 1, "max": 100 }]
    },
    "type": "Filter"
  }
],
"transition": [],
"version": 0,
"duration": 5
}

Filter with Region Masking

Apply a filter only to a circular region in the center:

filterWithRegion.json

{
"id": "87043853-c68d-4553-a7cb-6f4d503e9f17",
"start": 0,
"duration": 5,
"trackIndex": 0,
"filterAgent": {
  "type": "Pixelate",
  "options": [{ "key": "size", "value": 16 }],
  "region": {
    "type": "circle",
    "enabled": true,
    "invert": false,
    "centerX": 0.5,
    "centerY": 0.5,
    "width": 0.4,
    "height": 0.4,
    "feather": 0.05
  }
},
"type": "Filter"
}

Common Filter Parameters

Filter Type	Option Key	Type	Default	Description
Pixelate	size	number	8	Pixel block size (1-100)
Ascii	size	number	8	Character size
Ascii	color	number	0xffffff	Text color
Ascii	replaceColor	number	0	Background replacement mode
Basic Blur	radius	number	2	Blur radius
Motion Blur	radius	number	6	Blur amount
Motion Blur	direction	number	0	Blur direction in radians
TiltShift	radius	number	4	Blur radius
Zoom	strength	number	0.1	Zoom blur intensity
Progressive blur	strength	number	1.0	Blur strength
Progressive blur	direction	number	0	Gradient direction
RGB Split	offset	number	0.0025	Channel separation amount
Glitch	slices	number	5	Number of glitch slices
Glitch	offset	number	0.02	Displacement amount
Glitch	direction	number	0	Glitch direction
Dot	scale	number	120	Dot pattern scale
Emboss	strength	number	1.5	Emboss intensity
Hatch	density	number	80	Line density
Chromatic aberration	offset	number	0.005	Aberration offset
Chromatic aberration	angle	number	0	Aberration angle
3D bulge/pinch	center	array	[0.5, 0.5]	Effect center [x, y]
3D bulge/pinch	radius	number	0.4	Effect radius
3D bulge/pinch	strength	number	0.5	Distortion strength
Waves	frequencyX	number	10.0	Horizontal wave frequency
Waves	frequencyY	number	10.0	Vertical wave frequency
Waves	amplitudeX	number	0.02	Horizontal wave amplitude
Waves	amplitudeY	number	0.02	Vertical wave amplitude
Mirror	axis	number	0	Mirror axis (0=horizontal, 1=vertical)
Mirror	position	number	0.5	Mirror position (0-1)
Replicate	countX	number	2.0	Horizontal repetitions
Replicate	countY	number	2.0	Vertical repetitions
Noise Fill	scale	number	10.0	Noise pattern scale
Noise Fill	intensity	number	1.0	Noise intensity
Noise Fill	colorful	number	0	Color noise mode (0=grayscale, 1=color)
Pattern	scale	number	10.0	Pattern scale
Pattern	patternType	number	0	Pattern type index
Reflective surface	intensity	number	0.5	Reflection intensity
Reflective surface	roughness	number	0.2	Surface roughness
Noise	amount	number	0.1	Noise amount
Vignette	amount	number	0.5	Vignette intensity
Vignette	power	number	2.0	Vignette falloff

Note: Filters without configurable options (CRT, Sepia, Old Film, etc.) use their built-in defaults and don't require an options array.

Important Notes

Case Sensitivity: Filter type names are case-sensitive. Use exact names as listed above.
Option Format: Each option in the options array must have a key and value. The min and max properties are optional UI hints.
Composite Filters: Some filters like "Old Film" internally combine multiple effects and cannot be customized via options.
Performance: Complex filters (Bloom, Chromatic aberration, etc.) may impact rendering performance on lower-end devices.
Region Masking: When using region, the filter is only applied within the specified area. Set invert: true to apply the filter everywhere except the region.