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?​

Limits how long the blurred content appears on its parent timeline, starting at from. 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.

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.

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​