Skip to main content

Motion blur

To realize a realistic motion blur, a frame needs to be duplicated multiple times and blended together.

Remotion provides a @remotion/motion-blur package to achieve this.

<HtmlInCanvasMotionBlur> is the state-of-the-art implementation of motion blur.

It requires HTML-in-canvas to be enabled during preview. Rendering needs no configuration.

Camera motion blur

<CameraMotionBlur> works in browsers that don't have HTML-in-canvas enabled, but layered blending can change colors and opacity.

Set shutterAngle to control the exposure length and samples to control smoothness.

Trail

<Trail> repeats earlier positions behind the current one.

It does not aim to reproduce a realistic camera exposure.

See also