{"id":13408965,"url":"https://github.com/kopiro/siriwave","last_synced_at":"2025-10-08T09:37:12.825Z","repository":{"id":45384274,"uuid":"19871690","full_name":"kopiro/siriwave","owner":"kopiro","description":"The Apple® Siri wave-form replicated in a JS library.","archived":false,"fork":false,"pushed_at":"2024-06-18T10:26:24.000Z","size":8107,"stargazers_count":1660,"open_issues_count":14,"forks_count":166,"subscribers_count":39,"default_branch":"master","last_synced_at":"2025-05-14T00:48:56.710Z","etag":null,"topics":["animation","apple","apple-siri","canvas","gcx","ios","javascript","siriwave"],"latest_commit_sha":null,"homepage":"http://kopiro.github.io/siriwave/","language":"JavaScript","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/kopiro.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}},"created_at":"2014-05-16T21:46:38.000Z","updated_at":"2025-05-07T07:21:58.000Z","dependencies_parsed_at":"2024-11-19T12:12:23.074Z","dependency_job_id":"f45a593e-2f15-4b75-b0a4-bd706ac506b3","html_url":"https://github.com/kopiro/siriwave","commit_stats":{"total_commits":167,"total_committers":15,"mean_commits":"11.133333333333333","dds":0.3053892215568862,"last_synced_commit":"744cb00235b7900733efff25dc73b4d1ab77c92d"},"previous_names":["caffeinalab/siriwavejs"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kopiro%2Fsiriwave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kopiro%2Fsiriwave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kopiro%2Fsiriwave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kopiro%2Fsiriwave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kopiro","download_url":"https://codeload.github.com/kopiro/siriwave/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254092876,"owners_count":22013295,"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":["animation","apple","apple-siri","canvas","gcx","ios","javascript","siriwave"],"created_at":"2024-07-30T20:00:56.931Z","updated_at":"2025-10-08T09:37:07.774Z","avatar_url":"https://github.com/kopiro.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries","Repository"],"sub_categories":["Waveforms animation","Animation"],"readme":"# SiriWave\n\nThe \"Apple Siri\" wave replicated in pure Javascript using the Canvas API. To learn more about the project, [read the blog post here](https://dev.to/kopiro/how-i-built-the-siriwavejs-library-a-look-at-the-math-and-the-code-l0o), [check the demo](http://kopiro.github.io/siriwave) or [codepen](https://codepen.io/kopiro/pen/oNYepEb).\n\n[![npm version](https://badge.fury.io/js/siriwave.svg)](https://badge.fury.io/js/siriwave)\n\n### iOS (classic) style\n\nThe classic, pre-iOS9 style.\n\n\u003cimg src=\"etc/classic.gif\" /\u003e\n\n### iOS9 style\n\nThe new fluorescent wave introduced in iOS9.\n\n\u003cimg src=\"etc/ios9.gif\" /\u003e\n\n### iOS13 style\n\n_work in progress_\n\nThe wave reinvented as a bubble.\n\n## Usage\n\n### Browser (via CDN) usage\n\nImport the UMD package via the unpkg CDN and it's ready to use.\n\n```html\n\u003cscript src=\"https://unpkg.com/siriwave/dist/siriwave.umd.min.js\"\u003e\u003c/script\u003e\n```\n\n### ES module\n\nInstall it through `npm install siriwave` or `npm add siriwave` first:\n\n```js\nimport SiriWave from \"siriwave\";\n```\n\n## Initialize\n\nCreate a div container and instantiate a new SiriWave object:\n\n```html\n\u003cdiv id=\"siri-container\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n  var siriWave = new SiriWave({\n    container: document.getElementById(\"siri-container\"),\n    width: 640,\n    height: 200,\n  });\n\u003c/script\u003e\n```\n\n## Constructor options\n\n| Key                        | Type                     | Description                                                            | Default    | Required |\n| -------------------------- | ------------------------ | ---------------------------------------------------------------------- | ---------- | -------- |\n| `container`                | DOMElement               | The DOM container where the DOM canvas element will be added.          | null       | yes      |\n| `style`                    | \"ios\", \"ios9\"            | The style of the wave.                                                 | \"ios\"      | no       |\n| `ratio`                    | Number                   | Ratio of the display to use. Calculated by default.                    | calculated | no       |\n| `speed`                    | Number                   | The speed of the animation.                                            | 0.2        | no       |\n| `amplitude`                | Number                   | The amplitude of the complete wave-form.                               | 1          | no       |\n| `frequency`                | Number                   | The frequency of the complete wave-form. Only available in style \"ios\" | 6          | no       |\n| `color`                    | String                   | Color of the wave. Only available in style \"ios\"                       | \"#fff\"     | no       |\n| `cover`                    | Bool                     | The `canvas` covers the entire width or height of the container        | false      | no       |\n| `autostart`                | Bool                     | Decide wether start the animation on boot.                             | false      | no       |\n| `pixelDepth`               | Number                   | Number of step (in pixels) used when drawed on canvas.                 | 0.02       | no       |\n| `lerpSpeed`                | Number                   | Lerp speed to interpolate properties.                                  | 0.01       | no       |\n| `curveDefinition`          | ICurveDefinition[]       | Override definition of the curves, check above for more details.       | null       | no       |\n| `ranges`                   | IiOS9Ranges              | Override the default random ranges of the curves.                      | null       | no       |\n| `globalCompositeOperation` | GlobalCompositeOperation | globalCompositeOperation of the canvas, controls wave overlap design.  | \"lighter\"  | no       |\n\n### Ranges\n\nEach wave chooses a random parameter for each of these ranges that factors into their creation. You can override these ranges by passing a `ranges` object to the constructor.\n\nHere is the type of the ranges object:\n\n```ts\nexport type IiOS9Ranges = {\n  noOfCurves?: [number, number];\n  amplitude?: [number, number];\n  offset?: [number, number];\n  width?: [number, number];\n  speed?: [number, number];\n  despawnTimeout?: [number, number];\n};\n```\n\n## API\n\n#### `new SiriWave`\n\n#### `curveDefinition`\n\nBy passing this argument, you're overriding the default curve definition resulting in a completely different style.\n\nThe default definition for the `ios` classic style is:\n\n```js\n[\n  { attenuation: -2, lineWidth: 1, opacity: 0.1 },\n  { attenuation: -6, lineWidth: 1, opacity: 0.2 },\n  { attenuation: 4, lineWidth: 1, opacity: 0.4 },\n  { attenuation: 2, lineWidth: 1, opacity: 0.6 },\n  { attenuation: 1, lineWidth: 1.5, opacity: 1 },\n];\n```\n\nand it results in 5 different sin-waves with different parameters and amplitude.\n\nYou can set 4 attributes for each curve:\n\n- `attenuation`: the power factor determining the attenuation\n- `lineWidth`: the line width\n- `opacity`: the opacity\n- `color`: the color, default to `SiriWave.color`; optional\n\nThe `ios9` style definition is instead:\n\n```js\n[\n  { color: \"255,255,255\", supportLine: true },\n  { color: \"15, 82, 169\" }, // blue\n  { color: \"173, 57, 76\" }, // red\n  { color: \"48, 220, 155\" }, // green\n];\n```\n\nand it results in 3 different colored waves + 1 support wave that needs to be there.\n\nHere you set:\n\n- `supportLine`: only one of these curves must have this to `true`, it will be used to draw the support line\n- `color`: the color of the wave\n\n#### `start()`\n\nStart the animation\n\n#### `stop()`\n\nStop the animation.\n\n#### `setSpeed(newValue)`\n\nSet the new value of speed (animated)\n\n#### `setAmplitude(value)`\n\nSet the new value of amplitude (animated)\n\n#### `dispose()`\n\nStop the animation and destroy the canvas, by removing it from the DOM.\nSubsequent `start()` calls on this SiriWave instance will fail with an exception.\n\n## Grapher plots\n\n- [GCX default](etc/gcx/default.gcx)\n- [GCX iOS 9](etc/gcx/ios9.gcx)\n\n## Build and development\n\nIf you wanna make some modifications in your local environment, use:\n\n```sh\nnpm dev\n```\n\nthis will create a watchable build with RollupJS and automatically create a server to see your changes in the browser.\n\nTo finally build all targets:\n\n```sh\nnpm build\n```\n\n## QA\n\n#### How do I integrate this library with a microphone user input?\n\nYou can find an excellent demo [here](https://jsitor.com/PPQtOp9Yp) by @semmel\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkopiro%2Fsiriwave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkopiro%2Fsiriwave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkopiro%2Fsiriwave/lists"}