Effectsv4.0.464

Pixels of canvas-based components can be manipulated using effects.

Supported components

The following components support effects:

• <Solid>
• <HtmlInCanvas>
• <Video>
• <Img>
• <CanvasImage>
• <AnimatedImage>
• <Gif>

Usage

Pass effects through the effects prop as an array of effect functions:

MyComp.tsx
import {Video} from '@remotion/media';
import {blur} from '@remotion/effects/blur';

export const MyComp: React.FC = () => {
  return (
    <Video
      src="https://remotion.media/video.mp4"
      effects={[blur({radius: 40})]}
    />
  );
};

Multipass

Multiple effects can be combined. They apply in the order they are specified.

Available effects

Color

brightness()

Brightness adjustment effect

contrast()

Contrast adjustment effect

colorKey()

Remove a key color (greenscreen)

duotone()

Two-color threshold effect

grayscale()

Black-and-white effect

hue()

Hue rotation effect

invert()

Negative color effect

saturation()

Saturation adjustment effect

tint()

Color tint effect

Blur & Shadow

blur()

Gaussian blur effect

dropShadow()

Blurred alpha shadow effect

glow()

Soft halo effect

Reveal

evolve()

Directional reveal effect

Transform

mirror()

Mirror reflection effect

scale()

Scale transform effect

uvTranslate()

UV-based translate effect

xyTranslate()

Pixel-based translate effect

Distort

barrelDistortion()

Barrel distortion effect

chromaticAberration()

RGB channel split effect

fisheye()

Ultra-wide-angle lens effect

wave()

Sine wave distortion

Stylize

dotGrid()

Source-color dot mask effect

halftone()

Source-image halftone effect

noise()

Procedural grain effect

pixelDissolve()

Pixelated dissolve effect

scanlines()

Additive horizontal scanlines

speckle()

Random alpha-hole effect

shine()

Glossy light sweep effect

vignette()

Edge darkening or transparency effect

Generate

halftoneLinearGradient()

Procedural dot gradient effect

whiteNoise()

Random grayscale noise layer

lines()

Alternating line pattern effect

rings()

Concentric ring pattern effect

waves()

Wavy band pattern effect

zigzag()

Zig-zag band pattern effect

lightLeak()

Light leak overlay effect

starburst()

Starburst ray effect

Visual editing in Studio

When you select a component with effects in Remotion Studio, you can edit effect parameters in the timeline and toggle effects.

Custom effects

It will be possible in a future version of Remotion to create your own effects based on 2D Canvas APIs, WebGL or WebGPU and to mix them together.

We are working on a nice API that shall be future-proof, which is why we have not released it yet.

See also

• @remotion/effects