[Feature Request] LottiePlayer component

[vianmora]

Hey 👋

Issue #2645 mentions Lottie/Rive compatibility in the context of the scroll animation engine. This is a separate, complementary proposal: a standalone LottiePlayer component in sdk-components-react, similar to the existing YouTube and Vimeo components.

Lottie animations (JSON or .lottie files) are a common design asset, lightweight vector animations exported from After Effects, widely used for loaders, hero illustrations, and micro-interactions. Right now, integrating them into Webstudio requires a custom HTML Embed with manually written script injection.

I wrote an article documenting that workaround:
How to add lottie files / json animation in webstudio
It works, but it's too technical for most users.

Proposed component

A LottiePlayer component with the following props:

Prop	Type	Default	Description
src	string	required	URL to a .json or .lottie file
autoplay	boolean	true	Start playing on load
loop	boolean	true	Loop the animation
speed	number	1	Playback speed multiplier
direction	1 | -1	1	Play forward or in reverse

Implementation sketch

• Package: packages/sdk-components-react
• Runtime dependency: lottie-web npm package (no external CDN)
• Builder canvas: renders a placeholder, no animation running, consistent with how YouTube/Vimeo behave on canvas
• Published site: client-only rendering via useEffect, SSR-safe placeholder

Relation to #2645

This component could later serve as the integration point for the scroll-driven Lottie compatibility mentioned in #2645 (getComputedTiming().progress -> lottie goToAndStop(frame)), but it's independently useful without that.

Curious to know if this fits the roadmap, and if there are preferences on the library side (lottie-web vs @lottiefiles/dotlottie-web).