This shortcut property will set the node’s position so that the bottom edge ends up in the given place. If present, overrides the NodeProps.position property.

Inherited from

MediaProps.bottom

bottomLeft?

optional bottomLeft?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:183

The position of the bottom left corner of this node.

Remarks

This shortcut property will set the node’s position so that the bottom left corner ends up in the given place. If present, overrides the NodeProps.position property.

Inherited from

MediaProps.bottomLeft

bottomRight?

optional bottomRight?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:192

The position of the bottom right corner of this node.

Remarks

This shortcut property will set the node’s position so that the bottom right corner ends up in the given place. If present, overrides the NodeProps.position property.

Inherited from

MediaProps.bottomRight

cache?

optional cache?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Node.ts:99

Inherited from

MediaProps.cache

cachePadding?

optional cachePadding?: SignalValue<PossibleSpacing>

Defined in: 2d/src/lib/components/Node.ts:119

Controls the padding of the cached canvas used by this node.

Remarks

By default, the size of the cache is determined based on the bounding box of the node and its children. That includes effects such as stroke or shadow. This property can be used to expand the cache area further. Usually used to account for custom effects created by shaders.

Inherited from

MediaProps.cachePadding

cachePaddingBottom?

optional cachePaddingBottom?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:107

Controls the padding of the cached canvas used by this node.

Remarks

Inherited from

MediaProps.cachePaddingBottom

cachePaddingLeft?

optional cachePaddingLeft?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:111

Controls the padding of the cached canvas used by this node.

Remarks

Inherited from

MediaProps.cachePaddingLeft

cachePaddingRight?

optional cachePaddingRight?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:115

Controls the padding of the cached canvas used by this node.

Remarks

Inherited from

MediaProps.cachePaddingRight

cachePaddingTop?

optional cachePaddingTop?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:103

Controls the padding of the cached canvas used by this node.

Remarks

Inherited from

MediaProps.cachePaddingTop

children?

optional children?: SignalValue<ComponentChildren>

Defined in: 2d/src/lib/components/Node.ts:71

Inherited from

MediaProps.children

clip?

optional clip?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Layout.ts:193

Inherited from

MediaProps.clip

closed?

optional closed?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Curve.ts:22

Whether the curve should be closed.

Remarks

Closed curves have their start and end points connected.

Inherited from

MediaProps.closed

columnGap?

optional columnGap?: SignalValue<Length>

Defined in: 2d/src/lib/components/Layout.ts:93

Inherited from

MediaProps.columnGap

composite?

optional composite?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Node.ts:121

Inherited from

MediaProps.composite

compositeOperation?

optional compositeOperation?: SignalValue<GlobalCompositeOperation>

Defined in: 2d/src/lib/components/Node.ts:122

Inherited from

MediaProps.compositeOperation

cornerSharpness?

optional cornerSharpness?: SignalValue<number>

Defined in: 2d/src/lib/components/Rect.ts:31

Controls the sharpness of smoothCorners.

Remarks

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

Requires smoothCorners to be enabled to have any effect. By default, corner sharpness is set to 0.6 which represents a smooth, circle-like rounding. At 0 the edges are squared off.

Inherited from

MediaProps.cornerSharpness

decoder?

optional decoder?: SignalValue<"web" | "ffmpeg" | "slow" | null>

Defined in: 2d/src/lib/components/Video.ts:24

Which decoder to use during rendering. The web decoder is the fastest but only supports MP4 files. The ffmpeg decoder is slower and more resource intensive but supports more formats. The slow decoder is the slowest but supports all formats.

direction?

optional direction?: SignalValue<FlexDirection>

Defined in: 2d/src/lib/components/Layout.ts:82

Inherited from

MediaProps.direction

end?

optional end?: SignalValue<number>

Defined in: 2d/src/lib/components/Curve.ts:38

A percentage from the start after which the curve should be clipped.

Remarks

The portion of the curve that comes after the given percentage will be made invisible.

This property is usefully for animating the curve appearing on the screen. The value of 0 means the very start of the curve (accounting for the startOffset) while 1 means the very end (accounting for the endOffset).

Inherited from

MediaProps.end

endArrow?

optional endArrow?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Curve.ts:46

Whether to display an arrow at the end of the visible curve.

Remarks

Use arrowSize to control the size of the arrow.

Inherited from

MediaProps.endArrow

endOffset?

