Skip to main content

<Trail>

import { TrailExample } from "../../components/TrailExample/TrailExample";

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 const MyComposition = () => {
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 const MyComposition = () => {
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.

See also