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

Effects can be added programmatically, interactively or agentically.

Programmatically

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})]}
    />
  );
};

Interactively

In Remotion Studio, first add an element that supports effects. Drag a video into the canvas, or add a <Solid> by right-clicking an empty space in the timeline.

Then drag an effect from the table of contents below into the element.

Agentically

Ask an agent with Remotion Skills installed to add an effect while following Remotion conventions:

txt

Use Remotion best practices. Add a blur effect to the video.

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

To build your own effect, use createEffect(). It supports 2D Canvas APIs, WebGL2 and WebGPU, and creates an effect factory that can be passed to an effects array.

Effects