@remotion/effectsv4.0.464

Effects that can be applied to Remotion-based canvas components.

Remotion CLI

npx remotion add @remotion/effects

npm

npm i --save-exact @remotion/effects@4.0.534

This assumes you are currently using v4.0.534 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

bun

pnpm i @remotion/effects@4.0.534

This assumes you are currently using v4.0.534 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

pnpm

bun i @remotion/effects@4.0.534

This assumes you are currently using v4.0.534 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

yarn

yarn --exact add @remotion/effects@4.0.534

This assumes you are currently using v4.0.534 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

Supported components

Pass effects through the effects prop of these components:

• <Solid>
• <HtmlInCanvas>
• <Video>
• <Img>
• <CanvasImage>
• <AnimatedImage>
• <Gif>
• <RemotionRiveCanvas>
• <Rect>
• <Circle>
• <Triangle>
• <Star>
• <Ellipse>
• <Pie>
• <Polygon>
• <Heart>
• <Arrow>

Effect resolutionv4.0.535

Use effectsOutputSize on any supported component to choose the pixel dimensions used by its effect chain:

<Video
  src="https://example.com/video.mp4"
  effects={[pixelate({blockSize: 12})]}
  effectsOutputSize={{width: 1920, height: 1080}}
/>;

Both dimensions must be positive integers. The source is resized to this resolution before the effects run, and the result is composited back into the component's existing output canvas. CSS layout, cropping, and the output video's dimensions stay the same.

This is useful when switching between an original video and a smaller proxy: keeping the effect resolution fixed keeps pixel-based parameters, such as pixelation block sizes, in the same coordinate space. It also applies to images, animated images, GIFs, Rive canvases, solids, HTML-in-canvas, and shapes.

Omitting effectsOutputSize preserves the existing effect resolution. Empty or entirely disabled effect chains do not resize the source. To change the resolution, update the numeric width and height; passing a new object with the same values does not recreate the effect chain. Video previews redraw the current frame when these values change without restarting their decoder.

A larger effect resolution increases processing and canvas memory. Resizing a low-resolution source cannot restore missing detail. This prop controls effect processing; maxCanvasSinkFrameSize separately controls decoded preview frame size.

Effects

Color

brightness()

Brightness adjustment effect

contrast()

Contrast adjustment effect

colorCorrection()

Combined primary color adjustments

colorKey()

Remove a key color (greenscreen)

duotone()

Two-color threshold effect

exposure()

Stop-based exposure adjustment

grayscale()

Black-and-white effect

hue()

Hue rotation effect

invert()

Negative color effect

levels()

Black point, white point, and gamma

lut()

Apply an inline 3D Cube LUT

saturation()

Saturation adjustment effect

shadowsHighlights()

Recover dark and bright tonal regions

tint()

Color tint effect

whiteBalance()

Temperature and tint correction

vibrance()

Selective saturation adjustment

linearGradient()

Two-stop gradient effect

linearGradientTint()

Gradient tint effect

thermalVision()

Thermal heat-map color effect

Blur & Shadow

blur()

Gaussian blur effect

linearProgressiveBlur()

Gradient-controlled blur effect

radialProgressiveBlur()

Ellipse-controlled blur effect

regionBlur()

Blur a rectangular or rounded region

zoomBlur()

Radial zoom blur effect

dropShadow()

Blurred alpha shadow effect

glow()

Soft halo effect

outline()

Solid alpha outline effect

lightTrail()

Directional light trail effect

Reveal

evolve()

Directional reveal effect

tear()

Progressive zigzag tear with outward rotation

venetianBlinds()

Slatted reveal effect

Transform

mirror()

Mirror reflection effect

scale()

Scale transform effect

tile()

Repeat the visible source bounds

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

cornerPin()

Pin source corners to a quad

wave()

Sine wave distortion

skew()

Skew the source on two axes

Stylize

burlap()

Procedural woven texture effect

emboss()

Procedural raised-line relief

dotGrid()

Source-color dot mask effect

halftone()

Source-image halftone effect

noise()

Procedural grain effect

noiseDisplacement()

Localized noisy displacement

paper()

Procedural paper texture effect

roughenEdges()

Procedural alpha-edge roughening

pattern()

Repeated source tile effect

pixelDissolve()

Pixelated dissolve effect

pixelate()

Pixelation effect

linearProgressivePixelate()

Gradient-controlled pixelation

radialProgressivePixelate()

Ellipse-controlled pixelation

scanlines()

Additive horizontal scanlines

speckle()

Random alpha-hole effect

shine()

Glossy light sweep effect

shrinkwrap()

Procedural plastic wrap effect

vignette()

Edge darkening or transparency effect

Generate

contourLines()

Topographic line overlay effect

liquidContours()

Two-color liquid contour background

checkerboard()

Checkerboard pattern effect

flannel()

Plaid woven fabric pattern

halftoneLinearGradient()

Procedural dot gradient effect

gridlines()

Procedural grid pattern effect

whiteNoise()

Random grayscale noise layer

tvSignalOff()

TV color bars test pattern

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

Creating custom effects

To build your own effect, use createEffect() from remotion. It creates a custom effect factory and uses InteractivitySchema for Studio controls.

License

Remotion License