[Feature Request] MudLottiePlayer

[xdarkfirestorm]

MudBlazor/MudBlazor#11693

Describe your idea
We use MudBlazor exclusively as our UI framework for all our new projects, and we're now heavily incorporating Lottie animations to enhance the user experience with modern, dynamic visuals (e.g. animated feedback, process indicators, mascot animations).

Currently, to use Lottie in our MudBlazor apps, we either have to:

Build our own wrapper using raw Web Components and JS interop
Or use third-party UI frameworks like Blazorise (which breaks our consistency) and/or cost a lot of money because there is no single component license available.
I’d love to see a dedicated MudLottiePlayer component in the MudBlazor ecosystem (maybe as part of MudBlazor.Extensions), which wraps the Lottie Web Player or DotLottie Web Component and provides a seamless Blazor-first API.

Key features the component should support:
Start(), Pause(), Restart() or similar playback control
Parameters like:
Autoplay
Loop
ShowControls
Speed
Direction
Mode (e.g. "bounce", "normal", etc.)
Event callbacks like OnComplete, OnLoop, OnFrame
This would allow us to integrate Lottie animations just like any other MudBlazor component, without breaking the design or having to fall back to JS manually.

Alternatives and examples
Blazorise already offers a Lottie component:
🔗 https://blazorise.com/docs/extensions/lottie-animation

There’s also the official Web Component from LottieFiles (which I currently use as a workaround):
🔗 https://developers.lottiefiles.com/docs/dotlottie-player/dotlottie-wc/

But it would be much more convenient and consistent to have this as a native MudBlazor-style component – with full support for parameters and events in Razor syntax.

Happy to discuss, contribute or prototype something if needed!

[mckaragoz]

Sorry don't know what is lottie player. Did you check MudAnimate? Could the explain the difference key points?

[xdarkfirestorm]

Sorry don't know what is lottie player. Did you check MudAnimate? Could the explain the difference key points?

Hi, thanks for the reply!

Yes, I’m familiar with MudAnimate, and I’ve used it before. However, what I’m suggesting is something very different: a MudLottiePlayer would not be about animating components (like MudAnimate), but about rendering and controlling Lottie animations (e.g. .json files exported from Adobe After Effects via Bodymovin).

Here’s a quick breakdown of the differences:

Feature	MudAnimate	LottiePlayer
Purpose	Animate visibility/appearance of MudBlazor components (e.g., fade in/out, slide, scale)	Play complex vector animations exported as .json (Lottie files)
Animation type	CSS-based entrance/exit effects	Frame-based vector animations via Lottie/Web animations
Custom visuals	No (works with existing DOM elements)	Yes (the animation is the content)
Control	Start/end based on visibility	Full control: play, pause, seek, loop, speed, direction
Use case	Making UI transitions smooth	Displaying designer-created animations (e.g., mascots, loading indicators, explainer graphics)
File input	None	.json Lottie files

Real world example:

Let’s say I have a page where a user initiates a print job (e.g., printing a shipping label or a visitor badge). While the printing process is ongoing, I want to show a beautiful animation of a printer printing paper — not just a loading spinner. This is a perfect use case for Lottie: the user sees a fluid, designer-made animation that makes the process feel alive and responsive.

You can find examples of these kinds of animations here: https://lottiefiles.com/

You can find more general information here:
https://en.m.wikipedia.org/wiki/Lottie_(file_format)
https://github.com/LottieFiles/lottie-player

Let me know if this makes sense or if I should link to a working demo!