Interface: ShapeProps

Defined in: nodes/geometry/shape-node.ts:23

Extends

NodeProps

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.

Inherited from

NodeProps.blend

bottomCenter

bottomCenter: Vector2 | (() => Vector2)

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

Inherited from

NodeProps.bottomCenter

bottomLeft

bottomLeft: Vector2 | (() => Vector2)

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

Inherited from

NodeProps.bottomLeft

bottomRight

bottomRight: Vector2 | (() => Vector2)

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

Inherited from

NodeProps.bottomRight

center

center: Vector2 | (() => Vector2)

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

Inherited from

NodeProps.center

centerLeft

centerLeft: Vector2 | (() => Vector2)

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

Inherited from

NodeProps.centerLeft

centerRight

centerRight: Vector2 | (() => Vector2)

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

Inherited from

NodeProps.centerRight

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.

Inherited from

NodeProps.childPositioning

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.

Inherited from

NodeProps.children

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).

Inherited from

NodeProps.clip

colSpan

colSpan: number

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

How many grid columns this child spans. Default 1.

Inherited from

NodeProps.colSpan

column

column: number

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

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

Inherited from

NodeProps.column

effects

effects: Effect

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

Inherited from

NodeProps.effects

end?

optional end?: number

Defined in: nodes/geometry/shape-node.ts:52

fill?

optional fill?: Fill

Defined in: nodes/geometry/shape-node.ts:31

Fill layer(s). Each item can be:

A plain CSS color string → treated as a solid fill
A fill prop object (SolidFillProp, LinearGradientFillProp, …)
An already-resolved fill object
A FillChain from the Fills builder (e.g. Fills.color('red'))

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'.

Inherited from

NodeProps.flex

height

height: SizeInput

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

Inherited from

NodeProps.height

opacity

opacity: number

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

Inherited from

NodeProps.opacity

overlay?

optional overlay?: Fill

Defined in: nodes/geometry/shape-node.ts:38

Overlay layer(s) — the same loose values as fill, but painted over this node's fill and its children (clipped to the node's silhouette) while still sitting under the stroke. Use for textures laid across the whole subtree, e.g. a VHS-grain image or video.

padding

padding: Insets

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

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

Inherited from

NodeProps.padding

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.

Inherited from

NodeProps.pivot

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.

Inherited from

NodeProps.relativeToParent

rotation

rotation: number

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

Inherited from

NodeProps.rotation

row

row: number

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

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

Inherited from

NodeProps.row

rowSpan

rowSpan: number

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

How many grid rows this child spans. Default 1.

Inherited from

NodeProps.rowSpan

scale

scale: number

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

Inherited from

NodeProps.scale

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.

Inherited from

NodeProps.seed

shadow?

optional shadow?: Shadow

Defined in: nodes/geometry/shape-node.ts:50

Shadow layer(s): a single ShadowProp, an array of them, or an already-resolved shadow. fill inside each shadow accepts the same loose values as the top-level fill prop.

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.

Inherited from

NodeProps.size

start?

optional start?: number

Defined in: nodes/geometry/shape-node.ts:51

stroke?

optional stroke?: Stroke

Defined in: nodes/geometry/shape-node.ts:44

Stroke layer(s): a single StrokeProp, an array of them, or an already-resolved stroke. fill inside each stroke accepts the same loose values as the top-level fill prop.