Class: Image

Inherited from

Rect.bottomCenter

bottomLeft

Get Signature

get bottomLeft(): Vector2

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

Returns

Inherited from

Rect.bottomLeft

bottomRight

Get Signature

get bottomRight(): Vector2

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

Returns

Inherited from

Rect.bottomRight

center

Get Signature

get center(): Vector2

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

Center of the node — equivalent to its x/y position (0,0 is the center of the layout cell).

Returns

Inherited from

Rect.center

centerLeft

Get Signature

get centerLeft(): Vector2

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

Returns

Inherited from

Rect.centerLeft

centerRight

Get Signature

get centerRight(): Vector2

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

Returns

Inherited from

Rect.centerRight

children

Get Signature

get children(): Node<NodeProps>[]

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

Returns

Inherited from

Rect.children

clock

Get Signature

get clock(): Readonly<NodeClock>

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

Internal timing state.

Returns

Readonly<NodeClock>

Inherited from

Rect.clock

global

Get Signature

get global(): WorldTransform

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

Resolved world-space transform — the same anchor points and metrics as the local getters (center, topRight, rotation, …) but folded through the full ancestor chain, so values are absolute scene coordinates rather than parent-relative ones. See WorldTransform. Every field is reactive.

Examples

// Read another node's absolute corner, regardless of its parent:
const p = other.global.topRight;   // world-space {x, y}

### Reading vs. placing
`global` is for *reading* world coordinates. `x`/`y` (and the anchor props)
are **parent-relative**, so assigning a world value to them does not by
itself place this node in world space — it offsets it from this node's own
parent. To land exactly on another node regardless of either parent,
subtract this node's parent's world contribution:

// Place this node's origin exactly on `other`, any parent:
new Rect({
  x: () => other.global.x - (myParent.global.x),
  y: () => other.global.y - (myParent.global.y),
});

When both nodes share the same parent origin (e.g. both at the scene root),
`x: () => other.global.x` already lands on target with no compensation.

Returns

WorldTransform

Inherited from

Rect.global

layoutRect

Get Signature

get protected layoutRect(): BoxBounds

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

The allocated bounding box from the last layout pass. Reactive — reads inside callbacks are tracked.

Returns

Inherited from

Rect.layoutRect

measuredHeight

Get Signature

get measuredHeight(): number

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

Returns

number

Inherited from

Rect.measuredHeight

measuredRect

Get Signature

get measuredRect(): BoxBounds

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

Internal

Returns

Inherited from

Rect.measuredRect

measuredWidth

Get Signature

get measuredWidth(): number

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

Returns

number

Inherited from

Rect.measuredWidth

name

Get Signature

get name(): string

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

Returns

string

Inherited from

Rect.name

parent

Get Signature

get parent(): Node<NodeProps> | null

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

Returns

Node<NodeProps> | null

Inherited from

Rect.parent

properties

Get Signature

get properties(): P

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

Returns

P

Inherited from

Rect.properties

topCenter

Get Signature

get topCenter(): Vector2

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

Returns

Inherited from

Rect.topCenter

topLeft

Get Signature

get topLeft(): Vector2

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

Returns

Inherited from

Rect.topLeft

topRight

Get Signature

get topRight(): Vector2

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

Returns

Rect._confinesChildren

Inherited from

Rect.topRight

Methods

_cameraScope()

_cameraScope(): CameraScope | null

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

Internal

Returns

CameraScope | null

Inherited from

Rect._cameraScope

_confinesChildren()

_confinesChildren(): boolean

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

Internal

Returns

boolean

Inherited from

_hitTestSelf()

_hitTestSelf(local, tolerance): boolean

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

Internal

Dispatch seam so node-picking.ts can reach the protected override.

Parameters

local

tolerance

number

Returns

boolean

Inherited from

Rect._hitTestSelf

_localBounds()

_localBounds(): BoxBounds

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

Internal

Returns

Inherited from

Rect._localBounds

_localMatrix()

_localMatrix(): Matrix2D

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

Internal

Composed with the camera scopes in between by runtime/node-picking.ts.

Returns

Matrix2D

Inherited from

Rect._localMatrix

_prepareStep()

_prepareStep(to, duration, easing?): TweenStepper

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

Resolve a single to() step into a flat TweenStepper — all the per-key setup (anchor handling, mapper, numeric-vs-custom routing) happens once here, then advance(dt) is allocation-free. Used by both the generator path (_toGen) and the batched parallel path.

Parameters

to

Partial<P>

duration

number

_sampleMotion()

protected _sampleMotion(): void

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

Compute this frame's motion (velocity/direction/speed/angular/scale) into _renderState as a backward difference against the previous frame, and roll the history forward. Velocity is 0/{0,0} when no trustworthy delta exists — the first frame, or after a non-monotonic time jump (only 0 < dt <= MAX is trusted, so a scrub that resets the clock reads as "unknown" rather than a spurious huge velocity). The world position matches applyTransform (layoutRect + x, layoutRect - y, y-down). Called via sample every frame; layout-dependent fields (rects/elapsed) are filled in by beforeRender at draw time.