optional endOffset?: SignalValue<number>

Defined in: 2d/src/lib/components/Curve.ts:42

The offset in pixels from the end of the curve.

Remarks

This property lets you specify where along the defined curve the actual visible portion ends. For example, setting it to 20 will make the last 20 pixels of the curve invisible.

This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use end instead.

Inherited from

MediaProps.endOffset

fill?

optional fill?: SignalValue<PossibleCanvasStyle>

Defined in: 2d/src/lib/components/Shape.ts:18

Inherited from

MediaProps.fill

filters?

optional filters?: SignalValue<Filter[]>

Defined in: 2d/src/lib/components/Node.ts:91

Inherited from

MediaProps.filters

fontFamily?

optional fontFamily?: SignalValue<string>

Defined in: 2d/src/lib/components/Layout.ts:96

Inherited from

MediaProps.fontFamily

fontSize?

optional fontSize?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:97

Inherited from

MediaProps.fontSize

fontStyle?

optional fontStyle?: SignalValue<string>

Defined in: 2d/src/lib/components/Layout.ts:98

Inherited from

MediaProps.fontStyle

fontWeight?

optional fontWeight?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:99

Inherited from

MediaProps.fontWeight

gap?

optional gap?: SignalValue<Length>

Defined in: 2d/src/lib/components/Layout.ts:94

Inherited from

MediaProps.gap

grow?

optional grow?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:84

Inherited from

MediaProps.grow

height?

optional height?: SignalValue<Length>

Defined in: 2d/src/lib/components/Layout.ts:63

Inherited from

MediaProps.height

justifyContent?

optional justifyContent?: SignalValue<FlexContent>

Defined in: 2d/src/lib/components/Layout.ts:88

Inherited from

MediaProps.justifyContent

key?

optional key?: string

Defined in: 2d/src/lib/components/Node.ts:76

Inherited from

MediaProps.key

layout?

optional layout?: LayoutMode

Defined in: 2d/src/lib/components/Layout.ts:59

Inherited from

MediaProps.layout

left?

optional left?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:147

The position of the left edge of this node.

Remarks

This shortcut property will set the node’s position so that the left edge ends up in the given place. If present, overrides the NodeProps.position property.

Inherited from

MediaProps.left

letterSpacing?

optional letterSpacing?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:101

Inherited from

MediaProps.letterSpacing

lineCap?

optional lineCap?: SignalValue<CanvasLineCap>

Defined in: 2d/src/lib/components/Shape.ts:23

Inherited from

MediaProps.lineCap

lineDash?

optional lineDash?: SignalValue<number[]>

Defined in: 2d/src/lib/components/Shape.ts:24

Inherited from

MediaProps.lineDash

lineDashOffset?

optional lineDashOffset?: SignalValue<number>

Defined in: 2d/src/lib/components/Shape.ts:25

Inherited from

MediaProps.lineDashOffset

lineHeight?

optional lineHeight?: SignalValue<Length>

Defined in: 2d/src/lib/components/Layout.ts:100

Inherited from

MediaProps.lineHeight

lineJoin?

optional lineJoin?: SignalValue<CanvasLineJoin>

Defined in: 2d/src/lib/components/Shape.ts:22

Inherited from

MediaProps.lineJoin

lineWidth?

optional lineWidth?: SignalValue<number>

Defined in: 2d/src/lib/components/Shape.ts:21

Inherited from

MediaProps.lineWidth

loop?

optional loop?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Media.ts:16

Inherited from

MediaProps.loop

margin?

optional margin?: SignalValue<PossibleSpacing>

Defined in: 2d/src/lib/components/Layout.ts:74

Inherited from

MediaProps.margin

marginBottom?

optional marginBottom?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:71

Inherited from

MediaProps.marginBottom

marginLeft?

optional marginLeft?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:72

Inherited from

MediaProps.marginLeft

marginRight?

optional marginRight?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:73

Inherited from

MediaProps.marginRight

marginTop?

optional marginTop?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:70

Inherited from

MediaProps.marginTop

maxHeight?

optional maxHeight?: SignalValue<LengthLimit>

Defined in: 2d/src/lib/components/Layout.ts:65

Inherited from

MediaProps.maxHeight

maxWidth?

optional maxWidth?: SignalValue<LengthLimit>

Defined in: 2d/src/lib/components/Layout.ts:64

Inherited from

MediaProps.maxWidth

