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​