<Trail>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

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

layers={50}

trailOpacity={1}

lagInFrames={0.3}

CONTRIBUTORS

UmungoBungo

Implementation

Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

See also

• Source code for this component
• Common mistake with <Trail> and <CameraMotionBlur>