middle?

optional middle?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:120

The position of the center of this node.

Remarks

This shortcut property will set the node’s position so that the center ends up in the given place. If present, overrides the NodeProps.position property. When offset is not set, this will be the same as the NodeProps.position.

Inherited from

MediaProps.middle

minHeight?

optional minHeight?: SignalValue<LengthLimit>

Defined in: 2d/src/lib/components/Layout.ts:67

Inherited from

MediaProps.minHeight

minWidth?

optional minWidth?: SignalValue<LengthLimit>

Defined in: 2d/src/lib/components/Layout.ts:66

Inherited from

MediaProps.minWidth

offset?

optional offset?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:109

Inherited from

MediaProps.offset

offsetX?

optional offsetX?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:107

Inherited from

MediaProps.offsetX

offsetY?

optional offsetY?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:108

Inherited from

MediaProps.offsetY

opacity?

optional opacity?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:90

Inherited from

MediaProps.opacity

padding?

optional padding?: SignalValue<PossibleSpacing>

Defined in: 2d/src/lib/components/Layout.ts:80

Inherited from

MediaProps.padding

paddingBottom?

optional paddingBottom?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:77

Inherited from

MediaProps.paddingBottom

paddingLeft?

optional paddingLeft?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:78

Inherited from

MediaProps.paddingLeft

paddingRight?

optional paddingRight?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:79

Inherited from

MediaProps.paddingRight

paddingTop?

optional paddingTop?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:76

Inherited from

MediaProps.paddingTop

play?

optional play?: boolean

Defined in: 2d/src/lib/components/Media.ts:20

Inherited from

MediaProps.play

playbackRate?

optional playbackRate?: number

Defined in: 2d/src/lib/components/Media.ts:17

Inherited from

MediaProps.playbackRate

position?

optional position?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Node.ts:80

Inherited from

MediaProps.position

radius?

optional radius?: SignalValue<PossibleSpacing>

Defined in: 2d/src/lib/components/Rect.ts:21

Rounds the corners of this rectangle.

Remarks

The value represents the radius of the quarter circle that is used to round the corners. If the value is a number, the same radius is used for all corners. Passing an array of two to four numbers will set individual radii for each corner. Individual radii correspond to different corners depending on the number of values passed:


// top-left-and-bottom-right | top-right-and-bottom-left
[10, 30]
// top-left | top-right-and-bottom-left | bottom-right
[10, 20, 30]
// top-left | top-right | bottom-right | bottom-left
[10, 20, 30, 40]

Inherited from

MediaProps.radius

ratio?

optional ratio?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:68

Inherited from

MediaProps.ratio

ref?

optional ref?: ReferenceReceiver<any>

Defined in: 2d/src/lib/components/Node.ts:70

Inherited from

MediaProps.ref

right?

optional right?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:156

The position of the right edge of this node.

Remarks

This shortcut property will set the node’s position so that the right edge ends up in the given place. If present, overrides the NodeProps.position property.

Inherited from

MediaProps.right

rotation?

optional rotation?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:81

Inherited from

MediaProps.rotation

rowGap?

optional rowGap?: SignalValue<Length>

Defined in: 2d/src/lib/components/Layout.ts:92

Inherited from

MediaProps.rowGap

scale?

optional scale?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Node.ts:84

Inherited from

MediaProps.scale

scaleX?

optional scaleX?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:82

Inherited from

MediaProps.scaleX

scaleY?

optional scaleY?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:83

Inherited from

MediaProps.scaleY

shaders?

optional shaders?: PossibleShaderConfig

Defined in: 2d/src/lib/components/Node.ts:126

Experimental

Inherited from

MediaProps.shaders

shadowBlur?

optional shadowBlur?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:94

Inherited from

MediaProps.shadowBlur

shadowColor?

optional shadowColor?: SignalValue<PossibleColor>

Defined in: 2d/src/lib/components/Node.ts:93

Inherited from

MediaProps.shadowColor

shadowOffset?

optional shadowOffset?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Node.ts:97

Inherited from

MediaProps.shadowOffset

shadowOffsetX?

optional shadowOffsetX?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:95

Inherited from

MediaProps.shadowOffsetX

shadowOffsetY?

optional shadowOffsetY?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:96

Inherited from

MediaProps.shadowOffsetY

shrink?

optional shrink?: SignalValue<number>

