Subchapter 8.24

Motion Blur

motion-blur.mdMarkdown2 KBView on GitHub

Use @remotion/motion-blur for frame-driven motion blur.
Install it with npx remotion add @remotion/motion-blur.

<HtmlInCanvasMotionBlur> is the state of the art in Remotion for blurring animated HTML. It captures the content at fractional frames and averages its pixels in a canvas.

`<HtmlInCanvasMotionBlur>`

Motion Blur · Remotion Markup · remotion-dev/skills · Skills Docs

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: 200,
        width: 120,
        height: 120,
        backgroundColor: '#ff6b6b',
      }}
    />
  );
};

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

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