Layers

Image Layer

Image layers display static images (JPG, PNG, WebP) and animated GIFs with positioning, cropping, and color adjustment options.

Example

image-layer.json

{
  "type": "image",
  "id": "image-1",
  "name": "Background Image",
  "visible": true,
  "locked": false,
  "mediaUrl": "https://example.com/image.jpg",
  "objectFit": "cover",
  "focalPoint": { "x": 0.5, "y": 0.5 },
  "mediaScale": 1,
  "brightness": 1,
  "contrast": 1,
  "saturation": 1,
  "borderRadius": 0,
  "transform": {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": 1,
    "rotation": 0,
    "opacity": 1
  }
}

Properties

Property	Type	Default	Description
`mediaUrl`	string	required	URL of the image
`mediaType`	string	"image"	"image" \| "gif"
`objectFit`	string	"cover"	"cover" \| "contain" \| "stretch"
`focalPoint`	object	{x: 0.5, y: 0.5}	Focus point for cover mode (0-1)
`mediaScale`	number	1	Zoom level (1 = fit, >1 = zoom in)
`brightness`	number	1	Brightness (0-2, 1 = normal)
`contrast`	number	1	Contrast (0-2, 1 = normal)
`saturation`	number	1	Saturation (0-2, 1 = normal)
`borderRadius`	number	0	Corner radius in pixels

Object Fit Modes

cover - Image fills the entire layer, cropping if needed. Use focalPoint to control which part is visible.
contain - Entire image is visible, with letterboxing if aspect ratios don't match.
stretch - Image stretches to fill the layer, ignoring aspect ratio.

Supported Formats

JPEG (.jpg, .jpeg)
PNG (.png)
WebP (.webp)
GIF (.gif) - animated GIFs are supported