Returns

void

Inherited from

Rect._sampleMotion

_spaceRects()

protected _spaceRects(): SpaceRects

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

Reference rects for fills with space:'parent', expressed in this node's local space (origin = this node's positioned centre, y-down to match the canvas). The viewport (space:'global') is resolved by the renderer, which knows the surface size. Rotation/scale of this node are not folded in — the rect is the axis-aligned parent box, which is what gradients expect.

Returns

SpaceRects

Inherited from

Rect._spaceRects

_toGen()

_toGen(to, duration, easing?): FrameGenerator

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

Parameters

to

Partial<P>

duration

number

easing?

Returns

Inherited from

Rect._toGen

_writeProp()

_writeProp(field, value): void

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

Internal

Hot-path prop write (mapper- and binding-aware). Public-but-underscored like _toGen/_prepareStep so reactive companions in this directory can call it; not part of the authoring surface.

Parameters

field

string

value

unknown

Returns

void

Inherited from

Rect._writeProp

add()

add(child): void

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

Compose this node's internal children — the constructor-friendly entry point a custom composite calls to build its own subtree (a single node or an array, JSX included). Sugar over addChild/addChildren: it works the same before the node is linked into the tree (in the constructor) as after, so a composite builds its structure from props right in its constructor — no init-style hook, no idempotency guard, since the constructor runs once.

Accepts the same shape as the children prop — a single node, or an arbitrarily-nested array (.flat(Infinity)), with non-Node entries (false/null/undefined from cond && <Node/>) filtered out — so this.add(items.map(...)) or this.add(cond && <Text/>) work directly.

Parameters

child

NodeChildren

Returns

void

Example

constructor(props?) {
  super(props);
  this.add(<Rect ref={this.rowRef} group="row">{…}</Rect>);
}

Inherited from

Rect.add

addChild()

addChild(child): void

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

Parameters

child

Returns

void

Inherited from

Rect.addChild

addChildAt()

Call Signature

addChildAt(child, index): void

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

Parameters

child

index

number

Returns

void

Inherited from

Rect.addChildAt

Call Signature

addChildAt(child, index, duration, easing?): FrameGenerator

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

Parameters

child

index

number

duration

number

easing?

Returns

Inherited from

Rect.addChildAt

addChildren()

addChildren(children): void

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

Parameters

children

Returns

void

Inherited from

Rect.addChildren

adoptDetached()

protected adoptDetached(node): void

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

Adopt a detached node for binding only — its asset catalog, inherited context and clock — without making it a child.

Tree membership supplies three things a node cannot work without: the asset catalog (a webfont never shapes and an <Image> never loads without it), the resolved context map (theme tokens), and a ticking clock. Layout and painting are not among them. So a node used purely as a source of pixels — a Tex.surface(...) subtree rasterized onto 3D geometry — can be bound by whatever consumes it and laid out on demand, instead of having to sit in a particular place in the tree.

Safe to call every frame: bindAssets short-circuits on an unchanged catalog, resolveContext is fired only on the adoptee's first bind, and ellapse is idempotent for a repeated time.

Parameters

node

Returns

void

Inherited from

Rect.adoptDetached

afterRender()

afterRender(ctx): void

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

Parameters

ctx

Returns

void

Inherited from

Rect.afterRender

applyClip()

protected applyClip(ctx): boolean

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

Open clipSelf()'s outline as a clip scope, confining whatever is drawn until the matching ctx.endClip() to the shape. Returns true when a clip was actually opened (so the caller knows to close it) and false when the node has no outline (the default).

Parameters

ctx

Rect.applyDefaultSize

Returns

boolean

Inherited from

Rect.applyClip

applyDefaultSize()

protected applyDefaultSize(props?): void

Defined in: nodes/geometry/rect-node.ts:110

Figma-style smart default (see base Node.applyDefaultSize), plus one refinement for flex/stack containers: hugging an axis that a direct child asks to "fill" stacks the child against nothing — the child would either collapse to 0 (stack, or the container's cross axis) or measure unconstrained (row/column main axis; see measureFlex's Figma-mirroring comment). Since JSX children are already-constructed Nodes by the time they reach this constructor, their own resolved width/height can be inspected here — so a bare fill child flips this default from hug to fill on that exact axis, matching what the author almost certainly wants. An explicit width/height on this Rect always wins; this only adjusts the default used when neither is given.

group isn't applied to its signal until after super() returns (see constructor above), so the raw props.group is read here instead — "row"/"column" only promote their single main axis; "stack" (the default, and the mode with no distinct main axis) checks both axes independently.

Parameters

props?

NodeConfig<any, ImageProps>

