Filter

Layer options

  • Name
    name
    Type
    string
    required
    Description

    A string name of one of the supported filters

  • Name
    options
    Type
    object
    Description

    An object used to configure one of the configurable filters

Reading and updating layer options

filter.setFilter({ name: 'brightness', options: { brightness: 1.1 })
filter.name; // "brightness"
filter.options; // { brightness: 1.1 }

Supported filters

The following filters are currently supported:

Filter nameConfigurable
brightness✓️
contrast
fadein
fadeout
grayscale
lighten
negative
saturation
sobel
vintage

Filter options

brightness options

OptionTypeDescription
brightnessnumberA number between -1 and 1

contrast options

OptionTypeDescription
contrastnumberA number between -1000 and 1000

fadein options

OptionTypeDescription
colorstringAny hexadecimal, rgb, or named color
durationnumberFade length in seconds
startTimenumberThe time in the composition, in seconds, at which to start the fade

fadeout options

OptionTypeDescription
colorstringAny hexadecimal, rgb, or named color
durationnumberFade length in seconds
startTimenumberThe time in the composition, in seconds, at which to start the fade

saturation options

OptionTypeDescription
saturationnumberA number between 0 and 3

Examples

Brightness & Grayscale

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({ name: "grayscale" });
composition.addFilter({ 
  name: "brightness", 
  options: { brightness: 0.5 } 
});

Contrast

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({ 
  name: "contrast", 
  options: { contrast: 42 } 
});

Fadein

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
  name: "fadein",
  options: {
    color: "#2f2649",
    duration: 2,
    startTime: 0,
  },
});

Fadeout

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
  name: "fadeout",
  options: {
    color: "#2f2649",
    duration: 2,
    startTime: 0,
  },
});

Saturation

await composition.addVideo(
  "https://editframe.com/docs/composition/layers/filter/puppy-beach.mp4"
);
composition.addFilter({
  name: "saturation",
  options: {
    saturation: 2,
  },
});