# @remotion/motion-blur

Creates motion blur and trail effects by duplicating elements with time offsets.

**Package:** `@remotion/motion-blur`

## Installation

```bash
npm i @remotion/motion-blur
```

## Trail Component

Duplicates children with time lag to create afterimage/trail effects.

```tsx
import { Trail } from '@remotion/motion-blur';
import { AbsoluteFill } from 'remotion';

export const MotionBlurExample = () => {
  return (
    <Trail layers={50} lagInFrames={0.1} trailOpacity={1}>
      <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
        <MovingElement />
      </AbsoluteFill>
    </Trail>
  );
};
```

### Props

| Prop | Type | Description |
|------|------|-------------|
| `layers` | `number` | How many duplicate layers (must be integer) |
| `lagInFrames` | `number` | Time offset between each layer (can be fractional) |
| `trailOpacity` | `number` | Max opacity of trail layers (0 to 1) |

### How It Works

- Creates `layers` copies of children
- Each copy is offset by `lagInFrames` in time
- Opacity interpolates from 0 (oldest) to `trailOpacity` (newest)
- Children must be **absolutely positioned** (use `<AbsoluteFill>`)

## Tips

### Fast-moving objects
```tsx
// More layers, smaller lag = smoother trail
<Trail layers={50} lagInFrames={0.1} trailOpacity={0.8}>
```

### Ghosting effect
```tsx
// Fewer layers, larger lag = distinct ghosts
<Trail layers={5} lagInFrames={2} trailOpacity={0.5}>
```

### Performance
More layers = more renders per frame. Keep `layers` reasonable (20-50 for smooth blur, 3-10 for distinct ghosts).

## Common Mistake

Children MUST be absolutely positioned. The trail renders multiple layers stacked — if they're not positioned, they'll stack vertically instead of overlapping.

```tsx
// ❌ Wrong - elements will stack
<Trail layers={10} lagInFrames={0.5} trailOpacity={1}>
  <div>This won't work right</div>
</Trail>

// ✅ Correct - use AbsoluteFill
<Trail layers={10} lagInFrames={0.5} trailOpacity={1}>
  <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
    <div>This works</div>
  </AbsoluteFill>
</Trail>
```

## See Also

- [Remotion docs](https://www.remotion.dev/docs/motion-blur)