Returns

void

Inherited from

applyProp()

protected applyProp<Ext, Int>(field, initial, options?): void

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

Declare a reactive prop on this node. Creates a Signal-backed accessor for field, applies an initial value (callback → reactive binding; otherwise constant), and registers optional tween/mapper metadata used by set() and to().

Subsequent calls for the same field reuse the existing cell and act as a value assignment, so subclasses can override a parent's default by calling applyProp again without losing the cell or its bindings.

Type Parameters

Ext

Ext

Int

Int = Ext

Parameters

field

string

initial

Ext | (() => Ext) | undefined

options?

PropOptions<Ext, Int>

Returns

void

Inherited from

Rect.applyProp

applyTransform()

protected applyTransform(ctx): void

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

Push this node's transform (position, scale, rotate, opacity, effects).

Parameters

ctx

Returns

void

Inherited from

Rect.applyTransform

beforeRender()

beforeRender(ctx): void

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

Parameters

ctx

Returns

void

Inherited from

Rect.beforeRender

bindAssets()

bindAssets(context): void

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

Parameters

context

AssetCatalog

Returns

void

Inherited from

Rect.bindAssets

bindContext()

bindContext(parent, runResolve): void

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

Push inherited context down this subtree, mirroring bindAssets.

runResolve separates the two responsibilities the walk has:

true (first bind of this instance / a freshly-added child): also invoke resolveContext, which applies inherited context values to the already-built structure. It runs once per instance (the runtime rebuilds rather than replaying), so it must not depend on being re-fired.
false (per-frame structural re-push): only refresh _context so subtrees added this frame inherit it — must not re-fire resolveContext, which would clobber an in-flight tween's value every frame.

Parameters

parent

Rect.effectivePadding

runResolve

boolean

Returns

void

Inherited from

Rect.bindContext

clearChildren()

clearChildren(): void

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

Returns

void

Inherited from

Rect.clearChildren

clipPathSelf()

protected clipPathSelf(): Clip | null

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

An optional clip path that cuts through this node's own content and its children — unlike clip, which only confines children to the node's outline and leaves the node's own fill/stroke untouched. Returning null (the default) applies no such cut. Media nodes (Image, Video) expose this as an author-facing clipPath prop so a path can carve the painted frame and everything stacked on it as one.

Returns

Clip | null

Inherited from

Rect.clipPathSelf

clipSelf()

protected clipSelf(): Clip

Defined in: nodes/geometry/rect-node.ts:152

This node's outline as a Clip command list — the single source of truth for every clip the node needs: its clip boundary (when clip is true) and the silhouette its backdrop effects (backdrop-flagged filters, magnify) are confined to. Returning null (the default) means the node has no clip outline, so its children render unclipped and it gets no backdrop effects. Nodes with a definite box (shapes via ShapeNode, layout containers like FlexNode) override this to describe their geometry — and so behave the same way for clip and effect area.

Returns

Clip

Inherited from

Rect.clipSelf

dispose()

dispose(): void

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

Returns

void

Inherited from

Rect.dispose

effectivePadding()

effectivePadding(): InsetsResolved

Defined in: nodes/geometry/rect-node.ts:170

Effective content padding (base padding plus any stroke intrusion).

Returns

InsetsResolved

Inherited from

ellapse()

ellapse(totalTime): void

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

Parameters

totalTime

number

Returns

void

Inherited from

Rect.ellapse

fadeTo()

fadeTo(opacity, duration, ease?): FrameGenerator

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

Animate opacity to the target value.

Parameters

opacity

number

Target opacity in the range [0, 1].

duration

number

ease?

Returns

Example

yield* node.fadeTo(0, 0.3);   // fade out
yield* node.fadeTo(1, 0.3);   // fade in

Inherited from

Rect.fadeTo

fillTo()

fillTo(to, duration, options?): FrameGenerator

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

Parameters

to

Fill

duration

number

options?

TweenOptions<FillResolved[]>

Returns

Inherited from

Rect.fillTo

hitTestSelf()

protected hitTestSelf(local, tolerance): boolean

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

Shapes hit on their outline, not their box: a click in the empty corner of a star's bounding box should fall through to whatever is behind it. The outline is the very one this node already declares for clipping (Node.clipSelf), so what is grabbable and what is drawn can never drift. Shapes that declare no outline (Text, RichText, Path) keep the base box test, which is what selection should do for them anyway.

Parameters

local

Rect.invalidateMeasure

tolerance

number

Returns

boolean

Inherited from

Rect.hitTestSelf

invalidateMeasure()

protected invalidateMeasure(): void

Defined in: nodes/geometry/rect-node.ts:82

Discard the measure cached by the last measure pass so the next layout recomputes children against the layout bounds. Used by a fit Scene, which is measured by its parent against its small cell but lays its children out against the full viewport.

Returns

void

Inherited from

isAutoSize()

