Image Filters Overview

Image filters are pixel-level operations applied to Image nodes and image fill types via the filters prop. Unlike Node Effects (which apply after the entire node is composited), image filters operate directly on the image texture before it is drawn.

Where filters apply

// On an Image node
<Image src="./photo.jpg" fit="fill" width={600} height={400} filters={[{ type: 'grayscale', value: 1 }]} />

// On an image fill
<Rect fill={{ type: 'image', src: './photo.jpg', filters: [{ type: 'blur', value: 5 }] }} />

Using the ImageFilters builder

The ImageFilters builder provides a chainable API: each method returns a new immutable FilterChain.

import { ImageFilters } from '@motion-script/core';

<Image src="./photo.jpg" fit="fill" width={600} height={400}
  filters={ImageFilters.grayscale(1).blur(3).colorAdjustment({ brightness: 0.1 })}
/>

Available filters

Filter	Key props	Description
`blur`	`value`	Gaussian blur
`grayscale`	`value`	Desaturate
`alpha`	`value`	Adjust opacity
`exposure`	`value`	Brighten/darken
`colorAdjustment`	Many	Photographic adjustments
`colorMatrix`	`matrix`	Raw 4×5 color matrix
`curves`	`points`, `channel`	Tone curve adjustment

Chaining

All filters can be chained with ImageFilters:

const look = ImageFilters
  .grayscale(0.6)
  .colorAdjustment({ contrast: 1.2, highlights: -0.1 });

<Image src="./photo.jpg" fit="fill" width={600} height={400} filters={look} />

Or passed as a plain array:

filters={[
  { type: 'grayscale', value: 0.6 },
  { type: 'colorAdjustment', contrast: 1.2 },
]}