Camera moves & focus
Also searched as: camera movement, push-in, dolly zoom, rack focus, parallax camera, camera moves
Canonical Definition
Camera movement applies the spatial language of cinematography — push-ins, pull-backs, orbit rotations, and rack focus — to 2D graphic canvases that possess no physical lens.
60 to 180 frames (2s - 6s)
cubic-bezier(0.25, 0.1, 0.25, 1.0) or linear slow drift
A static graphic frame reads as a presentation slide; adding subtle camera movement transforms it into cinematic footage. A gentle push-in directs attention to an emerging detail, while a dolly zoom induces tension or revelation.
In Remotion, virtual camera moves are constructed by wrapping child components in an outer coordinate transform that manipulates `scale`, `translateX/Y`, and optical blur dynamically over time.
The Push-In & Focus Pull
Guiding cognitive focus without breaking scene continuity
A push-in scales the scene from 1.0 to 1.15 over 90 frames while simultaneously shifting the focal center toward the item of interest.
How this works: A smooth continuous camera push-in that magnifies central content while holding focus.
- Sub-pixel transform interpolation prevents pixel snapping
- Anchor point repositioning toward focal subject
- Transforms flat UI into a cinematic shot
Rack Focus & Depth of Field
Shifting optical sharpness between foreground and background layers
By inversely interpolating CSS blur filters between two spatial planes, the camera shifts viewer focus from a foreground speaker to a background UI screen.
How this works: Optical blur shifts dynamically between foreground and background layers.
- Inverse CSS blur filter interpolation
- Simulates shallow depth-of-field lenses
- Directs attention without moving geometry
Engineering Guidelines & Common Pitfalls
Best Practices (What to do)
- Keep slow continuous camera moves linear or gentle: constant micro-drift feels like a real camera operator holding a gimbal.
- Use high-resolution 2x assets when planning deep zoom-in moves.
Common Failure Modes (What to avoid)
- Shaking or erratic camera moves that induce motion sickness on mobile screens.
- Scaling raster images past their native resolution, exposing pixelation during push-ins.
Working catalog implementations
Typed Remotion components ready to drop into code.
Push In
A centered headline gains focus through one slow, continuous camera push and a gentle fade out.
Focus Rack
Focus shifts once between two cards at different apparent depths through synchronized blur, dimming, scale, and parallax.
Drift Hold
A centered content card stays subtly alive through loop-exact rotation, scale breathing, and a slow light sweep.
Dolly Zoom (Vertigo Shot)
Camera tracks toward or away from the subject while the field of view changes the opposite way, so the subject holds its frame size while the background collapses behind it or rushes in. Focal length is solved from dolly distance every frame against d * tan(FOV/2) = const, not keyframed beside it. Requires depth: the subject sits on the z = 0 plane and the content behind it must be layered or genuinely 3D (translateZ at two or more distinct depths) -- a flat element gains nothing from this move.
Build camera moves & focus 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
Parallax & spatial depth
Parallax is the visual phenomenon where objects closer to the camera appear to move faster across the field of view than distant objects, creating an illusion of true 3D spatial depth.
Motion FundamentalsKeyframing & deterministic interpolation
A keyframe marks a specific property value at a designated point in time, allowing software to calculate all intermediate states (in-betweens) through deterministic mathematical interpolation.
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.