Effects<AvailableFrom v="4.0.464" />

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

Supported components

The following components support effects:

<Solid>
<HtmlInCanvas>
<Video>
``
<CanvasImage>
<AnimatedImage>
<Gif>
<RemotionRiveCanvas>
@remotion/shapes components<AvailableFrom v="4.0.474" inline />

Usage

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

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

import {TableOfContents} from './effects/table-of-contents';

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.

Effects