Docs

Properties

Properties are written name: value. The parser accepts any identifier as a property name, but only the properties in the generated reference have known runtime or renderer behavior.

For blendMode, maskMode, and maskInvert, see masks and layer blending.

Transforms

position, rotation, scale, and anchor place and orient an instance. Transforms are composed as full XYZ affine matrices through the hierarchy. A scalar rotation is a z rotation; use (x, y, z) for independent Euler-axis angles. A scalar scale is uniform; use (x, y, z) for independent axis scales. Named 3D cameras support perspective and orthographic views. Scenes without an authored camera use the host view. XYZ transforms remain in scene space.

position and size also accept percentages of the nearest ancestor's local size (position: (50%, 50%), size: (25%, 25%)). See values.

imagine card
  shape: rectangle
  position: (10%, 20%)
  size: (50%, 50%)
  rotation: 12
  scale: (1.2, 0.9)
  anchor: (0, 0)

create card

Shapes

Renderer-backed shapes are rectangle, ellipse, circle, star, line, and path. circle is an alias of ellipse; points is an alias for numeric starPoints on stars and array pathPoints on paths.

A line's start and end and a path's pathPoints are points around the instance's position: start: (0, 0) sits exactly on position. The other shapes are centred on position.

imagine star
  shape: star
  size: (120, 120)
  starPoints: 5
  ratio: 0.45
  fill: "#ff6b35"
  stroke: "#ffffff"
  strokeWidth: 2

create star

Text

Adding a text property turns an instance into text. Style it with fill, fontFamily, fontSize, fontWeight, fontStyle, textAlign, and verticalAlign. font, color, align, and baseline are not active text aliases.

imagine title
  text: "LumiDSL"
  fontFamily: "Arial"
  fontSize: 64
  fontWeight: "bold"
  fill: "#ffffff"
  textAlign: "center"
  verticalAlign: "middle"

create title

Text accepts stroke and strokeWidth syntactically, but the current text renderer doesn't draw text strokes.

Hard newlines start a new baseline after the preceding line, including when a width constraint wraps a paragraph. lineHeight is the baseline step as a multiple of fontSize; an empty line consumes that same step.

Image Fills

fill accepts an image as well as a color. A bare asset path is treated as an image fill that defaults to cover. For full control, list the options as an indented block under fill:

define photo: "assets/photo.png"

imagine card
  shape: rectangle
  size: (400, 300)
  fill:
    source: photo
    fit: "cover"
    position: (0.5, 0.5)
    repeat: "no-repeat"
    crop: (0, 0, 1, 1)

create card
  • source: the image asset path, or a define that references one.
  • fit: how the image maps onto the shape: cover (fills, crops the overflow; the default), contain (whole image visible, letterboxed), stretch (distorts to fill), or none (natural pixel size, clipped).
  • position: where the image sits within the shape, as fractions of the remaining space; (0.5, 0.5) centers it.
  • repeat: how the fitted crop tiles: no-repeat (default), repeat, repeat-x, or repeat-y.
  • crop: the region of the source image used by the fill, as fractions (x, y, width, height) from the image's top-left; (0, 0, 1, 1) is the whole image.

In the Lumiere Editor, the fill picker exposes the image source, fit, repeat, and a crop editor (drag the crop frame on the preview). Editor restrictions: image fills are offered on shapes; text is limited to solid colors, and stroke / background are color-only. The DSL retains an image fill authored on text, but the text renderer ignores it.

Compatibility Properties

maskMode, maskInvert, and object blendMode are retained as generic properties but don't currently implement masking or blending. See compatibility for their exact status.

For defaults, contexts, and every documented property, read the generated property reference.

Visibility and timing

Use visible keys or expressions on ordinary groups to schedule their content. Children keep the scene timeline. See moving a sequence for shared delays and reusable motion.

Stroke trim and cameras

Use trimStart / trimEnd to draw a stroke by its length without hiding its fill. See stroke trim for caps, contour rules and supported SVG styles. Create a named 3D camera to move the view, animate a lens or follow an instance or glyph.