isAutoSize(axis): boolean

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

Parameters

axis

"width" | "height"

Returns

boolean

Inherited from

Rect.isAutoSize

layout()

layout(rect, scope): void

Defined in: nodes/geometry/rect-node.ts:200

Default layout: record rect, then stack-layout children (see layoutChildren). This is what makes a plain Node — and any ShapeNode leaf (Ellipse, Polygon, …) that doesn't override layout — able to nest children out of the box, the same way Image (via Rect) does, just with simple centered stacking instead of flex/stack. Subclasses with their own child-layout (Rect, MaskGroup, Camera, BooleanGroup) override this and call setLayoutRect instead, so children aren't laid out twice.

Parameters

rect

scope

MeasureScope

Returns

void

Inherited from

Rect.layout

layoutChildren()

protected layoutChildren(rect, scope): void

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

Stack-layout this node's children, centered within rect's content area: each child is measured against the padded inner box and given a BoxBounds centered on it (sized to its own measured size, capped to the content area), offsetting from center via its own x/y. Called by the default layout; nodes that run their own child-layout (Rect's flex/stack, Camera's viewport, …) override layout instead and don't call this.

Parameters

rect

scope

MeasureScope

Returns

void

Inherited from

Rect.layoutChildren

measure()

measure(constraints, scope): Partial<Size2D>

Defined in: nodes/geometry/rect-node.ts:196

Default measure: resolve width/height, hugging children stack-style on any "hug" axis. A "hug" axis shrink-wraps to the largest child extent on that axis (children overlap and are centered — they don't sum), plus this node's padding — the same content size layoutChildren lays them out in. A fixed or "fill" axis resolves as before.

This is what lets a plain Node — and any ShapeNode leaf (Ellipse, Polygon, Camera, …) that doesn't override measure — hug its children out of the box, matching how Rect's "stack" mode measures rather than collapsing to 0 (which resolving "hug" against a content size of 0 used to do, so a hugging non-Rect container rendered nothing).

Parameters

constraints

SizeConstraints

scope

MeasureScope

Returns

Partial<Size2D>

Inherited from

Rect.measure

moveTo()

moveTo(x, y, duration, ease?): FrameGenerator

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

Animate both x and y to the given position.

Parameters

x

number

y

number

duration

number

ease?

Returns

Example

yield* node.moveTo(200, 100, 0.5, ease.outCubic);

Inherited from

Rect.moveTo

moveX()

moveX(x, duration, ease?): FrameGenerator

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

Animate only the horizontal position (x).

Parameters

x

number

duration

number

ease?

Returns

Example

yield* node.moveX(300, 0.4);

Inherited from

Rect.moveX

moveY()

moveY(y, duration, ease?): FrameGenerator

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

Animate only the vertical position (y).

Parameters

y

number

duration

number

ease?

Returns

Example

yield* node.moveY(-50, 0.4);

Inherited from

Rect.moveY

onRender()

onRender(ctx): void

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

Parameters

ctx

Returns

void

Inherited from

Rect.onRender

overlayTo()

overlayTo(to, duration, options?): FrameGenerator

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

Parameters

to

Fill

duration

number

options?

TweenOptions<FillResolved[]>

Returns

Rect.prepareAudioAssets

Inherited from

Rect.overlayTo

prepareAudio()

prepareAudio(_tracker): void

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

Register this node's audio scheduling needs on the timeline — the one asset concern that's neither drawable (like images/video/paint, inferred via TrackRenderContext) nor a simple async load (see prepareLayout): a playing clip has to be declared into the frame-ranged timeline AssetManager/AudioDevice use to keep audio in sync while scrubbing. No-op by default; Video overrides it.

Parameters

_tracker

AssetTracker

Returns

void

Inherited from

Rect.prepareAudio

prepareAudioAssets()

prepareAudioAssets(tracker, path?): void

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

Walk the subtree registering each node's audio requests (see prepareAudio). Stamps the owning node's structural path onto any audio requests emitted, so the timeline can draw each clip on its own bar — purely for display, playback ignores ownerPath.

Parameters

tracker

AssetTracker

path?

string = ""

Returns

void

Inherited from

prepareLayout()

prepareLayout(): void | Promise<void | Disposer>

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

Opaque async setup needed before layout — e.g. Code's syntax grammar, which tokenization/measurement depends on. Runs in the precomp pass ahead of layout, so the node cannot read its layoutRect here (it hasn't been laid out yet). Image/video/paint and font requests are no longer declared here — they're inferred automatically from the same render()/layout() calls a node already makes (see TrackRenderContext/TrackMeasureScope). No-op by default.

The framework does not await the returned promise inline (precomp stays fully synchronous) — it's fired once per frame and, when nothing changed, should return synchronously (void). Memoize like Video's syncVideo() does: key off whatever prop drives the async work and skip re-running when the key is unchanged. When the promise resolves to a Disposer, it replaces (and disposes) any previous one for this node+phase, and runs when this node is disposed.

