### Install Blazor Lottie Player

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Use the .NET CLI to add the package to your project.

```bash
dotnet add package Blazor.Lottie.Player
```

--------------------------------

### Control Animation Playback

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Programmatic control methods for starting, pausing, and stopping animations.

```razor
@using Blazor.Lottie.Player

<div style="width: 200px;">
    <LottiePlayer @ref="_player"
                  Src="./lottie/animation.json"
                  AutoPlay="false" />
</div>

<button @onclick="PlayAnimation">Play</button>

@code {
    private LottiePlayer? _player;

    private async Task PlayAnimation()
    {
        if (_player != null)
        {
            await _player.PlayAnimationAsync();
            // Animation starts playing
            // IsAnimationPaused = false, IsAnimationStopped = false
        }
    }
}
```

```razor
@using Blazor.Lottie.Player

<div style="width: 200px;">
    <LottiePlayer @ref="_player"
                  Src="./lottie/animation.json"
                  AutoPlay="true" />
</div>

<button @onclick="PauseAnimation">Pause</button>
<button @onclick="ResumeAnimation">Resume</button>

@code {
    private LottiePlayer? _player;

    private async Task PauseAnimation()
    {
        if (_player != null)
        {
            await _player.PauseAnimationAsync();
            // Animation pauses at current frame
            // _player.IsAnimationPaused = true
        }
    }

    private async Task ResumeAnimation()
    {
        if (_player != null)
        {
            await _player.PlayAnimationAsync();
            // Animation resumes from paused position
        }
    }
}
```

```razor
@using Blazor.Lottie.Player

<div style="width: 200px;">
    <LottiePlayer @ref="_player"
                  Src="./lottie/animation.json"
                  AutoPlay="true"
                  Loop="true" />
</div>

<button @onclick="StopAnimation">Stop</button>

@code {
    private LottiePlayer? _player;

    private async Task StopAnimation()
    {
        if (_player != null)
        {
            await _player.StopAnimationAsync();
            // Animation stops and resets to frame 0
            // _player.IsAnimationStopped = true
        }
    }
}
```

--------------------------------

### Initialize and Control LottiePlayer Programmatically

Source: https://github.com/mudxtra/lottieplayer/blob/main/README.md

Instantiate the LottiePlayerModule and utilize its methods for playback control and event subscription.

```csharp
var player = new LottiePlayerModule(IJSRuntime, ElementReference);
await player.InitializeAsync(LottiePlaybackOptions);
// Optional Commands
await player.PlayAsync();
await player.PauseAsync();
await player.StopAsync();
await player.GoToAndPlay(double frame, true);
await player.GoToAndStop(double frame, true);
await player.SetSpeedAsync(double speed, true);
await player.SetDirectionAsync(LottieDirection.Forward);
// Subscribe to Events
player.OnAnimationLoaded += (args) => { /* Handle Animation Loaded */ };
player.OnDOMLoaded += (args) => { /* Handle DOM Loaded */ };
player.OnAnimationComplete += () => { /* Handle Animation Complete */ };
player.OnEnterFrame += (args) => { /* Handle Enter Frame */ };
player.OnComplete += () => { /* Handle Complete */ };
player.OnLoopComplete += () => { /* Handle Loop Complete */ };
```

--------------------------------

### Initialize LottiePlayerModule Programmatically

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Use LottiePlayerModule for full control over animation playback and event handling. Requires manual inclusion of the lottie-web JavaScript library.

