Post-Processing

Grid

Grid overlays decorative lines on the image, creating wireframe, cyberpunk, or architectural aesthetics. Supports perspective distortion, glow effects, and animation.

Example Configuration

grid.json

{
  "effect": {
    "postProcesses": [
      {
        "id": "pp_grid",
        "type": "grid",
        "enabled": true,
        "settings": {
          "scale": 20,
          "lineWidth": 1,
          "intensity": 0.5,
          "color": "#ffffff",
          "rotation": 0
        }
      }
    ]
  }
}

Settings

Property	Type	Range	Default	Description
`scale`	number	1-50	20	Grid cell size
`lineWidth`	number	1-10	1	Line thickness
`intensity`	number	0-1	0.5	Line opacity
`color`	color	hex	#ffffff	Line color
`rotation`	number	0-360	0	Grid rotation in degrees
`noise`	number	0-1	0	Line distortion noise
`randomness`	number	0-1	0	Line spacing variation
`glow`	number	0-1	0	Line glow/emission
`animated`	boolean	-	false	Animate the noise
`softness`	number	0-1	0	Edge blur softness
`perspective`	number	0-1	0	Floor/wall perspective effect

Suggested Presets

Style	Settings
Blueprint	scale: 25, color: #00aaff, intensity: 0.4
Neon Floor	scale: 30, color: #ff00ff, glow: 0.6, perspective: 0.7
Glitchy	scale: 20, noise: 0.3, randomness: 0.2, animated: true
Wireframe	scale: 15, lineWidth: 1, intensity: 0.8

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": "grid",
          "enabled": true,
          "settings": {
            "scale": 30,
            "lineWidth": 2,
            "intensity": 0.3,
            "color": "#00ffff",
            "glow": 0.5,
            "perspective": 0.5
          }
        }
      ]
    }
  },
  "format": "png",
  "width": 1920,
  "height": 1080
}

Tips

Use glow for neon/cyberpunk aesthetics
Perspective creates floor or horizon grids
Combine with bloom for glowing lines
Rotation at 45° creates diamond patterns
Add noise and animation for unstable/glitchy look