Returns

void | Promise<void | Disposer>

Inherited from

Rect.prepareLayout

prepareLayoutAssets()

prepareLayoutAssets(): void

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

Walk the subtree firing each node's pre-layout async setup (see prepareLayout). Fire-and-forget: does not block precomp's synchronous per-frame pass.

Returns

void

Inherited from

Rect.prepareLayoutAssets

prepareRender()

prepareRender(): void | Promise<void | Disposer>

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

Opaque async setup needed before render, with the node's layoutRect available (runs after layout). No-op by default — no built-in node currently needs this timing, but it's kept symmetric with prepareLayout for custom nodes whose async setup depends on knowing their rendered size. See prepareLayout for the contract.

Returns

void | Promise<void | Disposer>

Inherited from

Rect.prepareRender

prepareRenderAssets()

prepareRenderAssets(): void

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

Walk the subtree firing each node's pre-render async setup (see prepareRender). Fire-and-forget: does not block precomp's synchronous per-frame pass.

Returns

void

Inherited from

Rect.prepareRenderAssets

provideContext()

protected provideContext(parent): ContextMap

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

Providers override this to attach their token(s) to the ContextMap handed to descendants. Base passes the parent's map through unchanged.

Parameters

parent

Returns

Inherited from

Rect.provideContext

reinit()

reinit(force?): void

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

Public entry point to reinitProps. A Scene owns its root node by composition (it no longer is a node), so it can't reach the protected reinitProps directly — it calls this on its root before a rebuild to restore default-baseline signals after a prior dispose, and with force to also reset live-but-tweened props back to their defaults.

Parameters

force?

boolean = false

Returns

void

Inherited from

Rect.reinit

reinitProps()

protected reinitProps(force?): void

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

Re-create this node's reactive signals from their

Parameters

force?

boolean = false

Returns

void

Inherited from

Rect.reinitProps

removeChild()

removeChild(child): Node<NodeProps> | null

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

Parameters

child

Returns

Node<NodeProps> | null

Inherited from

Rect.removeChild

removeChildAt()

Call Signature

removeChildAt(index): Node<NodeProps> | null

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

Parameters

index

number

Returns

Node<NodeProps> | null

Inherited from

Rect.removeChildAt

Call Signature

removeChildAt(index, duration, easing?): FrameGenerator

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

Parameters

index

number

duration

number

easing?

Returns

Inherited from

Rect.removeChildAt

render()

render(ctx): void

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

Parameters

ctx

Returns

void

Inherited from

Rect.render

renderChildren()

renderChildren(ctx): void

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

Parameters

ctx

Returns

void

Inherited from

Rect.renderChildren

renderContentWithEffects()

protected renderContentWithEffects(ctx, body): void

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

Run body (this node's own painting + children) inside the node's effect and clip-path scopes — the shared content-rendering envelope every node uses so effects behave identically regardless of how a node draws. The caller is expected to have already pushed the node's transform (applyTransform). The envelope, outermost-first:

applyBackdropEffects — filters/warps the backdrop beneath the node, confined to its clipSelf silhouette.
A foreground effect scope (posterize wrapping bulge) capturing everything body paints, so those shader effects warp/band the lot.
A clipPathSelf clip cutting through both the node's own paint and its children.

Nodes with a bespoke onRender (boolean, mask, …) call this with their custom body to gain the same effect support as a standard shape, instead of duplicating the scope bookkeeping.

Parameters

ctx

Rect.renderContentWithEffects

body

() => void

Returns

void

Inherited from

renderOverlay()

protected renderOverlay(ctx): void

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

Paint the node's overlay layer — over its own fill and its children, but under the stroke — clipped to the node's silhouette. Called from onRender after children render and before renderStroke. No-op by default; ShapeNode paints the resolved overlay as a fill of its silhouette so a texture (e.g. VHS grain) sits over the whole subtree.

Parameters

ctx

Returns

void

Inherited from

Rect.renderOverlay

renderSelf()

protected renderSelf(draw): void

Defined in: nodes/media/image-node.ts:88

Hook for custom nodes that draw their own content (raw Graphics commands, etc.) without subclassing ShapeNode. Called from onRender between the transform push and the children render, the same slot ShapeNode.renderSelf occupies. No-op by default — drawing nothing here doesn't change the render flow at all.

Parameters

draw

Returns

void

Overrides

Rect.renderSelf

renderStroke()

protected renderStroke(ctx): void

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

Paint the node's stroke last — over its fill, children, and overlay. Deferred out of renderSelf (which now draws only shadow+fill) so the stroke frames the whole subtree and sits above any overlay. Called from onRender after renderOverlay. No-op by default; ShapeNode strokes its silhouette.

Parameters

ctx

Returns

void

Inherited from

Rect.renderStroke

reparent()

Call Signature

reparent(newParent): void

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

Parameters

newParent

Returns

void

Inherited from

Rect.reparent

Call Signature

reparent(newParent, duration, easing?): FrameGenerator

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

Parameters

newParent

duration

number

easing?

Returns

Inherited from

Rect.reparent

resolveContext()

protected resolveContext(_ctx): void

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

Hook for applying inherited context values to this node, once, after the node is linked into the tree and the context walk has resolved its ancestors' providers — the first moment useContext returns real values (the constructor runs before the node is linked, so it can't read context).