```razor
@using Blazor.Lottie.Player
@inject IJSRuntime JSRuntime

<!-- Add lottie-web script to your index.html or _Host.cshtml -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"></script> -->

<div @ref="_elementRef" style="width: 300px; height: 300px;"></div>

<button @onclick="InitializeAndPlay">Load Animation</button>
<button @onclick="GoToFrame50">Jump to Frame 50</button>

@code {
    private ElementReference _elementRef;
    private LottiePlayerModule? _module;

    private async Task InitializeAndPlay()
    {
        _module = new LottiePlayerModule(JSRuntime, _elementRef);

        var options = new LottiePlaybackOptions
        {
            Path = "./lottie/animation.json",  // Required: path to JSON file
            AutoPlay = true,                    // Start playing immediately
            Renderer = "svg",                   // "svg", "canvas", or "html"
            Loop = true,                        // true, false, or number of loops
            Direction = 1,                      // 1 = forward, -1 = reverse
            Speed = 1.0,                        // Playback speed multiplier
            SetSubFrame = true,                 // Smooth frame interpolation
            Quality = "high",                   // "low", "medium", "high"
            EnterFrameEvent = true              // Enable frame change events
        };

        // Subscribe to events before initialization
        _module.OnAnimationReady += (sender, args) =>
            Console.WriteLine($"Ready: {args.TotalFrames} frames");
        _module.OnDOMLoaded += (sender, args) =>
            Console.WriteLine("DOM loaded");
        _module.OnComplete += (sender, completed) =>
            Console.WriteLine("Animation complete");
        _module.OnLoopComplete += (sender, completed) =>
            Console.WriteLine("Loop complete");
        _module.OnEnterFrame += (sender, args) =>
            Console.WriteLine($"Frame: {args.CurrentTime}");

        bool success = await _module.InitializeAsync(options);
        Console.WriteLine($"Initialization: {(success ? "Success" : "Failed")}");
    }

    private async Task GoToFrame50()
    {
        if (_module != null)
        {
            // GoToAndPlay: jumps to frame and continues playing
            await _module.GoToAndPlay(50, true);

            // GoToAndStop: jumps to frame and pauses
            // await _module.GoToAndStop(50, true);
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_module != null)
        {
            await _module.DisposeAsync();
        }
    }
}
```

--------------------------------

### Initialize Animation with bodymovin

Source: https://github.com/mudxtra/lottieplayer/blob/main/src/Blazor.Lottie.Player/Player-API-Documentation.txt

Load an animation by providing a container element, path to the JSON file, and renderer type.

```javascript
var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})
```

--------------------------------

### Include Lottie Web Library

Source: https://github.com/mudxtra/lottieplayer/blob/main/README.md

Add the Lottie Web library via CDN when using the programmatic module approach.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"></script>
```

--------------------------------

### Loading an Animation

Source: https://github.com/mudxtra/lottieplayer/blob/main/src/Blazor.Lottie.Player/Player-API-Documentation.txt

This snippet demonstrates how to load a Lottie animation using the `bodymovin.loadAnimation` function. It includes essential parameters like container, path, renderer, and optional parameters for loop and autoplay.

```APIDOC
## POST /api/users

### Description
This endpoint allows for the creation of a new user in the system.

### Method
POST

### Endpoint
/api/users

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **username** (string) - Required - The desired username for the new account.
- **email** (string) - Required - The email address for the user.
- **password** (string) - Required - The user's password.

### Request Example
```json
{
  "username": "johndoe",
  "email": "john.doe@example.com",
  "password": "securepassword123"
}
```

### Response
#### Success Response (201)
- **id** (string) - The unique identifier for the newly created user.
- **username** (string) - The username of the created user.
- **email** (string) - The email address of the created user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Global Lottie Methods

Source: https://github.com/mudxtra/lottieplayer/blob/main/src/Blazor.Lottie.Player/Player-API-Documentation.txt

Provides an overview of the global `lottie` object methods, which can be used to control all animations or perform global actions like searching for animations or destroying all instances.

```APIDOC
## DELETE /api/users/{id}

### Description
Deletes a specific user from the system based on their unique identifier.

### Method
DELETE

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to delete.

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (204)
No content is returned upon successful deletion.

#### Response Example
None
```

--------------------------------

### Configure animation options with LottieAnimationOptions

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Defines rendering quality, interpolation settings, and library source paths.

```razor
@using Blazor.Lottie.Player

<div style="width: 300px;">
    <LottiePlayer Src="./lottie/complex-animation.json"
                  AutoPlay="true"
                  Loop="true"
                  AnimationOptions="@_options" />
</div>

@code {
    private LottieAnimationOptions _options = new()
    {
        // Custom CDN or local path for lottie-web library
        LottieSourceJs = "https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js",

        // Rendering quality: Low, Medium, High
        // Low = fastest performance, High = best visual fidelity
        AnimationQuality = LottieAnimationQuality.High,

        // Smooth frame interpolation for high refresh rate displays
        // true = smooth motion, false = original After Effects keyframes only
        SmoothFrameInterpolation = true
    };
}
```

--------------------------------

### Controlling Animation Instances

Source: https://github.com/mudxtra/lottieplayer/blob/main/src/Blazor.Lottie.Player/Player-API-Documentation.txt

