VideoProps
interface VideoProps extends RectProps
Properties
alignContent
alignContent?: SignalValueFlexContent
RectProps.alignContentalignItems
alignItems?: SignalValueFlexItems
RectProps.alignItemsalignSelf
alignSelf?: SignalValueFlexItems
RectProps.alignSelfalpha
alpha?: SignalValuenumber
The alpha value of this video.
Unlike opacity, the alpha value affects only the video itself, leaving the fill, stroke, and children intact.
anchor
Inherited from RectProps.anchoranchorX
anchorX?: SignalValuenumber
RectProps.anchorXanchorY
anchorY?: SignalValuenumber
RectProps.anchorYantialiased
antialiased?: SignalValueboolean
RectProps.antialiasedarrowSize
arrowSize?: SignalValuenumber
Controls the size of the end and start arrows.
To make the arrows visible make sure to enable startArrow and/or
endArrow.
RectProps.arrowSizebasis
basis?: SignalValueFlexBasis
RectProps.basisbottom
The position of the bottom edge of this node.
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.
RectProps.bottombottomLeft
The position of the bottom left corner of this node.
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.
RectProps.bottomLeftbottomRight
The position of the bottom right corner of this node.
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.
RectProps.bottomRightbowing
bowing?: SignalValuenumber
RoughConfig.bowing
Inherited fromRectProps.bowingcache
cache?: SignalValueboolean
RectProps.cachecachePadding
Controls the padding of the cached canvas used by this node.
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.
RectProps.cachePaddingcachePaddingBottom
cachePaddingBottom?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
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.
RectProps.cachePaddingBottomcachePaddingLeft
cachePaddingLeft?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
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.
RectProps.cachePaddingLeftcachePaddingRight
cachePaddingRight?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
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.
RectProps.cachePaddingRightcachePaddingTop
cachePaddingTop?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
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.
RectProps.cachePaddingTopchildren
children?: SignalValueComponentChildren
RectProps.childrenclip
clip?: SignalValueboolean
RectProps.clipclosed
closed?: SignalValueboolean
Whether the curve should be closed.
Closed curves have their start and end points connected.
Inherited fromRectProps.closedcolumnGap
columnGap?: SignalValueLength
RectProps.columnGapcomposite
composite?: SignalValueboolean
RectProps.compositecompositeOperation
compositeOperation?: SignalValueGlobalCompositeOperation
RectProps.compositeOperationcornerSharpness
cornerSharpness?: SignalValuenumber
Controls the sharpness of smoothCorners.
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.
RectProps.cornerSharpnessdirection
direction?: SignalValueFlexDirection
RectProps.directionend
end?: SignalValuenumber
A percentage from the start after which the curve should be clipped.
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).
RectProps.endendArrow
endArrow?: SignalValueboolean
Whether to display an arrow at the end of the visible curve.
Use arrowSize to control the size of the arrow.
RectProps.endArrowendOffset
endOffset?: SignalValuenumber
The offset in pixels from the end of the curve.
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.
RectProps.endOffsetfill
fill?: SignalValuePossibleCanvasStyle
RectProps.fillfilters
filters?: SignalValueFilter[]
RectProps.filtersfontFamily
fontFamily?: SignalValuestring
RectProps.fontFamilyfontSize
fontSize?: SignalValuenumber
RectProps.fontSizefontStyle
fontStyle?: SignalValuestring
RectProps.fontStylefontWeight
fontWeight?: SignalValuenumber
RectProps.fontWeightgap
gap?: SignalValuePossibleVector2Length
RectProps.gapgrow
grow?: SignalValuenumber
RectProps.growheight
height?: SignalValueLength
RectProps.heightjustifyContent
justifyContent?: SignalValueFlexContent
RectProps.justifyContentkey
key?: string
RectProps.keylayout
layout?: LayoutMode
RectProps.layoutleft
The position of the left edge of this node.
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.
RectProps.leftletterSpacing
letterSpacing?: SignalValuenumber
RectProps.letterSpacinglineCap
lineCap?: SignalValueCanvasLineCap
RectProps.lineCaplineDash
lineDash?: SignalValuenumber[]
RectProps.lineDashlineDashOffset
lineDashOffset?: SignalValuenumber
RectProps.lineDashOffsetlineHeight
lineHeight?: SignalValueLength
RectProps.lineHeightlineJoin
lineJoin?: SignalValueCanvasLineJoin
RectProps.lineJoinlineWidth
lineWidth?: SignalValuenumber
RectProps.lineWidthloop
loop?: SignalValueboolean
Whether this video should loop upon reaching the end.
margin
Inherited from RectProps.marginmarginBottom
marginBottom?: SignalValuenumber
RectProps.marginBottommarginLeft
marginLeft?: SignalValuenumber
RectProps.marginLeftmarginRight
marginRight?: SignalValuenumber
RectProps.marginRightmarginTop
marginTop?: SignalValuenumber
RectProps.marginTopmaxHeight
maxHeight?: SignalValueLengthLimit
RectProps.maxHeightmaxWidth
maxWidth?: SignalValueLengthLimit
RectProps.maxWidthmiddle
The position of the center of this node.
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 anchor is not set, this will be the same as the
NodeProps.position.
RectProps.middleminHeight
minHeight?: SignalValueLengthLimit
RectProps.minHeightminWidth
minWidth?: SignalValueLengthLimit
RectProps.minWidthopacity
opacity?: SignalValuenumber
RectProps.opacitypadding
Inherited from RectProps.paddingpaddingBottom
paddingBottom?: SignalValuenumber
RectProps.paddingBottompaddingLeft
paddingLeft?: SignalValuenumber
RectProps.paddingLeftpaddingRight
paddingRight?: SignalValuenumber
RectProps.paddingRightpaddingTop
paddingTop?: SignalValuenumber
RectProps.paddingTopplay
play?: boolean
playbackRate
playbackRate?: number
The rate at which the video plays, as multiples of the normal speed.
position
Inherited from RectProps.positionradius
Rounds the corners of this rectangle.
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]
RectProps.radiusratio
ratio?: SignalValuenumber
RectProps.ratioref
ref?: ReferenceReceiverany
RectProps.refright
The position of the right edge of this node.
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.
RectProps.rightrotation
rotation?: SignalValuenumber
RectProps.rotationrough
rough?: SignalValueboolean
Enable rough.js rendering.
Inherited fromRectProps.roughroughDisableMultiStroke
roughDisableMultiStroke?: SignalValueboolean
RoughConfig.disableMultiStroke
Inherited fromRectProps.roughDisableMultiStrokeroughDisableMultiStrokeFill
roughDisableMultiStrokeFill?: SignalValueboolean
RoughConfig.disableMultiStrokeFill
Inherited fromRectProps.roughDisableMultiStrokeFillroughFillStyle
roughFillStyle?: SignalValueRoughFillStyle
RoughConfig.fillStyle
Inherited fromRectProps.roughFillStyleroughFillWeight
roughFillWeight?: SignalValuenumber
RoughConfig.fillWeight
Inherited fromRectProps.roughFillWeightroughHachureAngle
roughHachureAngle?: SignalValuenumber
RoughConfig.hachureAngle
Inherited fromRectProps.roughHachureAngleroughHachureGap
roughHachureGap?: SignalValuenumber
RoughConfig.hachureGap
Inherited fromRectProps.roughHachureGaproughness
roughness?: SignalValuenumber
RoughConfig.roughness
Inherited fromRectProps.roughnessroughSeed
roughSeed?: SignalValuenumber
RoughConfig.seed
Inherited fromRectProps.roughSeedrowGap
rowGap?: SignalValueLength
RectProps.rowGapscale
Inherited from RectProps.scalescaleX
scaleX?: SignalValuenumber
RectProps.scaleXscaleY
scaleY?: SignalValuenumber
RectProps.scaleYshaders
shaders?: PossibleShaderConfig
RectProps.shadersshadowBlur
shadowBlur?: SignalValuenumber
RectProps.shadowBlurshadowColor
Inherited from RectProps.shadowColorshadowOffset
Inherited from RectProps.shadowOffsetshadowOffsetX
shadowOffsetX?: SignalValuenumber
RectProps.shadowOffsetXshadowOffsetY
shadowOffsetY?: SignalValuenumber
RectProps.shadowOffsetYshrink
shrink?: SignalValuenumber
RectProps.shrinksize
size?: SignalValuePossibleVector2Length
RectProps.sizeskew
Inherited from RectProps.skewskewX
skewX?: SignalValuenumber
RectProps.skewXskewY
skewY?: SignalValuenumber
RectProps.skewYsmoothCorners
smoothCorners?: SignalValueboolean
Enables corner smoothing.
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 fromRectProps.smoothCornerssmoothing
smoothing?: SignalValueboolean
Whether the video should be smoothed.
When disabled, the video will be scaled using the nearest neighbor interpolation with no smoothing. The resulting video will appear pixelated.
spawner
spawner?: SignalValueComponentChildren
Deprecated
Use children instead.
RectProps.spawnersrc
src?: SignalValuestring
The source of this video.
start
start?: SignalValuenumber
A percentage from the start before which the curve should be clipped.
The portion of the curve that comes before 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).
RectProps.startstartArrow
startArrow?: SignalValueboolean
Whether to display an arrow at the start of the visible curve.
Use arrowSize to control the size of the arrow.
RectProps.startArrowstartOffset
startOffset?: SignalValuenumber
The offset in pixels from the start of the curve.
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.
RectProps.startOffsetstroke
stroke?: SignalValuePossibleCanvasStyle
RectProps.strokestrokeFirst
strokeFirst?: SignalValueboolean
RectProps.strokeFirsttagName
tagName?: keyof HTMLElementTagNameMap
RectProps.tagNametextAlign
textAlign?: SignalValueCanvasTextAlign
RectProps.textAligntextDirection
textDirection?: SignalValueCanvasDirection
RectProps.textDirectiontextWrap
textWrap?: SignalValueTextWrap
RectProps.textWraptime
time?: SignalValuenumber
The starting time for this video in seconds.
top
The position of the top edge of this node.
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.
RectProps.toptopLeft
The position of the top left corner of this node.
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.
RectProps.topLefttopRight
The position of the top right corner of this node.
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.
RectProps.topRightwidth
width?: SignalValueLength
RectProps.widthwrap
wrap?: SignalValueFlexWrap
RectProps.wrapx
x?: SignalValuenumber
RectProps.xy
y?: SignalValuenumber
RectProps.yzIndex
zIndex?: SignalValuenumber
RectProps.zIndex