Runs exactly once per node instance: the runtime rebuilds the subtree on every reset/scrub/precomp rather than replaying this hook, so there is no "each pass" re-entry to guard against — never call clearChildren or write idempotency ceremony here.

Composition rule

Structure (which children exist, and how many) is built in the constructor via add from props — never here, and never from context. This hook applies context-derived values only: read the resolved value from ctx (or useContext) and write it onto the already-built structure, typically through refs captured in the constructor.

Parameters

_ctx

Rect.resolveSizeInput

Returns

void

Example

// constructor: this.add(<Rect ref={this.accent} … />)   // structure from props
protected override resolveContext(ctx: ContextMap): void {
  this.accent().set({ fill: ctx.get(ThemeToken).accent }); // value from context
}

Inherited from

Rect.resolveContext

resolveSizeInput()

resolveSizeInput(sizeInput, availableSize, childrenSize): number

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

Parameters

sizeInput

SizeInput

availableSize

number

childrenSize

number

Returns

number

Inherited from

restore()

Call Signature

restore(): void

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

Pop the most recent save snapshot and roll this node back to it.

Called with no duration (or 0), every prop is reapplied instantly — plain values are set, reactive bindings are re-bound. Called with a positive duration, the numeric props (and any with a custom tween) animate toward their saved values over that many seconds; once the tween finishes the full snapshot is reapplied, which re-binds any reactive props and snaps non-tweenable props (e.g. strings) to their saved values.

A no-op (returns immediately) if there is nothing on the stack.

Returns

void

Inherited from

Rect.restore

Call Signature

restore(duration, easing?): FrameGenerator

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

Pop the most recent save snapshot and roll this node back to it.

A no-op (returns immediately) if there is nothing on the stack.

Parameters

duration

number

Seconds to animate the rollback over. Omit for an instant restore.

easing?

Optional easing for the animated restore.

Returns

Inherited from

Rect.restore

rotateTo()

rotateTo(rotation, duration, ease?): FrameGenerator

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

Animate rotate to the target angle (degrees, clockwise).

Parameters

rotation

number

duration

number

ease?

Returns

Example

yield* node.rotateTo(180, 0.6, ease.inOutQuad);

Inherited from

Rect.rotateTo

sample()

sample(): void

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

Per-frame sampling of derived render state (currently motion). Recurses to children so the whole subtree is sampled in one pass. Called from ellapse every frame; kept as a named seam so the priming path can seed the same state without a full ellapse (see StateEvaluator.resetSlot).

Returns

void

Inherited from

Rect.sample

save()

save(): void

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

Push a snapshot of this node's current state onto its save stack.

Every reactive prop (x, y, scale, opacity, fill, …) is captured, preserving reactive bindings — a prop bound to () => other().x is saved as the binding, not just its resolved value, so restore re-binds it rather than freezing the value. Calls stack: each save() pushes a new layer, and each restore pops the most recent one.

Returns

void

Example

node.save();
yield* node.moveTo(200, 0, 1);
yield* node.restore(1);   // animate back to where it was saved

Inherited from

Rect.save

scaleTo()

scaleTo(scale, duration, ease?): FrameGenerator

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

Animate scale to the target factor.

Parameters

scale

number

duration

number

ease?

Returns

Example

yield* node.scaleTo(1.5, 0.4);   // grow
yield* node.scaleTo(0,   0.3);   // shrink to nothing

Inherited from

Rect.scaleTo

set()

set(props): void

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

Parameters

props

align?

Anchor | (() => Anchor)

Alignment of children within the content box: a named position ('center', 'topLeft', …) or an explicit per-axis pivot Vector2 (x: -1 left … +1 right, y: -1 bottom … +1 top).

anchor?

Anchor | (() => Anchor | undefined)

The point held fixed as zoom scales, and the alignment inside the bounds when the image doesn't cover them. Defaults to 'center'.

blend?

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?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

bottomLeft?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

bottomRight?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

center?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

centerLeft?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

centerRight?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

children?

NodeChildren | (() => NodeChildren)

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?

boolean | (() => boolean)

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

colSpan?

number | (() => number)

How many grid columns this child spans. Default 1.

column?

number | (() => number)

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

cornerRadius?

RectCornerRadius | (() => RectCornerRadius)

Corner radius in pixels — uniform, per-corner, or per-axis.

