HeroWave 2.1.2

HeroWave

A reusable Blazor component for animated wavy background effects powered by HTML5 Canvas and simplex noise. Works as a hero section, full-page background, or any container background.

View Live Demo | Hero Section | Full Page | Color Showcase

Installation

dotnet add package HeroWave

Add the namespace to your _Imports.razor:

@using HeroWave.Components

Quick Start

<WavyBackground Title="Hello World"
                Subtitle="Animated waves behind your content"
                Height="60vh">
    <button>Get Started</button>
</WavyBackground>

Parameters

Examples

Hero Section

<WavyBackground Title="Build Amazing Apps"
                Subtitle="A reusable wavy background component for Blazor"
                Height="60vh">
    <a href="/signup" class="btn">Get Started</a>
</WavyBackground>

Full Page Background

<WavyBackground Height="100vh"
                Speed="0.008"
                Colors="@(new[] { "#22d3ee", "#818cf8", "#e879f9" })"
                WaveCount="7"
                Opacity="0.6">
    <div class="my-layout">
        <nav>...</nav>
        <main>...</main>
    </div>
</WavyBackground>

Color Presets

Ocean Aurora - cool blues and greens

<WavyBackground Colors="@(new[] { "#0ea5e9", "#06b6d4", "#14b8a6", "#10b981", "#34d399" })"
                BackgroundColor="#021a2b" WaveCount="6" WaveWidth="60" Opacity="0.6" />

Sunset Fire - warm oranges, reds, pinks

<WavyBackground Colors="@(new[] { "#f97316", "#ef4444", "#ec4899", "#f59e0b", "#fb923c" })"
                BackgroundColor="#1a0a00" Speed="0.008" Opacity="0.55" />

Neon Cyberpunk - electric, high contrast

<WavyBackground Colors="@(new[] { "#ff00ff", "#00ffff", "#39ff14", "#ff3131" })"
                BackgroundColor="#0a0a0a" WaveCount="4" WaveWidth="35" Speed="0.008" Opacity="0.7" />

Minimal Frost - white/silver on dark, subtle

<WavyBackground Colors="@(new[] { "#e2e8f0", "#94a3b8", "#cbd5e1", "#f1f5f9" })"
                BackgroundColor="#0f172a" WaveCount="3" WaveWidth="70" Opacity="0.3" />

Northern Lights - purples, greens, ethereal

<WavyBackground Colors="@(new[] { "#a855f7", "#6366f1", "#22d3ee", "#4ade80", "#818cf8" })"
                BackgroundColor="#0c0720" WaveCount="7" WaveWidth="55" />

Molten Gold - luxurious golds and ambers

<WavyBackground Colors="@(new[] { "#fbbf24", "#f59e0b", "#d97706", "#b45309", "#fcd34d" })"
                BackgroundColor="#1c1208" Speed="0.008" Opacity="0.45" />

Contributing

# Clone and build
git clone https://github.com/cartsp/hero-wave.git
cd hero-wave
dotnet build

# Run the demo app
dotnet run --project demo/HeroWave.Demo

# Run unit tests
dotnet test tests/HeroWave.Tests/

# Run E2E tests (requires Playwright browsers installed)
dotnet test tests/HeroWave.E2E/

License

MIT