{"id":47622985,"url":"https://github.com/cartsp/hero-wave","last_synced_at":"2026-04-01T22:25:14.601Z","repository":{"id":346035068,"uuid":"1186501887","full_name":"cartsp/hero-wave","owner":"cartsp","description":"A reusable Blazor WASM wavy background component — animated canvas waves with simplex noise, packaged as a Razor Class Library","archived":false,"fork":false,"pushed_at":"2026-03-29T14:05:11.000Z","size":1611,"stargazers_count":0,"open_issues_count":8,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-29T14:24:04.306Z","etag":null,"topics":["animation","blazor","blazor-client","blazor-webassembly","canvas","dotnet","ui","ui-components","webassembly"],"latest_commit_sha":null,"homepage":"https://cartsp.github.io/hero-wave/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cartsp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-19T17:34:07.000Z","updated_at":"2026-03-29T01:28:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/cartsp/hero-wave","commit_stats":null,"previous_names":["cartsp/hero-wave"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/cartsp/hero-wave","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cartsp%2Fhero-wave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cartsp%2Fhero-wave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cartsp%2Fhero-wave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cartsp%2Fhero-wave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cartsp","download_url":"https://codeload.github.com/cartsp/hero-wave/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cartsp%2Fhero-wave/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31292639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T21:15:39.731Z","status":"ssl_error","status_checked_at":"2026-04-01T21:15:34.046Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","blazor","blazor-client","blazor-webassembly","canvas","dotnet","ui","ui-components","webassembly"],"created_at":"2026-04-01T22:25:12.677Z","updated_at":"2026-04-01T22:25:14.247Z","avatar_url":"https://github.com/cartsp.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HeroWave\n\n[![CI](https://github.com/cartsp/hero-wave/actions/workflows/ci.yml/badge.svg)](https://github.com/cartsp/hero-wave/actions/workflows/ci.yml)\n[![NuGet](https://img.shields.io/nuget/v/HeroWave.svg)](https://www.nuget.org/packages/HeroWave)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)\n[![Live Demo](https://img.shields.io/badge/demo-live-blue)](https://cartsp.github.io/hero-wave/)\n\nA 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.\n\n**[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)\n\n![Hero section demo](assets/screenshots/hero.png)\n\n![Full page background](assets/screenshots/fullpage.png)\n\n![Color presets showcase](assets/screenshots/showcase.png)\n\n## Installation\n\n```bash\ndotnet add package HeroWave\n```\n\nAdd the namespace to your `_Imports.razor`:\n\n```razor\n@using HeroWave.Components\n```\n\n## Quick Start\n\n```razor\n\u003cWavyBackground Title=\"Hello World\"\n                Subtitle=\"Animated waves behind your content\"\n                Height=\"60vh\"\u003e\n    \u003cbutton\u003eGet Started\u003c/button\u003e\n\u003c/WavyBackground\u003e\n```\n\n## Parameters\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `Title` | `string?` | null | Large heading text centered over the waves |\n| `Subtitle` | `string?` | null | Smaller text below the title |\n| `ChildContent` | `RenderFragment?` | null | Custom Razor markup rendered below title/subtitle |\n| `Height` | `string` | `\"100vh\"` | CSS height of the container |\n| `Colors` | `string[]` | `[\"#38bdf8\", \"#818cf8\", \"#c084fc\", \"#e879f9\", \"#22d3ee\"]` | Wave line colors |\n| `BackgroundColor` | `string` | `\"#0c0c14\"` | Background fill color |\n| `WaveCount` | `int` | `5` | Number of wave layers |\n| `WaveWidth` | `int` | `50` | Stroke width of each wave (px) |\n| `Speed` | `double` | `0.004` | Animation speed — time increment per frame (e.g. `0.004` slow, `0.008` fast) |\n| `Opacity` | `double` | `0.5` | Wave opacity (0.0 - 1.0) |\n| `CssClass` | `string?` | null | Additional CSS class on the overlay |\n\n## Examples\n\n### Hero Section\n\n```razor\n\u003cWavyBackground Title=\"Build Amazing Apps\"\n                Subtitle=\"A reusable wavy background component for Blazor\"\n                Height=\"60vh\"\u003e\n    \u003ca href=\"/signup\" class=\"btn\"\u003eGet Started\u003c/a\u003e\n\u003c/WavyBackground\u003e\n```\n\n### Full Page Background\n\n```razor\n\u003cWavyBackground Height=\"100vh\"\n                Speed=\"0.008\"\n                Colors=\"@(new[] { \"#22d3ee\", \"#818cf8\", \"#e879f9\" })\"\n                WaveCount=\"7\"\n                Opacity=\"0.6\"\u003e\n    \u003cdiv class=\"my-layout\"\u003e\n        \u003cnav\u003e...\u003c/nav\u003e\n        \u003cmain\u003e...\u003c/main\u003e\n    \u003c/div\u003e\n\u003c/WavyBackground\u003e\n```\n\n### Color Presets\n\n**Ocean Aurora** - cool blues and greens\n```razor\n\u003cWavyBackground Colors=\"@(new[] { \"#0ea5e9\", \"#06b6d4\", \"#14b8a6\", \"#10b981\", \"#34d399\" })\"\n                BackgroundColor=\"#021a2b\" WaveCount=\"6\" WaveWidth=\"60\" Opacity=\"0.6\" /\u003e\n```\n\n**Sunset Fire** - warm oranges, reds, pinks\n```razor\n\u003cWavyBackground Colors=\"@(new[] { \"#f97316\", \"#ef4444\", \"#ec4899\", \"#f59e0b\", \"#fb923c\" })\"\n                BackgroundColor=\"#1a0a00\" Speed=\"0.008\" Opacity=\"0.55\" /\u003e\n```\n\n**Neon Cyberpunk** - electric, high contrast\n```razor\n\u003cWavyBackground Colors=\"@(new[] { \"#ff00ff\", \"#00ffff\", \"#39ff14\", \"#ff3131\" })\"\n                BackgroundColor=\"#0a0a0a\" WaveCount=\"4\" WaveWidth=\"35\" Speed=\"0.008\" Opacity=\"0.7\" /\u003e\n```\n\n**Minimal Frost** - white/silver on dark, subtle\n```razor\n\u003cWavyBackground Colors=\"@(new[] { \"#e2e8f0\", \"#94a3b8\", \"#cbd5e1\", \"#f1f5f9\" })\"\n                BackgroundColor=\"#0f172a\" WaveCount=\"3\" WaveWidth=\"70\" Opacity=\"0.3\" /\u003e\n```\n\n**Northern Lights** - purples, greens, ethereal\n```razor\n\u003cWavyBackground Colors=\"@(new[] { \"#a855f7\", \"#6366f1\", \"#22d3ee\", \"#4ade80\", \"#818cf8\" })\"\n                BackgroundColor=\"#0c0720\" WaveCount=\"7\" WaveWidth=\"55\" /\u003e\n```\n\n**Molten Gold** - luxurious golds and ambers\n```razor\n\u003cWavyBackground Colors=\"@(new[] { \"#fbbf24\", \"#f59e0b\", \"#d97706\", \"#b45309\", \"#fcd34d\" })\"\n                BackgroundColor=\"#1c1208\" Speed=\"0.008\" Opacity=\"0.45\" /\u003e\n```\n\n## Contributing\n\n```bash\n# Clone and build\ngit clone https://github.com/cartsp/hero-wave.git\ncd hero-wave\ndotnet build\n\n# Run the demo app\ndotnet run --project demo/HeroWave.Demo\n\n# Run unit tests\ndotnet test tests/HeroWave.Tests/\n\n# Run E2E tests (requires Playwright browsers installed)\ndotnet test tests/HeroWave.E2E/\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcartsp%2Fhero-wave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcartsp%2Fhero-wave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcartsp%2Fhero-wave/lists"}