Skip to main content

<HtmlInCanvasMotionBlur>v4.0.529

EXPERIMENTAL

This component uses the experimental HTML-in-canvas browser API.

<HtmlInCanvasMotionBlur> is the state-of-the-art recommended way to achieve motion blur in Remotion.
It requires HTML-in-canvas to be enabled during preview. Rendering needs no configuration.

MyComposition.tsx
import {
  HtmlInCanvasMotionBlur,
} from '@remotion/motion-blur';
import {useCurrentFrame, useVideoConfig} from 'remotion';

const MovingBox = () => {
  const frame = useCurrentFrame();

  return (
    <div
      style={{
        position: 'absolute',
        left: frame * 10,
        top: 300,
        width: 120,
        height: 120,
        backgroundColor: '#ff6b6b',
      }}
    />
  );
};

export const MyComposition = () => {
  const {width, height} = useVideoConfig();

  return (
    <HtmlInCanvasMotionBlur
      width={width}
      height={height}
      samples={8}
      shutterAngle={180}
    >
      <MovingBox />
    </HtmlInCanvasMotionBlur>
  );
};

Props​

children​

The content to blur.
Make sure to call useCurrentFrame() from a child component, so <HtmlInCanvasMotionBlur> can override the time context correctly.

width​

The canvas width in pixels. Must be a positive integer. Use the composition width from useVideoConfig() to cover the full frame.

height​

The canvas height in pixels. Must be a positive integer. Use the composition height from useVideoConfig() to cover the full frame.

from?​

Moves the blurred content on its parent timeline. Default: 0.

durationInFrames?​

Selects how many child frames are shown, starting at trimBefore. The blurred content occupies durationInFrames / playbackRate frames in its parent timeline. By default, it lasts until the composition ends.

trimBefore?​

Skips the beginning of the content without moving its from position. Default: 0.

playbackRate?​

Changes how quickly the child frames advance. Default: 1. The motion blur samples follow this speed.

loop?​

Repeats the range selected by trimBefore and durationInFrames. Set a finite durationInFrames when enabling loop. Default: false.

See Timing and trimming for how these props combine.

samples?​

How many snapshots are averaged. Default: 8, min: 1, max: 64.
Higher values make the blur smoother but cost more work during preview and rendering.

disabled?v4.0.530​

Disable motion blur while keeping the content inside <HtmlInCanvas>. Default: false. When true, the component captures one sample at the current frame. You can keyframe this prop in Remotion Studio to turn motion blur on or off without remounting the canvas.

shutterAngle?​

How long the exposure is, expressed as an angle from 0 to 360. Default: 180.
At 180, samples span half a frame centered on the current frame.
At 0, no motion blur is applied.
Samples outside the composition are clamped to its first or last frame.

Nested HTML-in-canvas caveat​

Nested <HtmlInCanvas> components are currently unsupported, so children of <HtmlInCanvasMotionBlur> cannot contain another <HtmlInCanvas> component or vice versa.

Compatibility​

BrowsersEnvironments
Chrome
Firefox
Safari

See also​