Trail

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

const BlueSquare: React.FC = () => <div></div>
// - BlueSquare

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

// @include: example-BlueSquare
// ---cut---
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 contributors={[ { username: 'UmungoBungo', contribution: 'Implementation', }, ]} />

See also

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