cornerStyle?

RectCornerStyle | (() => RectCornerStyle)

How each corner is shaped once it has a radius: 'rounded' or 'angled'.

crop?

Insets | (() => Insets | undefined)

Window onto the source, in fractions of its own size, applied before fit — crop={{ horizontal: 0.2 }} trims a fifth off each side.

effects?

Effect | (() => Effect)

end?

number | (() => number | undefined)

fill?

Fill | (() => Fill | undefined)

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

filters?

ImageFilter | (() => ImageFilter | undefined)

fit?

ImageFit | (() => ImageFit | undefined)

How the (cropped) image is scaled into the node's bounds. Defaults to 'fill'.

flex?

number | (() => number)

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

gap?

GapSize | (() => GapSize)

Spacing between children along the layout's main axis.

group?

LayoutMode | (() => LayoutMode)

Layout mode for children: flex row / column, or overlapping stack.

height?

SizeInput | (() => SizeInput)

matrix?

ImageMatrix | (() => ImageMatrix | undefined)

Raw image→shape matrix; bypasses crop/fit/zoom/anchor and the bounds.

opacity?

number | (() => number)

overlay?

Fill | (() => Fill | undefined)

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?

Insets | (() => Insets)

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

pivot?

Anchor | (() => Anchor)

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.

rotation?

number | (() => number)

row?

number | (() => number)

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

rowSpan?

number | (() => number)

How many grid rows this child spans. Default 1.

scale?

number | (() => number)

seed?

string | number | (() => string | number)

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.

shadow?

Shadow | (() => Shadow | undefined)

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?

SizeInput | (() => SizeInput)

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.

src?

string | (() => string | undefined)

start?

number | (() => number | undefined)

stroke?

Stroke | (() => Stroke | undefined)

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.

topCenter?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

topLeft?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

topRight?

Vector2 | (() => Vector2) | (() => Vector2 | (() => Vector2))

width?

SizeInput | (() => SizeInput)

x?

number | (() => number)

y?

number | (() => number)

zoom?

number | (() => number | undefined)

Magnification on top of the fitted scale. 1 (default) is the fitted size.

Returns

void

Inherited from

Rect.set

setLayoutRect()

protected setLayoutRect(rect): void

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

Record this node's allocated bounds without touching children. Used by subclasses that run their own child-layout pass (e.g. Rect's flex/stack) and so skip layoutChildren.

Parameters

rect

Returns

void

Inherited from

Rect.setLayoutRect

shadowTo()

shadowTo(to, duration, options?): FrameGenerator

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

Parameters

to

Shadow

duration

number

options?

TweenOptions<ShadowResolved[]>

Returns

Inherited from

Rect.shadowTo

shapeGraphics()

protected shapeGraphics(): Graphics

Defined in: nodes/media/image-node.ts:77

The node's bare silhouette as a Graphics with no paint ops. renderSelf appends shadow + fill; renderOverlay appends the overlay fill; renderStroke appends the stroke. Sharing one builder keeps each shape's geometry defined in a single place.

Returns null for nodes that have no single fillable silhouette (text, boolean groups, grids) — those override the paint hooks themselves or opt out of the generic overlay/stroke passes.

Returns

Graphics

Overrides

Rect.shapeGraphics

strokeTo()

strokeTo(to, duration, options?): FrameGenerator

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

Parameters

to

Stroke

duration

number

options?

TweenOptions<StrokeResolved[]>

Returns

Inherited from

Rect.strokeTo

tick()

tick(_globalTime): void

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

Parameters

_globalTime

number

Returns

void

Inherited from

Rect.tick

to()

to(to, duration, easing?): AnimationBuilder<ImageProps>

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

Parameters

to

Partial<P>

duration

number

easing?

AnimationBuilder<ImageProps>

Returns

Inherited from

Rect.to

tryAssets()

protected tryAssets(): AssetCatalog | null

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

Returns the bound asset catalog, or null if this node hasn't been bound yet.

Returns

AssetCatalog | null

Inherited from

Rect.tryAssets

useContext()

useContext<T>(ctx): T

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

Read the nearest ancestor provider's value for ctx (or its default).

Type Parameters

T

T

Parameters

ctx

Context<T>

Returns

T

Inherited from

Rect.useContext

wiggle()

wiggle(amplitudes, duration, options?): FrameGenerator

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

Continuously jitter one or more numeric props around their current values for duration seconds, then settle them back exactly where they started.

The target reads like to — an object of prop → amplitude rather than prop → target — so you name props as typed object keys, never string arguments, and can jitter several at once: wiggle({ x: 8, rotation: 2 }, 0.6). Each value is the peak offset from that prop's base, in the prop's own units. Call-wide shaping (frequency, settle) goes in the trailing WiggleOptions bag, mirroring how TweenOptions bundles its knobs.

