Post-Processing

Vignette

Vignette darkens the edges of the image, drawing the viewer's eye toward the center. This classic photographic effect adds depth and focus to compositions, creating a natural frame around the content.

Example Configuration

vignette.json

{
  "effect": {
    "postProcesses": [
      {
        "id": "pp_vignette",
        "type": "vignette",
        "enabled": true,
        "settings": {
          "intensity": 0.5,
          "radius": 0.8
        }
      }
    ]
  }
}

Settings

Property	Type	Range	Default	Description
`intensity`	number	0-1	0.5	Darkness intensity of the vignette
`radius`	number	0.5-1.5	0.8	Effect radius (smaller = larger vignette)

How It Works

The vignette effect applies a radial gradient that darkens pixels based on their distance from the center of the image. This mimics the natural light falloff seen in photographs taken with certain lenses.

Intensity controls how dark the edges become (0 = no effect, 1 = fully black edges)
Radius determines where the darkening begins (lower values start closer to center)

Suggested Presets

Style	Settings
Subtle	intensity: 0.2, radius: 1.0
Classic Photo	intensity: 0.4, radius: 0.9
Dramatic	intensity: 0.6, radius: 0.7
CRT Monitor	intensity: 0.3, radius: 0.9

API Usage

render-request.json

POST /api/v1/render
{
  "state": {
    "canvas": {
      "aspectRatio": "16:9",
      "backgroundColor": "#1a1a1a"
    },
    "layers": [...],
    "selectedLayerId": null,
    "effect": {
      "effectId": "ascii-standard",
      "enabled": true,
      "postProcesses": [
        {
          "id": "pp_1",
          "type": "vignette",
          "enabled": true,
          "settings": {
            "intensity": 0.4,
            "radius": 0.9
          }
        }
      ]
    }
  },
  "format": "png",
  "width": 1920,
  "height": 1080
}

Tips

Use subtle vignettes (intensity 0.2-0.4) to focus attention without being obvious
Combine with grain for vintage film look
Pair with scanlines and curvature for full CRT monitor effect
Vignette usually looks best as a final post-processing step
Works well with any effect type as it frames the content naturally