This section details the methods available on an animation instance returned by `loadAnimation`. These methods allow for fine-grained control over the animation's playback, speed, direction, and more.

```APIDOC
## GET /api/users/{id}

### Description
Retrieves the details of a specific user based on their unique identifier.

### Method
GET

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to retrieve.

#### Query Parameters
None

#### Request Body
None

### Request Example
None

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the user.
- **username** (string) - The username of the user.
- **email** (string) - The email address of the user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### LottieAnimationOptions Configuration

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Advanced configuration options for customizing the Lottie animation rendering quality, frame interpolation, and JavaScript library source.

```APIDOC
## LottieAnimationOptions Configuration

### Description
Advanced configuration options for customizing the Lottie animation rendering quality, frame interpolation, and JavaScript library source.

### Properties
- **LottieSourceJs** (string) - Optional - Custom CDN or local path for lottie-web library.
- **AnimationQuality** (LottieAnimationQuality) - Optional - Rendering quality: Low, Medium, High. Low = fastest performance, High = best visual fidelity.
- **SmoothFrameInterpolation** (bool) - Optional - Smooth frame interpolation for high refresh rate displays. true = smooth motion, false = original After Effects keyframes only.
```

--------------------------------

### Render Lottie Animations with LottiePlayer

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

The LottiePlayer component supports declarative configuration for playback, looping, and event handling.

```razor
@using Blazor.Lottie.Player

<div style="width: 300px; height: 300px;">
    <LottiePlayer @ref="_lottiePlayer"
                  Src="https://lottie.host/99ab6923-62d6-4030-aeb0-282d33242f3e/Z1CzIUWU18.json"
                  AutoPlay="true"
                  Loop="true"
                  AnimationSpeed="1.0"
                  AnimationType="LottieAnimationType.Svg"
                  AnimationDirection="LottieAnimationDirection.Forward"
                  AnimationReady="@OnAnimationReady"
                  AnimationCompleted="@OnAnimationCompleted"
                  AnimationLoopCompleted="@OnLoopCompleted" />
</div>

@code {
    private LottiePlayer? _lottiePlayer;

    private void OnAnimationReady(LottiePlayerLoadedEventArgs args)
    {
        Console.WriteLine($"Animation loaded: {args.TotalFrames} frames");
    }

    private void OnAnimationCompleted()
    {
        Console.WriteLine("Animation completed");
    }

    private void OnLoopCompleted()
    {
        Console.WriteLine("Loop completed");
    }
}
```

--------------------------------

### Apply Custom Styling and Attributes to LottiePlayer

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Use standard HTML attributes and CSS parameters to customize the player container. Custom attributes are handled via CaptureUnmatchedValues.

```razor
@using Blazor.Lottie.Player

<LottiePlayer Src="./lottie/animation.json"
              Class="my-custom-class animated-border"
              Style="border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
              aria-label="Loading animation"
              data-testid="main-loader"
              role="img" />

@code {
    // The component automatically adds:
    // - class="blazor-lottie-player" (always present)
    // - aria-label="Lottie Animation" (default, can be overridden)
    // - role="animation" (default, can be overridden)

    // Custom attributes are captured via [Parameter(CaptureUnmatchedValues = true)]
}
```

--------------------------------

### Lottie Events

Source: https://github.com/mudxtra/lottieplayer/blob/main/src/Blazor.Lottie.Player/Player-API-Documentation.txt

Details the events that can be listened to for Lottie animations, such as `onComplete`, `onLoopComplete`, and `onEnterFrame`, allowing for custom logic based on animation progress.

```APIDOC
## PUT /api/users/{id}

### Description
Updates the details of an existing user.

### Method
PUT

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to update.

#### Query Parameters
None

#### Request Body
- **username** (string) - Optional - The new username for the user.
- **email** (string) - Optional - The new email address for the user.

### Request Example
```json
{
  "email": "john.doe.updated@example.com"
}
```

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the user.
- **username** (string) - The updated username of the user.
- **email** (string) - The updated email address of the user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe.updated@example.com"
}
```
```

--------------------------------

### Configure LottiePlayer Loop Counts

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Control animation repetition by setting Loop and LoopCount properties on the LottiePlayer component.

