MotionScript

@motion-script/core


@motion-script/core / ImageFillProp

Interface: ImageFillProp

Defined in: attributes/shape/fill/implementations/image.ts:45

Properties

anchor?

optional anchor?: Anchor

Defined in: attributes/shape/fill/implementations/image.ts:86

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

The same [-1, 1] y-up space as pivot/align (so 'topLeft', 'centerRight' and { x, y } all work, through the same resolveAnchor). The named point of the source lands on the same named point of the box: anchor: 'topLeft' pins the source's top-left corner to the box's, so zooming grows away from it. At the default centre this reproduces the classic centred cover/contain placement exactly.

Ignored by 'tile' (a repeating texture has no corner to pin) and inert under 'stretch' at zoom: 1 (the image already fills both axes).


blend?

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

Defined in: attributes/shape/fill/implementations/image.ts:99


crop?

optional crop?: Insets

Defined in: attributes/shape/fill/implementations/image.ts:58

Window onto the source, applied before fit — see ImageCrop.

Not honoured by fit: 'tile': the shader repeats the whole texture, so there is no way to tile a sub-rect of it.


filters?

optional filters?: MediaFilter[]

Defined in: attributes/shape/fill/implementations/image.ts:97


fit?

optional fit?: ImageFit

Defined in: attributes/shape/fill/implementations/image.ts:50

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


matrix?

optional matrix?: ImageMatrix

Defined in: attributes/shape/fill/implementations/image.ts:95

Raw image→shape matrix. The escape hatch: it wins outright, bypassing crop/fit/zoom/anchor and the shape bounds, so it must carry the translation itself. Named matrix rather than transform because a node's transform is its x/y/scale/rotation; this is specifically the 3×3 that maps image pixels into the shape's local space.


opacity?

optional opacity?: number

Defined in: attributes/shape/fill/implementations/image.ts:98


src

src: string

Defined in: attributes/shape/fill/implementations/image.ts:47


type

type: "image"

Defined in: attributes/shape/fill/implementations/image.ts:46


zoom?

optional zoom?: number

Defined in: attributes/shape/fill/implementations/image.ts:70

Magnification applied on top of whatever fit resolved. 1 (the default) is the fitted size, 2 twice that, 0.5 half.

A multiplier rather than an absolute scale so it stays meaningful under every mode and at any node size: zoom: 2 means "twice as big as it would otherwise be" whether the fit was cover, contain or native tiling. Under 'tile' the fitted scale is 1 (native size), so zoom there is the tile size multiplier.