Interface: NodeProps

Defined in: nodes/base/node.ts:148

Extended by

Properties

blend

blend: "color" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "luminosity" | "normal" | "pass-through"

Defined in: nodes/base/node.ts:168

Layer blend mode. 'pass-through' (default) does not isolate the node — its opacity scales each child/fill while they blend against the backdrop. Any other mode isolates the node and blends its flattened result against the backdrop.

bottomCenter

bottomCenter: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:214

bottomLeft

bottomLeft: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:211

bottomRight

bottomRight: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:212

center

center: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:208

centerLeft

centerLeft: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:215

centerRight

centerRight: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:216

childPositioning

childPositioning: ChildPositioning

Defined in: nodes/base/node.ts:181

Frame of reference this node lays its children out in. 'relative' (default) positions them inside this node's own content box; 'absolute' pins them to the stage instead, so their x/y are scene-root coordinates and this node's flow/gap/padding no longer place them. Overridden per child by relativeToParent.

children

children: NodeChildren

Defined in: nodes/base/node.ts:193

Child nodes. A single Node, or an arbitrarily-nested array of them — the constructor flattens nesting (.flat(Infinity)), so .map() results can be dropped in directly as a child without spreading, like React.

clip

clip: boolean

Defined in: nodes/base/node.ts:173

When true, content drawn outside this node's outline is clipped away (see Node.clipSelf).

colSpan

colSpan: number

Defined in: nodes/base/node.ts:234

How many grid columns this child spans. Default 1.

column

column: number

Defined in: nodes/base/node.ts:230

1-based column index for explicit grid placement. Undefined = auto-placed.

effects

effects: Effect

Defined in: nodes/base/node.ts:169

flex

flex: number

Defined in: nodes/base/node.ts:226

Proportional share of the free space along the parent's main axis, relative to sibling fill children (like Flutter's Expanded(flex:)). Only meaningful when this node fills the main axis — in a row that's width:'fill', in a column height:'fill'. Two siblings with flex 2 and 1 split the free space 2:1. Defaults to 1. Specifying flex without an explicit width/height defaults both to 'fill'.

height

height: SizeInput

Defined in: nodes/base/node.ts:152

opacity

opacity: number

Defined in: nodes/base/node.ts:166

padding

padding: Insets

Defined in: nodes/base/node.ts:171

Inner spacing between this node's edges and its content/children.

pivot

pivot: Anchor

Defined in: nodes/base/node.ts:201

Pivot point for rotation and scale. Either a named anchor ('center', 'topRight', 'bottomLeft', … — the node align vocabulary) or an explicit Vector2: (0,0)=center, (-1,1)=top-left, (1,-1)=bottom-right. Set automatically when an anchor positioning prop is used.

relativeToParent

relativeToParent: RelativeToParent

Defined in: nodes/base/node.ts:187

This node's own override of its parent's childPositioning. 'inherit' (default) takes whatever the parent declared; 'relative' and 'absolute' opt this one node in or out regardless.

rotation

rotation: number

Defined in: nodes/base/node.ts:165

row

row: number

Defined in: nodes/base/node.ts:232

1-based row index for explicit grid placement. Undefined = auto-placed.

rowSpan

rowSpan: number

Defined in: nodes/base/node.ts:236

How many grid rows this child spans. Default 1.

scale

scale: number

Defined in: nodes/base/node.ts:164

seed

seed: string | number

Defined in: nodes/base/node.ts:245

Origin seed for this node's Node.random source. Defaults to 0. Set it to give the node a reproducible-but-distinct random stream without re-seeding by hand. The constructor adopts it as random's origin, and the runtime rebuilds the node each playback pass, so draws stay reproducible across scrub/precomp/HMR.

size

size: SizeInput

Defined in: nodes/base/node.ts:163

Sets width and height to the same value in one go. Pure sugar: at construction time, an author-facing size is expanded into width/ height before either is applied. Explicit width or height takes precedence over size (mirroring padding's side-vs-shorthand rule), so { size: 200, width: 100 } yields width: 100, height: 200. Reactive bindings and to()/set() targets both work the same as width/height — size: 'fill', size: () => ..., or node.to({ size: 300 }, 0.5) are all valid.

topCenter

topCenter: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:213

topLeft

topLeft: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:209

topRight

topRight: Vector2 | (() => Vector2)

Defined in: nodes/base/node.ts:210

width

width: SizeInput

Defined in: nodes/base/node.ts:151

x

x: number

Defined in: nodes/base/node.ts:149

y

y: number

Defined in: nodes/base/node.ts:150