motion-blur

افزودن motion blur طبیعی و سینمایی به ویدیو و انیمیشن‌های سریع

این Skill تکنیک‌های motion blur وابسته به سرعت، shutter angle، smear frame و presetهای کیفیت را برای ویدیو و انیمیشن‌های پرتحرک ارائه می‌کند. با الگوهای آماده‌ی Remotion می‌توانید تاری حرکت را بر اساس velocity کنترل کنید.

برای ساخت خروجی‌های سینمایی، بازی‌مانند و حرفه‌ای مفید است و هم‌زمان به performance، نرخ فریم و دسترسی‌پذیری توجه دارد. این Skill همچنین از تاری بیش‌ازحد، تارشدن متن و ناسازگاری با reduced motion جلوگیری می‌کند.

چه چیزی می‌گیرید

• راهنمای انتخاب شدت blur از subtle تا action
• پیاده‌سازی velocity-based blur در `Remotion` و `React`
• الگوی Disney-style smear frame برای حرکت‌های سریع
• presetهای preview، draft، production و maximum
• راهنمای performance، نرخ فریم و پشتیبانی از reduced motion

برای چه کاری خوب است

• ساخت ویدیوهای سینمایی و تبلیغاتی با `Remotion`
• انیمیشن‌های سریع بازی‌مانند یا صحنه‌های اکشن
• رندرهای production که به motion blur طبیعی و قابل‌کنترل نیاز دارند
• توسعه سیستم موشن و تدوین presetهای استاندارد برای تیم طراحی

برای چه کاری نیست

• رابط‌های کاربری یا متن‌هایی که خوانایی و وضوح در آن‌ها اولویت دارد
• حرکت‌های ایستا یا بسیار آهسته که به blur قابل‌توجه نیاز ندارند
• پروژه‌هایی که محدودیت شدید performance دارند و امکان multi-sample rendering نیست

دربارهٔ این اسکیل

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.

دانلود ZIP