Unlike to(), which drives a prop to a target, wiggle adds an organic offset on top of a fixed base — each prop's value at the moment the generator starts. Offsets are drawn from this node's seeded random noise field, so they are correlated over time (nearby frames get nearby offsets) rather than the jagged jumps independent draws would give — the difference that makes it read as hand-held shake / drift rather than static. Because the source is seeded per node, the motion is reproducible across scrub / precomp / HMR out of the box.

The offset rides on each prop's stored numeric value, so raw props (x, rotation, …) and mapped props that resolve to a plain number both wiggle correctly. A prop whose stored value isn't a number — width: 'fill', or a per-corner cornerRadius object — has no scalar to offset, so it's skipped with a dev-time warning rather than producing NaN.

The bases are captured once, so wiggle composes: run it inside parallel alongside a to() on other props, or give sibling nodes distinct seeds (via the NodeProps.seed prop) so a crowd wiggles out of phase. Every prop's offset eases to zero over the final settle fraction so it lands back on its base without a visible snap.

Parameters

amplitudes

Map of prop → peak offset from its base, in the prop's own units. Same key shape as to's target ({ x, y, rotation, … }).

align?

number

Alignment of children within the content box: a named position ('center', 'topLeft', …) or an explicit per-axis pivot Vector2 (x: -1 left … +1 right, y: -1 bottom … +1 top).

anchor?

number

The point held fixed as zoom scales, and the alignment inside the bounds when the image doesn't cover them. Defaults to 'center'.

blend?

number

bottomCenter?

number

bottomLeft?

number

bottomRight?

number

center?

number

centerLeft?

number

centerRight?

number

children?

number

clip?

number

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

colSpan?

number

How many grid columns this child spans. Default 1.

column?

number

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

cornerRadius?

number

Corner radius in pixels — uniform, per-corner, or per-axis.

cornerStyle?

number

How each corner is shaped once it has a radius: 'rounded' or 'angled'.

crop?

number

Window onto the source, in fractions of its own size, applied before fit — crop={{ horizontal: 0.2 }} trims a fifth off each side.

effects?

number

end?

number

fill?

number

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

filters?

number

fit?

number

How the (cropped) image is scaled into the node's bounds. Defaults to 'fill'.

flex?

number

gap?

number

Spacing between children along the layout's main axis.

group?

number

Layout mode for children: flex row / column, or overlapping stack.

height?

number

matrix?

number

Raw image→shape matrix; bypasses crop/fit/zoom/anchor and the bounds.

opacity?

number

overlay?

number

padding?

number

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

pivot?

number

rotation?

number

row?

number

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

rowSpan?

number

How many grid rows this child spans. Default 1.

scale?

number

seed?

number

shadow?

number

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?

number

src?

number

start?

number

stroke?

number

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.

topCenter?

number

topLeft?

number

topRight?

number

width?

number

x?

number

y?

number

zoom?

number

Magnification on top of the fitted scale. 1 (default) is the fitted size.

duration

number

Seconds to wiggle for. Pass Infinity inside a parallel for an endless jitter bounded by its siblings (no settle is applied to an infinite wiggle).

options?

WiggleOptions

Call-wide WiggleOptions: frequency (default 4) and settle. frequency applies to every prop; for a per-prop rate, use a second wiggle in the same parallel.

Returns

Examples

// Shake horizontally for a beat, then rest exactly where it began:
yield* node.wiggle({ x: 8 }, 0.6);

// A faster shake with a hard cut (no ease-out) at the end:
yield* node.wiggle({ x: 12, y: 12 }, 1, { frequency: 8, settle: 0 });

// Hand-held drift while it moves across (offset composes with the move):
yield* parallel(
  node.moveX(400, 2),
  node.wiggle({ y: 6, rotation: 2 }, 2, { frequency: 3 }),
);

Inherited from

Rect.wiggle

worldMatrix()

protected worldMatrix(): Matrix2D

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

This node's full transform in canvas (y-down) world space — the product of every ancestor's local matrix from the root down to this node. Reactive: walks the live parent chain and reads each node's transform signals.

Returns

Matrix2D

Inherited from

Rect.worldMatrix

flattenChildrenProp()

protected static flattenChildrenProp(props): Node<NodeProps>[]

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

Flatten a constructor's raw children prop into the Node instances it contains, without mutating or adding them — the same normalisation the constructor applies before addChildren, exposed standalone so applyDefaultSize overrides can inspect children's own resolved width/height before they're attached (JSX children are constructed, defaults and all, before being passed in as props).

Parameters

props

{ children?: unknown; } | undefined

Returns

Rect.flattenChildrenProp

Inherited from

hasFillChild()

protected static hasFillChild(children, axis): boolean

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

True if any of children requests "fill" on axis — the signal a container's applyDefaultSize override uses to decide whether its own hug default on that axis would strand the child with no space to fill into (see Rect/FlexNode overrides).

Parameters

children