{"id":19809309,"url":"https://github.com/p6laris/sirilazor","last_synced_at":"2026-05-09T23:03:27.978Z","repository":{"id":207888994,"uuid":"720357017","full_name":"p6laris/SiriLazor","owner":"p6laris","description":"Siriwave.js wrapper for blazor.","archived":false,"fork":false,"pushed_at":"2023-12-11T01:41:15.000Z","size":7145,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-11T10:06:28.811Z","etag":null,"topics":["apple-siri","blazor","blazor-animation","blazor-client","blazor-server","blazor-webassembly","js-wrapper","jsinterop","razorc","sinewave","sirilazor","siriwave","webassembly"],"latest_commit_sha":null,"homepage":"","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/p6laris.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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}},"created_at":"2023-11-18T08:21:16.000Z","updated_at":"2023-11-20T06:02:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"2b38e896-a571-4c59-93a0-0637ad0cae83","html_url":"https://github.com/p6laris/SiriLazor","commit_stats":null,"previous_names":["p6laris/sirilazor"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FSiriLazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FSiriLazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FSiriLazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/p6laris%2FSiriLazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/p6laris","download_url":"https://codeload.github.com/p6laris/SiriLazor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241152625,"owners_count":19918657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["apple-siri","blazor","blazor-animation","blazor-client","blazor-server","blazor-webassembly","js-wrapper","jsinterop","razorc","sinewave","sirilazor","siriwave","webassembly"],"created_at":"2024-11-12T09:16:33.408Z","updated_at":"2026-05-09T23:03:27.944Z","avatar_url":"https://github.com/p6laris.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SiriLazor\n[![NuGet](https://img.shields.io/nuget/dt/SiriLazor?logo=nuget)](https://www.nuget.org/packages/SiriLazor)\n![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/p6laris/SiriLazor)\n\n[Sirwave.js](https://github.com/kopiro/siriwave) wrapper for blazor to generate siri-wave animations in both classic and IOS9+ Styles.\n\n![alt text](https://github.com/p6laris/SiriLazor/blob/master/SiriLazor/SiriLazor_160x160.png?raw=true)\n\n## Classical Style\nBefore IOS9 style\n\n![Classical Wave](https://github.com/p6laris/SiriLazor/blob/master/SiriLazor/classicWave.gif)\n\n## IOS9 Style\nThe IOS9 style\n\n![Classical Wave](https://github.com/p6laris/SiriLazor/blob/master/SiriLazor/ios9Wave.gif)\n\n## Installation\n1. Install [SiriLazor](https://www.nuget.org/packages/SiriLazor) with dotnet cli in your Blazor app.\n\n  ```sh\n  dotnet add package SiriLazor \n  ```\n  ```C#\n  using SiriLazor.Component.Extention;\n\n  // Inside your ConfigureServices method\n  builder.Service.AddSiriLazor();\n  ```\n3.Add these two script tag in your root file **_Host.cshtml for Blazor Server Apps** or **index.html for Blazor WebAssembly Apps**:\n  ```html\n  \u003cscript src=\"_framework/blazor.webassembly.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"_content/SiriLazor/siriWave.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n  \u003cscript src=\"_content/SiriLazor/siriLazorInterop.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n  ```\n## Usage\nAfter you installed SirLazor, then you can use the SiriLazor's components:\n\n#### 1. Classic Style\n\n  ```razor\n  @using SiripLazor.UI;\n\n  \u003cClassicWave SetDefaultOptions\u003e\u003c/ClassicWave\u003e\n   ```\n#### 2. IOS9 Style\n\n  ```razor\n  @using SiripLazor.UI;\n\n  \u003cIOS9Wave SetDefaultOptions\u003e\u003c/IOS9Wave\u003e\n   ```\n### Options\nBoth components have several options to be set to customize the wave:\n\n##### ClassicWave\n| Parameter                      | Type                                      | Description                                     | Default  |\n|-------------------------------|-------------------------------------------|-------------------------------------------------|----------|\n| `Ratio`                       | `double?`                                 | Ratio of the display to use.                     | calculated |\n| `Speed`                       | `double?`                                 | The speed of the animation.                      | 0.2|\n| `Amplitude`                   | `double?`                                 | The amplitude of the complete wave-form.         | 1.0|\n| `Frequency`                   | `double?`                                 | The frequency of the complete wave-form.         | 6.0|\n| `Color`                       | `string?`                                 | The hex color of the wave.                       | #ffffff|\n| `Cover`                       | `bool?`                                   | The canvas covers the entire width or height of the container  | false|\n| `Width`                       | `double?`                                 | Sets the width parameter.                        | 600.0 |\n| `Height`                      | `double?`                                 | Sets the height parameter.                       | 200.0 |\n| `Autostart`                   | `bool?`                                   | Decide wether start the animation on boot     | false    |\n| `PixelDepth`                  | `double?`                                 | Number of step (in pixels) used when drawed on canvas. | 0.2   |\n| `LerpSpeed`                   | `double?`                                 | Lerp speed to interpolate properties.                 | 0.01      |\n| `Definitions`                 | `IEnumerable\u003cClassicWaveCurveDefintion\u003e?` | Override definition of the curves, check the [siriwave.js](https://github.com/kopiro/siriwave/).      | null    |\n| `GlobalCompositeOperation`    | `string?`                                 | GlobalCompositeOperation of the canvas, controls wave overlap design.  | \"lighter\"      |\n\n##### IOS9Wave\n\n| Parameter                      | Type                                      | Description                                     | Default  |\n|-------------------------------|-------------------------------------------|-------------------------------------------------|----------|\n| `Ratio`                       | `double?`                                 | Ratio of the display to use.                     | calculated |\n| `Speed`                       | `double?`                                 | The speed of the animation.                      | 0.2|\n| `Amplitude`                   | `double?`                                 | The amplitude of the complete wave-form.         | 1.0|\n| `Cover`                       | `bool?`                                   | The canvas covers the entire width or height of the container  | false|\n| `Width`                       | `double?`                                 | Sets the width parameter.                        | 600.0 |\n| `Height`                      | `double?`                                 | Sets the height parameter.                       | 200.0 |\n| `Autostart`                   | `bool?`                                   | Decide wether start the animation on boot     | false    |\n| `PixelDepth`                  | `double?`                                 | Number of step (in pixels) used when drawed on canvas. | 0.2   |\n| `LerpSpeed`                   | `double?`                                 | Lerp speed to interpolate properties.                 | 0.01      |\n| `iOS9Ranges`                  | `IOS9WaveRanges?`                         | Sets the iOS 9 wave ranges parameter, check the [siriwave.js](https://github.com/kopiro/siriwave/).            | null       |\n| `Definitions`                 | `IEnumerable\u003cIOS9WaveCurveDefintion\u003e?` | Override definition of the curves, check the [siriwave.js](https://github.com/kopiro/siriwave/).      | null    |\n| `GlobalCompositeOperation`    | `string?`                                 | GlobalCompositeOperation of the canvas, controls wave overlap design.  | \"lighter\"      |\n\nFor setting the GlobalCompositeOperation, you can use `GlobalCompositeOperation` static class.\n\n##### Default Options\nYou can just use `SetDefaultOptions` parameter to set the options to default:\n\n ```razor\n  @using SiripLazor.UI;\n\n  \u003cIOS9Wave SetDefaultOptions\u003e\u003c/IOS9Wave\u003e\n   ```\n##### SiriObject\nBy refrencing both components you can access `SiriLazor` object''s methods,basically the object holds the index of the Siriwave's instance so it can access it's animation.\n\n ```razor\n  @using SiripLazor.UI;\n\n  \u003cClassicWave SetDefaultOptions @ref=\"wave\"\u003e\u003c/ClassicWave\u003e\n\n  @code{\n    ClassicWave wave;\n\n    async Task Stop() =\u003e await wave.Stop();\n   }\n   ```\n##### Methods\n\n- **Stop:**\n  - *Description:* Stops the SiriWave animation.\n  - *Usage:* `await Stop();`\n\n- **Start:**\n  - *Description:* Starts the SiriWave animation.\n  - *Usage:* `await Start();`\n\n- **SetSpeed(animated):**\n  - *Description:* Sets the speed of the SiriWave animation to the specified value.\n  - *Usage:* `await SetSpeed(double value);`\n\n- **SetAmplitude(animated):**\n  - *Description:* Sets the amplitude of the SiriWave to the specified value.\n  - *Usage:* `await SetAmplitude(double value);`\n\n- **DisposeAsync:**\n  - *Description:* Disposes of the SiriWave, cleaning up associated resources.\n  - *Usage:* `await DisposeAsync();`\n \n## Example\n\n:bookmark_tabs: See the full example [here](https://github.com/p6laris/SiriLazor/blob/master/SiriLazor.WASM/Components/Pages/Home.razor).\n\n## License\n[MIT](https://github.com/p6laris/SiriLazor/blob/master/LICENSE.txt)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp6laris%2Fsirilazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fp6laris%2Fsirilazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fp6laris%2Fsirilazor/lists"}