Reference

Layers

Efecto uses a layer-based compositing system. Layers are rendered bottom-to-top, with the background layer always at the bottom.

Layer Types

Each layer type has specific properties and capabilities:

text

Text Layer

Canvas-rendered text with customizable font, size, color, and alignment.

image

Image Layer

Static images (JPG, PNG, WebP) and animated GIFs with adjustments.

video

Video Layer

Video files with playback controls, looping, and speed adjustment.

3d

3D Layer

GLTF/GLB models, primitive shapes, and SVG extrusions.

background

Background Layer

Canvas background - solid color, gradient, image, video, or 3D.

group

Group Layer

Container for multiple layers with shared transform.

Layer Structure

All layers require these base fields: id, name, type, visible, locked, and transform. Each layer type adds its own specific properties:

layers.json

{
  "layers": [
    {
      "id": "bg",
      "name": "Background",
      "type": "background",
      "visible": true,
      "locked": false,
      "transform": { "x": 0, "y": 0, "width": 1, "height": 1, "rotation": 0, "opacity": 1 },
      "contentType": "solid",
      "solidColor": "#1a1a1a"
    },
    {
      "id": "text-1",
      "name": "Title",
      "type": "text",
      "visible": true,
      "locked": false,
      "transform": { "x": 0, "y": 0, "width": 1, "height": 1, "rotation": 0, "opacity": 1 },
      "content": "Hello World",
      "fontFamily": "DM Sans",
      "fontSize": 64,
      "fontWeight": "bold",
      "color": "#ffffff",
      "textAlign": "center",
      "letterSpacing": 0,
      "lineHeight": 1.2
    }
  ]
}

Layer Transform

Every layer has a transform object that controls position, scale, rotation, and opacity:

transform.json

{
  "transform": {
    "x": 0,        // Horizontal position (-1 to 1, 0 = center)
    "y": 0,        // Vertical position (-1 to 1, 0 = center)
    "width": 1,    // Scale factor (1 = original size)
    "height": 1,   // Scale factor
    "rotation": 0, // Rotation in degrees (0-360)
    "opacity": 1,  // Opacity (0-1)
    "flipX": false,
    "flipY": false
  }
}

Transform Properties

Property	Type	Default	Description
`x`	number	0	Horizontal position (-1 to 1+, 0 = center)
`y`	number	0	Vertical position (-1 to 1+, 0 = center)
`width`	number	1	Horizontal scale factor
`height`	number	1	Vertical scale factor
`rotation`	number	0	Rotation in degrees (0-360)
`opacity`	number	1	Opacity (0-1)
`flipX`	boolean	false	Flip horizontally
`flipY`	boolean	false	Flip vertically

Layer Ordering

Layers are rendered in array order, bottom to top. The first layer in the array is rendered first (at the bottom), and the last layer is rendered on top. The background layer should always be at index 0.