Properties

Property name	Type	Default	Description
`autoplay`	boolean	false	Auto-starts the animation on load.
`loop`	boolean	false	Determines if the animation should loop.
`src`	string	undefined	URL to the animation data (`.json` or `.lottie`).
`speed`	number	1	Animation playback speed. 1 is regular speed.
`data`	string \| ArrayBuffer	undefined	Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.
`mode`	string	”forward”	Animation play mode. Accepts “forward”, “reverse”, “bounce”, “reverse-bounce”.
`backgroundColor`	string	undefined	Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., “#000000”, “#000000FF”).
`segment`	[number, number]	undefined	Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.
`renderConfig`	RenderConfig	undefined	Configuration for rendering the animation.
`dotLottieRefCallback`	(dotLottie: DotLottie) => void	undefined	Callback function that receives a reference to the dotLottie web player instance once instantiated.
`useFrameInterpolation`	boolean	true	Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true.
`autoResizeCanvas`	boolean	true	Determines if the canvas should resize automatically to its container
`animationId`	string	undefined	The ID of the animation to play.
`themeId`	string	undefined	The ID of the theme to apply.
`themeData`	string	undefined	Theme data to apply as a string.
`layout`	Layout	undefined	Layout configuration for fitting the animation.
`stateMachineId`	string	undefined	The ID of the state machine to load.
`stateMachineConfig`	StateMachineConfig	undefined	Configuration for state machine behavior.
`loopCount`	number	0	Number of loops to play (0 for infinite).
`playOnHover`	boolean	false	When enabled it plays animation only on hover.

RenderConfig

The renderConfig object accepts the following properties:

Property name	Type	Default	Description
`devicePixelRatio`	number	window.devicePixelRatio \| 1	The device pixel ratio.

Layout

The layout object accepts the following properties:

Property name	Type	Default	Description
`fit`	’contain’ \| ‘cover’ \| ‘fill’ \| ‘none’ \| ‘fit-width’ \| ‘fit-height'	'contain’	How to fit the animation in the canvas
`align`	[number, number]	[0.5, 0.5]	Alignment within canvas [x, y] from 0 to 1

StateMachineConfig

The stateMachineConfig object accepts the following properties:

Property name	Type	Description
`openUrlPolicy`	object	URL opening policy configuration
`openUrlPolicy.requireUserInteraction`	boolean	Require user interaction before opening URLs
`openUrlPolicy.whitelist`	string[]	Allowed URL patterns