```razor
@using Blazor.Lottie.Player

<!-- Infinite loop -->
<LottiePlayer Src="./lottie/animation.json"
              Loop="true"
              LoopCount="0" />

<!-- Loop exactly 3 times then stop -->
<LottiePlayer Src="./lottie/animation.json"
              Loop="true"
              LoopCount="3"
              AnimationCompleted="@OnComplete" />

<!-- No loop - play once -->
<LottiePlayer Src="./lottie/animation.json"
              Loop="false" />

@code {
    private void OnComplete()
    {
        Console.WriteLine("Animation finished after 3 loops");
    }
}
```

--------------------------------

### Set playback speed with SetSpeedAsync

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Updates the animation playback speed dynamically. Values represent multipliers where 1.0 is normal speed.

```razor
@using Blazor.Lottie.Player

<div style="width: 200px;">
    <LottiePlayer @ref="_player"
                  Src="./lottie/animation.json"
                  AutoPlay="true"
                  Loop="true"
                  AnimationSpeed="1.0" />
</div>

<input type="range" min="0.1" max="3" step="0.1" @bind="_speed" @bind:after="UpdateSpeed" />
<span>Speed: @_speed.ToString("0.0")x</span>

@code {
    private LottiePlayer? _player;
    private double _speed = 1.0;

    private async Task UpdateSpeed()
    {
        if (_player != null)
        {
            await _player.SetSpeedAsync(_speed);
            // Animation speed changes immediately
            // 0.5 = half speed, 1.0 = normal, 2.0 = double speed
        }
    }
}
```

--------------------------------

### Include Lottie Player via Script Tag

Source: https://github.com/mudxtra/lottieplayer/blob/main/src/Blazor.Lottie.Player/Player-API-Documentation.txt

Add the Lottie player to your HTML page using a script tag from a local file or a CDN.

```html
<script src="js/bodymovin.js" type="text/javascript"></script>
<!-- OR -->
<script src="https://cdnjs.com/libraries/bodymovin" type="text/javascript"></script>
```

--------------------------------

### Specify renderer type with LottieAnimationType

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Selects the underlying rendering engine. SVG is the default, while Canvas is recommended for complex animations.

```razor
@using Blazor.Lottie.Player

<!-- SVG Renderer - Best feature support and general purpose (default) -->
<LottiePlayer Src="./lottie/animation.json"
              AnimationType="LottieAnimationType.Svg" />

<!-- Canvas Renderer - Better performance for full screen or large animations -->
<LottiePlayer Src="./lottie/animation.json"
              AnimationType="LottieAnimationType.Canvas" />

<!-- HTML Renderer - Uses CSS transforms, limited support for complex animations -->
<LottiePlayer Src="./lottie/animation.json"
              AnimationType="LottieAnimationType.Html" />

@code {
    // LottieAnimationType.Svg = "svg" - Creates clean SVG elements
    // LottieAnimationType.Canvas = "canvas" - Uses 2D canvas context
    // LottieAnimationType.Html = "html" - Creates HTML elements with CSS transforms
}
```

--------------------------------

### Load Animation with lottie.loadAnimation

Source: https://github.com/mudxtra/lottieplayer/blob/main/src/Blazor.Lottie.Player/Player-API-Documentation.txt

Use the lottie object to load an animation into a specific DOM element.

```javascript
lottie.loadAnimation({
  container: element, // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});
```

--------------------------------

### SetSpeedAsync Method

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Dynamically changes the playback speed of the animation at runtime. Speed of 1.0 is normal, 2.0 is double speed, 0.5 is half speed.

```APIDOC
## SetSpeedAsync Method

### Description
Dynamically changes the playback speed of the animation at runtime. Speed of 1.0 is normal, 2.0 is double speed, 0.5 is half speed.

### Method
`SetSpeedAsync(double speed)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```csharp
await _player.SetSpeedAsync(2.0);
```

### Response
None

#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### Set playback direction with SetDirectionAsync

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Toggles animation playback between forward and reverse directions.

