Motion Blur

Simulating the natural blur that occurs in camera footage and human vision during fast motion. Essential for cinematic quality in video production.

Core Concepts

How Motion Blur Works

Real cameras have a shutter that's open for a portion of each frame. Objects moving during this exposure create blur along their motion path.

Shutter Angle:
- 180 degrees = 1/48s exposure at 24fps (film standard)
- 360 degrees = full frame exposure (maximum blur)
- 90 degrees = sharp, staccato look (action sports)

When to Use Motion Blur

Token Reference

Load from: tokens/motion-blur.tokens.json

Remotion Implementation

Per-Frame Motion Blur

import React from 'react';
import { useCurrentFrame, interpolate } from 'remotion';

// Calculate velocity-based blur
export const useMotionBlur = (
  currentPosition: number,
  previousPosition: number,
  intensity: 'subtle' | 'standard' | 'cinematic' | 'action' = 'standard'
) => {
  const velocity = Math.abs(currentPosition - previousPosition);
  const intensityMap = { subtle: 0.3, standard: 0.5, cinematic: 0.8, action: 1.0 };
  const threshold = 5;

  if (velocity < threshold) return 0;

  const blurAmount = interpolate(
    velocity,
    [threshold, threshold * 3],
    [0, intensityMap[intensity] * 10],
    { extrapolateRight: 'clamp' }
  );

  return blurAmount;
};

Smear Frame (Disney Technique)

// Disney-style smear frame for fast motion
export const SmearFrame: React.FC<{
  velocity: number;
  threshold: number;
  direction: 'horizontal' | 'vertical';
  children: React.ReactNode;
}> = ({ velocity, threshold, direction, children }) => {
  if (Math.abs(velocity) < threshold) {
    return <>{children}</>;
  }

  const stretchFactor = 1 + Math.abs(velocity) / 500;
  const clampedStretch = Math.min(stretchFactor, 3);

  const transform = direction === 'horizontal'
    ? `scaleX(${clampedStretch})`
    : `scaleY(${clampedStretch})`;

  return (
    <div style={{ transform, opacity: 0.8 }}>
      {children}
    </div>
  );
};

Quality Presets

export const motionBlurPresets = {
  preview: { samples: 4, quality: 'low', realtime: true },
  draft: { samples: 8, quality: 'medium', realtime: true },
  production: { samples: 16, quality: 'high', realtime: false },
  maximum: { samples: 24, quality: 'maximum', realtime: false }
};

Accessibility

// Disable motion blur for reduced motion preference
export const AccessibleMotionBlur: React.FC<{
  reducedMotion: boolean;
  children: React.ReactNode;
}> = ({ reducedMotion, children, ...blurProps }) => {
  if (reducedMotion) {
    return <>{children}</>;
  }
  return <MotionBlurElement {...blurProps}>{children}</MotionBlurElement>;
};

Common Mistakes

1. Blur on text - Never blur text, destroys readability
2. Static blur - Blur should respond to velocity
3. Too much blur - Loses object definition
4. Inconsistent FPS - Match blur to frame rate
5. Performance hit - Multi-sample blur is expensive

Related Skills

• frame-timing/ - Frame-accurate timing for blur
• remotion/ - Remotion-specific implementations
• accessibility/ - Reduced motion alternatives
• testing-patterns/ - Testing motion blur output

See references/ for detailed multi-sample implementations.