> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenframed.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Perspective and Camera

Use perspective presets, camera presets, tilt, zoom, offset, layout, and depth blur for more dimensional screenshots.

Perspective and camera controls make a screenshot feel like a composed product image instead of a flat browser capture.



## Camera presets

Camera presets are the fastest path to a finished composition. See [Presets](/styling/presets) for a broader guide.

```json
{
  "url": "https://example.com",
  "camera_preset": "hero"
}
```

| Preset | Use for |
|---|---|
| `hero` | Large landing page hero images. |
| `dashboard` | Product dashboard previews. |
| `flat` | Straight-on screenshots with polished styling. |
| `cinematic` | Dramatic angled compositions. |
| `detail` | Close-up feature crops. |

## Perspective presets

```json
{
  "url": "https://example.com",
  "device": "browser-macos",
  "perspective": "iso-right",
  "perspective_intensity": 70,
  "background_preset": "midnight"
}
```

Available perspective values:

`none`, `tilt-left`, `tilt-right`, `tilt-up`, `tilt-down`, `tilt-left-strong`, `tilt-right-strong`, `iso-left`, `iso-right`.

Perspective presets are for browser/deviceless frames. Physical device frames already carry their own shape and cannot be combined with perspective presets.

## Manual camera controls

| Field | Description |
|---|---|
| `tilt_x`, `tilt_y` | Tilt the frame in 3D space. |
| `roll` | Rotate the frame on the canvas. |
| `zoom` | Crop in or out. |
| `offset_x`, `offset_y` | Move the frame on the canvas. |
| `layout` | Choose `default`, `bottom-cropped`, or `top-cropped`. |
| `depth_blur` | Add a soft falloff. |
| `depth_blur_type` | Choose `dir`, `radial`, `tilt`, or `lens`. |
| `compose_mode` | Force `browser` for true CSS 3D or use the default fast path. |

```json
{
  "url": "https://example.com",
  "tilt_x": 8,
  "tilt_y": -10,
  "roll": 1,
  "zoom": 115,
  "offset_x": 80,
  "offset_y": 40,
  "depth_blur": 8,
  "depth_blur_type": "tilt"
}
```

## Depth blur

| Type | Result |
|---|---|
| `dir` | Linear directional falloff. |
| `radial` | Sharp focus center with blur toward the edges. |
| `tilt` | Tilt-shift band. |
| `lens` | Vignette-style sharp center ring. |

Non-directional blur types use the browser composition path because they need browser rendering behavior.

## Choosing between presets and manual controls

**Start with presets**

Use `camera_preset` first, then override the one or two values that need adjustment.
  **Over-specify every render**

Avoid hand-tuning tilt, blur, zoom, and offsets unless you need exact art direction.