Function: Shape()

Call Signature

Shape(path: PathFunction, options?: object): ShapeElement

Universal shape container supporting multiple geometries and surface treatments.

Parameters

Parameter	Type	Description
path	PathFunction	-
options?	{ align?: Align; background?: string; blur?: number; borderColor?: string; brightness?: number; children?: ElementChild; className?: string; color?: string; customPositioned?: boolean; doubleBorder?: boolean; end?: number; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; flow?: FlowEffect; height?: Size; highlighted?: boolean; id?: string; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; position?: Position; rotation?: number; scale?: number; size?: Size; start?: number; strokeWidth?: number; style?: Properties<0 | string & object, string & object>; text?: string; theme?: Partial<ThemeConfig>; variant?: ShapeVariant; width?: Size; x?: PositionCoord; y?: PositionCoord; }	-
options.align?	Align	-
options.background?	string	Background fill color.
options.blur?	number	Blur in virtual pixels (default: 0).
options.borderColor?	string	Border stroke color.
options.brightness?	number	Brightness multiplier (default: 1).
options.children?	ElementChild	Optional child elements or text nodes.
options.className?	string	-
options.color?	string	Foreground CSS color (default: component/theme color).
options.customPositioned?	boolean	Whether this element manages its own CSS transform / positioning (disables stage translate3d).
options.doubleBorder?	boolean	Double border outline (e.g. for final states, nested rings).
options.end?	number	Trim-path end offset from 0.0 to 1.0 (default: 1).
options.enterDelay?	number	Delay in seconds before entering scene transition begins.
options.enterDuration?	number	Duration in seconds for entering scene transition.
options.exitDelay?	number	Delay in seconds before exiting scene transition begins.
options.exitDuration?	number	Duration in seconds for exiting scene transition.
options.flow?	FlowEffect	Continuous ambient stroke animation ("none"
options.height?	Size	Height in stage units or CSS length (default: content size).
options.highlighted?	boolean	Glowing outline highlight (default: false).
options.id?	string	-
options.onActivate?	() => void	-
options.onDeactivate?	() => void	-
options.onMount?	() => void	-
options.onUnmount?	() => void	-
options.opacity?	number	Whole-element opacity from 0 to 1 (default: 1).
options.origin?	ElementAnchor	Which point of the element sits on its coordinate (default: "top-left").
options.position?	Position	-
options.rotation?	number	Rotation in degrees (default: 0).
options.scale?	number	Scale multiplier (default: 1).
options.size?	Size	Both dimensions in stage units or CSS length (default: unset).
options.start?	number	Trim-path start offset from 0.0 to 1.0 (default: 0).
options.strokeWidth?	number	Stroke outline width in virtual canvas pixels (default: 2).
options.style?	Properties<0 | string & object, string & object>	-
options.text?	string	Optional text content inside the shape container.
options.theme?	Partial<ThemeConfig>	-
options.variant?	ShapeVariant	Surface material preset: "surface" (background fill, default), "ghost" (outline), or "solid" (opaque fill).
options.width?	Size	Width in stage units or CSS length (default: content size).
options.x?	PositionCoord	Horizontal position in stage units (default: 0).
options.y?	PositionCoord	Vertical position in stage units (default: 0).

Returns

ShapeElement

Call Signature

Shape(path: PathFunction, children: ElementChild, options?: object): ShapeElement

Universal shape container supporting multiple geometries and surface treatments.

Parameters

Parameter	Type	Description
path	PathFunction	-
children	ElementChild	-
options?	{ align?: Align; background?: string; blur?: number; borderColor?: string; brightness?: number; children?: ElementChild; className?: string; color?: string; customPositioned?: boolean; doubleBorder?: boolean; end?: number; enterDelay?: number; enterDuration?: number; exitDelay?: number; exitDuration?: number; flow?: FlowEffect; height?: Size; highlighted?: boolean; id?: string; onActivate?: () => void; onDeactivate?: () => void; onMount?: () => void; onUnmount?: () => void; opacity?: number; origin?: ElementAnchor; position?: Position; rotation?: number; scale?: number; size?: Size; start?: number; strokeWidth?: number; style?: Properties<0 | string & object, string & object>; text?: string; theme?: Partial<ThemeConfig>; variant?: ShapeVariant; width?: Size; x?: PositionCoord; y?: PositionCoord; }	-
options.align?	Align	-
options.background?	string	Background fill color.
options.blur?	number	Blur in virtual pixels (default: 0).
options.borderColor?	string	Border stroke color.
options.brightness?	number	Brightness multiplier (default: 1).
options.children?	ElementChild	Optional child elements or text nodes.
options.className?	string	-
options.color?	string	Foreground CSS color (default: component/theme color).
options.customPositioned?	boolean	Whether this element manages its own CSS transform / positioning (disables stage translate3d).
options.doubleBorder?	boolean	Double border outline (e.g. for final states, nested rings).
options.end?	number	Trim-path end offset from 0.0 to 1.0 (default: 1).
options.enterDelay?	number	Delay in seconds before entering scene transition begins.
options.enterDuration?	number	Duration in seconds for entering scene transition.
options.exitDelay?	number	Delay in seconds before exiting scene transition begins.
options.exitDuration?	number	Duration in seconds for exiting scene transition.
options.flow?	FlowEffect	Continuous ambient stroke animation ("none"
options.height?	Size	Height in stage units or CSS length (default: content size).
options.highlighted?	boolean	Glowing outline highlight (default: false).
options.id?	string	-
options.onActivate?	() => void	-
options.onDeactivate?	() => void	-
options.onMount?	() => void	-
options.onUnmount?	() => void	-
options.opacity?	number	Whole-element opacity from 0 to 1 (default: 1).
options.origin?	ElementAnchor	Which point of the element sits on its coordinate (default: "top-left").
options.position?	Position	-
options.rotation?	number	Rotation in degrees (default: 0).
options.scale?	number	Scale multiplier (default: 1).
options.size?	Size	Both dimensions in stage units or CSS length (default: unset).
options.start?	number	Trim-path start offset from 0.0 to 1.0 (default: 0).
options.strokeWidth?	number	Stroke outline width in virtual canvas pixels (default: 2).
options.style?	Properties<0 | string & object, string & object>	-
options.text?	string	Optional text content inside the shape container.
options.theme?	Partial<ThemeConfig>	-
options.variant?	ShapeVariant	Surface material preset: "surface" (background fill, default), "ghost" (outline), or "solid" (opaque fill).
options.width?	Size	Width in stage units or CSS length (default: content size).
options.x?	PositionCoord	Horizontal position in stage units (default: 0).
options.y?	PositionCoord	Vertical position in stage units (default: 0).

Returns

ShapeElement