Generating Camera Movements

Generating Camera Movements

This skill provides the technical implementation and cinematic theory for applying camera movements to video content. These techniques can be used to simulate high-end cinematography in post-production or dynamic web applications.

When to use this skill

• When building a video editing tool that requires shot simulation.
• When creating dynamic hero sections or interactive video experiences.
• When you need to explain or implement cinematic techniques in code (CSS/SVG/Canvas).

Camera Movement Catalog

1. Tracking Shot

• Description: The camera physically moves through the scene (sideways, forward, or backward).
• Implementation: Combine translate (sideways) and scale (forward/backward) over a long duration.
• Vibe: Immersive, following the subject.

2. Dolly Shot

• Description: Moving the entire camera forward or backward.
• Implementation: Transition scale from 1 to 1.5 (Push-in) or 1.5 to 1 (Pull-out).
• Vibe: Focuses attention on a subject or reveals the environment.

3. Truck Shot

• Description: Moving the camera left or right along a track.
• Implementation: Transition translateX from -10% to 10%.
• Vibe: Observational, following a character walking.

4. Pan Shot

• Description: Pivoting left or right on a horizontal axis.
• Implementation: Transition translateX while slightly adjusting perspective and rotateY for realism.
• Vibe: Expanding the field of view.

5. Whip Pan (Swish Pan)

• Description: A very fast pan creating motion blur.
• Implementation: Rapid translateX combined with a filter: blur(xpx) that peaks in the middle of the transition.
• Vibe: Energetic, used for transitions or showing passage of time.

6. Tilt Shot

• Description: Pivoting vertically (up or down).
• Implementation: Transition translateY with subtle rotateX.
• Vibe: Establishing tall scenery or dramatic character introductions.

7. Crane Shot (Jib Shot)

• Description: Camera mounted on a robotic crane, moving in any direction (often up and over).
• Implementation: Multi-axis movement: translateY(up), scale(up), and subtle rotate.
• Vibe: Epic, "god-like" perspective transitions.

8. Aerial Shot

• Description: extremely high bird's eye view (Drones/Helicopters).
• Implementation: High scale (zoomed out) with very slow, drifting translate and rotate.
• Vibe: Context-setting, grand scale.

9. Pedestal Shot

• Description: Vertical camera movement (up/down) relative to the subject.
• Implementation: Pure translateY transition.
• Vibe: Moving with a subject standing up or sitting down.

10. Handheld Shot

• Description: Unstabilized, physical holding of the camera.
• Implementation: High-frequency, low-amplitude translate and rotate jitter using requestAnimationFrame or CSS Keyframes.
• Vibe: Frenzied, hectic, or "found footage" realism.

11. Zoom Shot

• Description: Changing focal length while stationary.
• Implementation: Pure scale transition. Distinct from Dolly because perspective doesn't change.
• Vibe: Close-ups or wide shots without moving through space.

12. Rack Focus

• Description: Changing lens focus mid-shot.
• Implementation: Transitioning filter: blur(xpx) from a high value to 0 (or vice versa).
• Vibe: Shifting viewer attention between foreground and background.

13. Dolly Zoom (Vertigo Effect)

• Description: Dollying while zooming in the opposite direction.
• Implementation: Simultaneously scale up while "moving back" (decreasing effective viewport size) to keep the subject the same size while the background distorts.
• Vibe: Disorienting, psychological tension.

Workflow

1. Selection: Identify the desired emotional impact (e.g., Dolly for tension, Pan for scale).
2. Container Setup:
   • Wrap the <video> in a div with overflow: hidden.
   • Ensure the video is slightly larger than the container (e.g., transform: scale(1.1)) to allow room for "movement" without showing edges.
3. Execution:
   • Apply CSS Transitions or Web Animations API (WAAPI) for smooth movement.
   • Use cubic-bezier for cinematic easing (standard ease-in-out often feels too mechanical).
4. Validation: Check for "edge-peeking" where the video doesn't cover the container during movement.

Instructions for implementation

Basic Movement Component (CSS)

.camera-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.camera-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1), filter 2s ease;
}

/* Example: Dolly In */
.dolly-in .camera-video {
  transform: scale(1.3);
}

/* Example: Whip Pan */
@keyframes whip-pan {
  0% { transform: translateX(0); filter: blur(0); }
  50% { transform: translateX(50%); filter: blur(10px); }
  100% { transform: translateX(100%); filter: blur(0); }
}

Resources

• Example Web App Implementation
• FFMPEG Shot Synthesis Guide