Background

<BptBackground @ref="bgEffect"
               Style="BptBackgroundStyle.Aurora"
               Animated="true"
               Speed="1"
               Scale="1"
               Intensity="0.7"
               Seed="42"
               BackgroundColor="rgba(15, 15, 35, 1.0)"
               Colors="colors"
               Target="#bg-preview-target">
    <!-- Your content here -->
</BptBackground>

<!-- Optional dev-mode JSON save / load workflow -->
<button @onclick="GenerateRandom">Generate Random</button>
<button @onclick="CopyConfig">Copy Config</button>
<button @onclick="LoadConfig">Load Config</button>
<textarea @bind="configJson" rows="4" placeholder="Paste a saved config JSON and click Load Config"></textarea>

@code {
    private BptBackground? bgEffect;
    private string? configJson;

    private List<string> colors = [
        "rgba(100, 150, 255, 0.6)",
        "rgba(200, 80, 180, 0.5)",
        "rgba(80, 220, 200, 0.5)",
    ];

    // Ask the component to generate a fresh random configuration.
    private async Task GenerateRandom()
    {
        if (bgEffect is null) return;
        configJson = await bgEffect.GenerateRandomAsync();
    }

    // Read the live configuration as JSON (useful for persisting it).
    private async Task CopyConfig()
    {
        if (bgEffect is null) return;
        configJson = await bgEffect.GetConfigAsync();
    }

    // Apply a previously saved configuration JSON to the component.
    private async Task LoadConfig()
    {
        if (bgEffect is null || string.IsNullOrWhiteSpace(configJson)) return;
        await bgEffect.SetConfigAsync(configJson);
    }
}