Defined in: 2d/src/lib/components/Layout.ts:85

Inherited from

MediaProps.shrink

size?

optional size?: SignalValue<PossibleVector2<Length>>

Defined in: 2d/src/lib/components/Layout.ts:106

Inherited from

MediaProps.size

skew?

optional skew?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Node.ts:87

Inherited from

MediaProps.skew

skewX?

optional skewX?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:85

Inherited from

MediaProps.skewX

skewY?

optional skewY?: SignalValue<number>

Defined in: 2d/src/lib/components/Node.ts:86

Inherited from

MediaProps.skewY

smoothCorners?

optional smoothCorners?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Rect.ts:26

Enables corner smoothing.

Remarks

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

When enabled, rounded corners are drawn continuously using Bézier curves rather than quarter circles. The sharpness of the curve can be controlled with cornerSharpness.

You can read more about corner smoothing in this article by Nick Lawrence .

Inherited from

MediaProps.smoothCorners

smoothing?

optional smoothing?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Video.ts:20

Whether the video should be smoothed.

Remarks

When disabled, the video will be scaled using the nearest neighbor interpolation with no smoothing. The resulting video will appear pixelated.

spawner?

optional spawner?: SignalValue<ComponentChildren>

Defined in: 2d/src/lib/components/Node.ts:75

Deprecated

Use children instead.

Inherited from

MediaProps.spawner

src?

optional src?: SignalValue<string>

Defined in: 2d/src/lib/components/Media.ts:15

Inherited from

MediaProps.src

start?

optional start?: SignalValue<number>

Defined in: 2d/src/lib/components/Curve.ts:26

A percentage from the start before which the curve should be clipped.

Remarks

The portion of the curve that comes before the given percentage will be made invisible.

Inherited from

MediaProps.start

startArrow?

optional startArrow?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Curve.ts:34

Whether to display an arrow at the start of the visible curve.

Remarks

Use arrowSize to control the size of the arrow.

Inherited from

MediaProps.startArrow

startOffset?

optional startOffset?: SignalValue<number>

Defined in: 2d/src/lib/components/Curve.ts:30

The offset in pixels from the start of the curve.

Remarks

This property lets you specify where along the defined curve the actual visible portion starts. For example, setting it to 20 will make the first 20 pixels of the curve invisible.

This property is useful for trimming the curve using a fixed distance. If you want to animate the curve appearing on the screen, use start instead.

Inherited from

MediaProps.startOffset

stroke?

optional stroke?: SignalValue<PossibleCanvasStyle>

Defined in: 2d/src/lib/components/Shape.ts:19

Inherited from

MediaProps.stroke

strokeFirst?

optional strokeFirst?: SignalValue<boolean>

Defined in: 2d/src/lib/components/Shape.ts:20

Inherited from

MediaProps.strokeFirst

tagName?

optional tagName?: keyof HTMLElementTagNameMap

Defined in: 2d/src/lib/components/Layout.ts:60

Inherited from

MediaProps.tagName

textAlign?

optional textAlign?: SignalValue<CanvasTextAlign>

Defined in: 2d/src/lib/components/Layout.ts:104

Inherited from

MediaProps.textAlign

textDirection?

optional textDirection?: SignalValue<CanvasDirection>

Defined in: 2d/src/lib/components/Layout.ts:103

Inherited from

MediaProps.textDirection

textWrap?

optional textWrap?: SignalValue<TextWrap>

Defined in: 2d/src/lib/components/Layout.ts:102

Inherited from

MediaProps.textWrap

time?

optional time?: SignalValue<number>

Defined in: 2d/src/lib/components/Media.ts:19

Inherited from

MediaProps.time

top?

optional top?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:129

The position of the top edge of this node.

Remarks

This shortcut property will set the node’s position so that the top edge ends up in the given place. If present, overrides the NodeProps.position property.

Inherited from

MediaProps.top

topLeft?

optional topLeft?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:165

The position of the top left corner of this node.

Remarks

This shortcut property will set the node’s position so that the top left corner ends up in the given place. If present, overrides the NodeProps.position property.

Inherited from

MediaProps.topLeft

topRight?

optional topRight?: SignalValue<PossibleVector2>

Defined in: 2d/src/lib/components/Layout.ts:174

The position of the top right corner of this node.

Remarks

This shortcut property will set the node’s position so that the top right corner ends up in the given place. If present, overrides the NodeProps.position property.