Remotion effects

@remotion/effects is Remotion's package of shader effects (blur(), vignette(), glow()) for canvas components. Kinetograph runs the copy in your project's node_modules. It ships none of Remotion's effect code, so install the package yourself, at the same version as remotion. The package is covered by Remotion's licence, and a company may need a Remotion Company License to use it; Kinetograph ships none of its code.

import { CanvasImage } from 'remotion';
import { blur } from '@remotion/effects/blur';
import { vignette } from '@remotion/effects/vignette';

<CanvasImage src={staticFile('photo.png')} effects={[blur({ radius: 12 }), vignette()]} />;

• effects works on every component Remotion gives it to: <Solid>, <Img>, <CanvasImage>, <AnimatedImage>, <Gif>, <Video> (from @remotion/media), <HtmlInCanvas>, Rive and the @remotion/shapes components (<Rect>, <Circle>, <Triangle>, <Star>, <Ellipse>, <Pie>, <Polygon>, <Heart>, <Arrow>, <Callout>, <Spark>). <OffthreadVideo> and <Html5Video> take none in Remotion either.
• The canvas an effect draws on is the picture's own size: the video's or GIF's pixels, the shape's box (times pixelDensity), or effectsOutputSize. A <Video> with effects is fitted to its box with objectFit, contain by default.
• <Video>, <Gif> and the shapes also take the engine's own effects (blur(8)) in the same array. Those apply to the finished picture, after Remotion's.
• Most effects have a WebGPU and a WebGL 2 implementation, a few also a 2D one. Kinetograph tries WebGPU, then WebGL 2, then 2D, and uses the first that draws the frame. It warns once when it falls back. Pass --preferred-effect-backend webgpu|webgl2|2d to render, still, strip or onion to try one first. The same choice comes from window.remotion_preferredEffectBackend or a PreferredEffectBackendContext provider, as in Remotion, and the context wins over the window value. The environment variable KINETOGRAPH_PREFERRED_EFFECT_BACKEND overrides all three.
• kinetograph doctor <entry> prints the installed @remotion/effects version, warns when it differs from the one the table below was measured with, and lists the effects your project imports that are approximated or not yet supported.
• An effect that reads the pixels of its picture (tile(), outline(), the 2D brightness() and contrast()) makes the frame one extra draw of the layer, a few milliseconds at 960 × 540. If the pixels cannot be read, the picture is drawn without the effect and the frame reports it, so --strict fails.
• State from setup doesn't carry to the next frame. See What works.

StatusCopy Anchor Link

Each effect is rendered by Remotion in Chrome and by Kinetograph, at frame 0, 960 × 540, and compared by PSNR. Supported means 50 dB or more on the backend Kinetograph picks. The table is generated from that run, with one set of parameters per effect.

89 of 89 are supported, 0 approximated, 0 not yet. Measured against Remotion 4.0.540 in Chrome.

ComponentsCopy Anchor Link

The same check on components other than <CanvasImage>: blur, grayscale and vignette in a chain (and rainFall, a heavy WebGPU effect) on an <Img>, a frame of a <Video> and two shapes, at 960 × 540. A video is compared with its colour matrix tagged (BT.709): an untagged file is read with another matrix by Chrome and Kinetograph.