Post-Processing

Pixelate

Pixelate reduces the image resolution to create a mosaic or pixel art effect. Each group of pixels is averaged into a single colored block, creating the distinctive chunky look of retro video games and 8-bit art.

Example Configuration

pixelate.json

{
  "effect": {
    "postProcesses": [
      {
        "id": "pp_pixelate",
        "type": "pixelate",
        "enabled": true,
        "settings": {
          "pixelSize": 4
        }
      }
    ]
  }
}

Settings

Property	Type	Range	Default	Description
`pixelSize`	number	1-50	4	Size of each pixel block in pixels

How It Works

The pixelate effect divides the image into a grid of blocks. Each block is then filled with the average color of the pixels it contains, creating a low-resolution mosaic effect.

Pixel Size Guide

Pixel Size	Effect	Use Case
1-4	Subtle texture	Slight retro feel, still detailed
5-12	Classic pixel art	16-bit era game aesthetic
13-24	Bold mosaic	8-bit style, abstract
25-50	Extreme abstraction	Artistic, minimalist

Suggested Presets

Style	Settings
Subtle Retro	pixelSize: 3
16-bit Classic	pixelSize: 8
8-bit Bold	pixelSize: 16
Abstract Mosaic	pixelSize: 32

Effect Combinations

Pixelate works especially well with:

Dither effects - Creates authentic retro game look
Scanlines - Simulates old CRT displays
Limited color palettes - Game Boy, CGA, EGA styles
Bloom - Adds glow to bright pixels

API Usage

render-request.json

POST /api/v1/render
{
  "state": {
    "canvas": {
      "aspectRatio": "16:9",
      "backgroundColor": "#1a1a1a"
    },
    "layers": [...],
    "selectedLayerId": null,
    "effect": {
      "effectId": "none",
      "enabled": true,
      "postProcesses": [
        {
          "id": "pp_1",
          "type": "pixelate",
          "enabled": true,
          "settings": {
            "pixelSize": 8
          }
        }
      ]
    }
  },
  "format": "png",
  "width": 1920,
  "height": 1080
}

Tips

Match pixel size to your target "era" (8-bit, 16-bit, etc.)
Higher pixel sizes lose more detail but create stronger effect
Combine with dither-atkinson and 4-color palette for Game Boy look
Works great for creating retro game thumbnails and icons
Apply before other post-processing for cleanest results