https://github.com/cartsp/hero-wave
A reusable Blazor WASM wavy background component — animated canvas waves with simplex noise, packaged as a Razor Class Library
https://github.com/cartsp/hero-wave
animation blazor blazor-client blazor-webassembly canvas dotnet ui ui-components webassembly
Last synced: 3 months ago
JSON representation
A reusable Blazor WASM wavy background component — animated canvas waves with simplex noise, packaged as a Razor Class Library
- Host: GitHub
- URL: https://github.com/cartsp/hero-wave
- Owner: cartsp
- License: mit
- Created: 2026-03-19T17:34:07.000Z (3 months ago)
- Default Branch: master
- Last Pushed: 2026-03-29T14:05:11.000Z (3 months ago)
- Last Synced: 2026-03-29T14:24:04.306Z (3 months ago)
- Topics: animation, blazor, blazor-client, blazor-webassembly, canvas, dotnet, ui, ui-components, webassembly
- Language: C#
- Homepage: https://cartsp.github.io/hero-wave/
- Size: 1.54 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HeroWave
[](https://github.com/cartsp/hero-wave/actions/workflows/ci.yml)
[](https://www.nuget.org/packages/HeroWave)
[](LICENSE)
[](https://cartsp.github.io/hero-wave/)
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](https://cartsp.github.io/hero-wave/)** | [Hero Section](https://cartsp.github.io/hero-wave/) | [Full Page](https://cartsp.github.io/hero-wave/fullpage) | [Color Showcase](https://cartsp.github.io/hero-wave/showcase)
## Installation
```bash
dotnet add package HeroWave
```
Add the namespace to your `_Imports.razor`:
```razor
@using HeroWave.Components
```
## Quick Start
```razor
Get Started
```
## Parameters
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `Title` | `string?` | null | Large heading text centered over the waves |
| `Subtitle` | `string?` | null | Smaller text below the title |
| `ChildContent` | `RenderFragment?` | null | Custom Razor markup rendered below title/subtitle |
| `Height` | `string` | `"100vh"` | CSS height of the container |
| `Colors` | `string[]` | `["#38bdf8", "#818cf8", "#c084fc", "#e879f9", "#22d3ee"]` | Wave line colors |
| `BackgroundColor` | `string` | `"#0c0c14"` | Background fill color |
| `WaveCount` | `int` | `5` | Number of wave layers |
| `WaveWidth` | `int` | `50` | Stroke width of each wave (px) |
| `Speed` | `double` | `0.004` | Animation speed — time increment per frame (e.g. `0.004` slow, `0.008` fast) |
| `Opacity` | `double` | `0.5` | Wave opacity (0.0 - 1.0) |
| `CssClass` | `string?` | null | Additional CSS class on the overlay |
## Examples
### Hero Section
```razor
```
### Full Page Background
```razor
...
...
```
### Color Presets
**Ocean Aurora** - cool blues and greens
```razor
```
**Sunset Fire** - warm oranges, reds, pinks
```razor
```
**Neon Cyberpunk** - electric, high contrast
```razor
```
**Minimal Frost** - white/silver on dark, subtle
```razor
```
**Northern Lights** - purples, greens, ethereal
```razor
```
**Molten Gold** - luxurious golds and ambers
```razor
```
## Contributing
```bash
# 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](LICENSE)