```razor
@using Blazor.Lottie.Player

<div style="width: 200px;">
    <LottiePlayer @ref="_player"
                  Src="./lottie/animation.json"
                  AutoPlay="true"
                  Loop="true"
                  AnimationDirection="LottieAnimationDirection.Forward" />
</div>

<button @onclick="@(() => ChangeDirection(LottieAnimationDirection.Forward))">Forward</button>
<button @onclick="@(() => ChangeDirection(LottieAnimationDirection.Reverse))">Reverse</button>

@code {
    private LottiePlayer? _player;

    private async Task ChangeDirection(LottieAnimationDirection direction)
    {
        if (_player != null)
        {
            await _player.SetDirectionAsync(direction);
            // LottieAnimationDirection.Forward = 1 (normal playback)
            // LottieAnimationDirection.Reverse = -1 (reverse playback)
        }
    }
}
```

--------------------------------

### Access LottiePlayer Animation State

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Retrieve real-time animation status and frame information using component properties and event arguments.

```razor
@using Blazor.Lottie.Player

<div style="width: 200px;">
    <LottiePlayer @ref="_player"
                  Src="./lottie/animation.json"
                  AutoPlay="true"
                  Loop="true"
                  AnimationReady="@OnReady" />
</div>

<p>Loaded: @_player?.IsAnimationLoaded</p>
<p>Paused: @_player?.IsAnimationPaused</p>
<p>Stopped: @_player?.IsAnimationStopped</p>
<p>Total Frames: @_player?.TotalAnimationFrames</p>
<p>Current Frame: @_player?.CurrentAnimationFrame</p>

@code {
    private LottiePlayer? _player;

    private void OnReady(LottiePlayerLoadedEventArgs args)
    {
        // args.ElementId - The ID of the Lottie player element
        // args.CurrentFrame - Current frame (zero-based index)
        // args.TotalFrames - Total number of frames in animation
        Console.WriteLine($"Element: {args.ElementId}, Frames: {args.TotalFrames}");
        StateHasChanged();
    }
}
```

--------------------------------

### Handle frame changes with CurrentFrameChanged

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Listens for frame updates. Use CurrentFrameChangeFunc to throttle event frequency for better performance.

```razor
@using Blazor.Lottie.Player

<div style="width: 200px;">
    <LottiePlayer @ref="_player"
                  Src="./lottie/animation.json"
                  AutoPlay="true"
                  Loop="true"
                  CurrentFrameChangeFunc="@(frame => frame % 10 == 0)"
                  CurrentFrameChanged="@OnFrameChanged" />
</div>

<p>Frame: @_currentFrame of @_totalFrames</p>

@code {
    private LottiePlayer? _player;
    private double _currentFrame = 0;
    private double _totalFrames = 0;

    private void OnFrameChanged(LottiePlayerEventFrameArgs args)
    {
        _currentFrame = args.CurrentTime;
        _totalFrames = args.TotalTime;
        // args.Type = "enterFrame"
        // args.Direction = LottieAnimationDirection.Forward or Reverse
        StateHasChanged();
    }
}
```

--------------------------------

### CurrentFrameChanged Event

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Callback fired when the animation frame changes. Use CurrentFrameChangeFunc to filter events for performance optimization.

```APIDOC
## CurrentFrameChanged Event

### Description
Callback fired when the animation frame changes. Use CurrentFrameChangeFunc to filter events for performance optimization.

### Method
`CurrentFrameChanged(LottiePlayerEventFrameArgs args)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```csharp
OnFrameChanged(LottiePlayerEventFrameArgs args)
```

### Response
None

#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### SetDirectionAsync Method

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Changes the playback direction of the animation to forward or reverse.

```APIDOC
## SetDirectionAsync Method

### Description
Changes the playback direction of the animation to forward or reverse.

### Method
`SetDirectionAsync(LottieAnimationDirection direction)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```csharp
await _player.SetDirectionAsync(LottieAnimationDirection.Reverse);
```

### Response
None

#### Success Response (200)
None

#### Response Example
None
```

--------------------------------

### LottieAnimationType Enum

Source: https://context7.com/mudxtra/lottieplayer/llms.txt

Specifies the renderer type used for the Lottie animation. SVG offers the best feature support, Canvas provides better performance for complex animations, and HTML uses CSS transforms.

```APIDOC
## LottieAnimationType Enum

### Description
Specifies the renderer type used for the Lottie animation. SVG offers the best feature support, Canvas provides better performance for complex animations, and HTML uses CSS transforms.

### Values
- **Svg**: "svg" - Creates clean SVG elements (default).
- **Canvas**: "canvas" - Uses 2D canvas context.
- **Html**: "html" - Creates HTML elements with CSS transforms.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.