<Trail>
available from v3.2.39, previously called <MotionBlur>
The <Trail>
component duplicates it's children and adds a time offset to each layer in order to create a trail effect.
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.
API
Wrap your content in <Trail>
and add the following props in addition.
layers
How many layers are added below the content. Must be an integer
lagInFrames
How many frames each layer is lagging behind the last one. Can also a floating point number.
trailOpacity
previously called blurOpacity
The highest opacity of a layer. The lowest opacity is 0 and layers intbetween get interpolated.
Example usage
tsx
import {Trail } from "@remotion/motion-blur";import {AbsoluteFill } from "remotion";export constMyComposition = () => {return (<Trail layers ={50}lagInFrames ={0.1}trailOpacity ={1}><AbsoluteFill style ={{backgroundColor : "white",justifyContent : "center",alignItems : "center",}}><BlueSquare /></AbsoluteFill ></Trail >);};
tsx
import {Trail } from "@remotion/motion-blur";import {AbsoluteFill } from "remotion";export constMyComposition = () => {return (<Trail layers ={50}lagInFrames ={0.1}trailOpacity ={1}><AbsoluteFill style ={{backgroundColor : "white",justifyContent : "center",alignItems : "center",}}><BlueSquare /></AbsoluteFill ></Trail >);};
Demo
Credits
This technique was invented and first implemented by @UmungoBungo.