Layers

Text Layer

Text layers render text content with customizable font, size, color, and alignment. Text is rendered to canvas and displayed as a Three.js plane in the scene.

Example

text-layer.json

{
  "type": "text",
  "id": "text-1",
  "name": "Heading",
  "visible": true,
  "locked": false,
  "textType": "point",
  "content": "Hello World",
  "fontFamily": "DM Sans",
  "fontSize": 64,
  "fontWeight": "bold",
  "letterSpacing": 0,
  "lineHeight": 1.2,
  "color": "#ffffff",
  "textAlign": "center",
  "verticalAlign": "middle",
  "transform": {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": 1,
    "rotation": 0,
    "opacity": 1
  }
}

Properties

Property	Type	Default	Description
`textType`	string	"point"	"point" \| "frame" (authoring mode)
`content`	string	""	The text content to display
`fontFamily`	string	"DM Sans"	Font family name
`fontSize`	number	48	Font size in pixels
`fontWeight`	string	"normal"	"normal" \| "medium" \| "semibold" \| "bold"
`letterSpacing`	number	0	Letter spacing in pixels
`lineHeight`	number	1.2	Line height multiplier
`color`	string	"#ffffff"	Text color (hex)
`textAlign`	string	"center"	"left" \| "center" \| "right"
`verticalAlign`	string	"middle"	"top" \| "middle" \| "bottom"
`textBoxWidth`	number	undefined	Width for text wrapping (legacy, use frameWidthPx instead)
`frameWidthPx`	number	undefined	Frame width in CSS pixels (frame text only). Resizing changes this, not fontSize.
`frameHeightPx`	number	undefined	Frame height in CSS pixels (frame text only)
`autoSize`	string	"height"	"none" \| "height" \| "widthAndHeight"

Available Fonts

Use the fonts discovery API to get all available fonts:

fonts.sh

GET https://efecto.app/api/v1/fonts

Text Modes

Text layers support two authoring modes controlled by textType (with textTransformMode kept for backward compatibility):

point (default) - Text behaves like point text and grows naturally with content. Resizing changes fontSize.
frame - Text wraps within a fixed-width frame defined by frameWidthPx/frameHeightPx. Resizing changes the frame dimensions, NOT the font size.