Motion blur & shutter angle
Also searched as: motion blur, shutter angle, directional blur, temporal smearing
Canonical Definition
Motion blur is the visual streaking of rapidly moving objects along their trajectory, caused by the integration of light during the camera's shutter interval.
Active only during high-velocity transition frames
When graphics move quickly across the screen without motion blur, the human eye perceives individual strobing frames (wagon-wheel effect or judder). Motion blur smears the object along its velocity vector, creating smooth, natural movement.
In code-based video, motion blur can be calculated dynamically based on instantaneous frame-to-frame velocity using directional CSS blurs or multi-sample temporal accumulation.
180-Degree Shutter Angle Simulation
Emulating standard cinematic motion blur exposure
In cinema cameras, a 180° shutter exposes light for half the frame duration (1/60s at 30fps). Simulating this in code blends multiple sub-frame time steps.
How this works: Directional motion blur applied dynamically during high-speed whip transitions.
- Blur radius scaled proportionally to instantaneous delta-X velocity
- Eliminates strobing on fast mobile pans
- Cinematic optical feel without manual asset baking
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Scale blur intensity directly with element velocity: `blur = Math.min(20, Math.abs(velocity) * 0.5)`.
Common Failure Modes (What to avoid)
- Applying uniform blur everywhere: blur should only exist when velocity exceeds a perceptual threshold.
Build motion blur & shutter angle in Animatiq
Prompt our motion agent in natural language. Get back typed Remotion React code with custom easing curves, brand palettes, and frame-accurate timing.
Related motion principles
Video transitions
A video transition is the visual join between two adjacent shots — a cut, wipe, morph, whip-pan, or shader distortion that carries the viewer across a temporal or spatial boundary.
Motion FundamentalsEasing & easing curves
Easing is the rate at which an animated value changes over time — the mathematical curve defining whether motion accelerates, decelerates, or maintains mechanical constant velocity.
Motion FundamentalsFrame rates & timebase determinism
Frame rate is the frequency at which consecutive images appear on screen (e.g. 30fps, 60fps, 24fps); timebase determinism is the guarantee that frame N represents the exact same temporal state every render.