<CameraMotionBlur>
available from v3.2.39
The <CameraMotionBlur>
produces natural looking motion blur similar to what would be produced by
a film camera.
For this technique to work, the children must be absolutely positioned so many layers can be created without influencing the layout.
You can use the <AbsoluteFill>
component to absolutely position content.
The technique is destructive to colors. It is recommended to keep the samples
property as low as
possible and carefully inspect that the output is of acceptable quality.
API
Wrap your content in <CameraMotionBlur>
and optionally add the following props in addition.
shutterAngle
optional - default: 180
Controls the amount of blur.
A lower value will result in less blur and a higher value will result in more.
The blur also depends on the frames per second (FPS). Higher FPS will naturally have less blur and lower FPS will have more blur.
In movies and TV common values are (FPS/shutter angle):
- 24 fps / 180° or 90°
- 25 fps / 180° or 90°
- 30 fps / 180° or 90°
- 50 fps / 180° or 90°
- 60 fps / 180° or 90°
What is "shutter angle"?
The most common values used in the film industry are 90 and 180 degrees. These values are the same as what you've experienced in most movies.
Read more here: Rotary disc shutter on Wikipedia
samples
optional - default: 10
The final image is an average of the samples. For a value of 10
the component will render ten
frames with different time offsets and combine them into a final image.
A high number will produce a higher quality blur at the cost of image quality. See example below.
Recommended values: 5-10.
Example usage
tsx
import {CameraMotionBlur } from "@remotion/motion-blur";import {AbsoluteFill } from "remotion";export constMyComposition = () => {return (<CameraMotionBlur shutterAngle ={180}samples ={10}><AbsoluteFill style ={{backgroundColor : "white",justifyContent : "center",alignItems : "center",}}><RainbowSquare /></AbsoluteFill ></CameraMotionBlur >);};
tsx
import {CameraMotionBlur } from "@remotion/motion-blur";import {AbsoluteFill } from "remotion";export constMyComposition = () => {return (<CameraMotionBlur shutterAngle ={180}samples ={10}><AbsoluteFill style ={{backgroundColor : "white",justifyContent : "center",alignItems : "center",}}><RainbowSquare /></AbsoluteFill ></CameraMotionBlur >);};
Demo
Credits
The technique was developed by @marcusstenbeck and inspired by
the <Trail>
component developed by @UmungoBungo.