@masonite/siriwave

The "Apple Siri" wave replicated in pure Javascript using the Canvas API. Based on kopiro/siriwave.

Usage

npm install @masonite/siriwave

import SiriWave from "@masonite/siriwave";

const siriWave = new SiriWave({
  container: document.getElementById('siri-container'),
  height: 200,
  autostart: true
});

The default options for the siriwave used for Masonite are as follows:

{ 
  cover: true,
  autostart: false,
  style: "ios9",
  colors (changed in src/ios9curve.js): rgb(146,200,62), rgb(67,71,75), rgb(67,71,75),
  amplitude: 2
}

See below for additional options and customizations to the siriwave package.

Options

| Key | Type | Description | Default | Required | | ---------- | ------------- | ---------------------------------------------------------------------- | ---------- | -------- | | container | DOMElement | The DOM container where the DOM canvas element will be added. | null | yes | | style | "ios", "ios9" | The style of the wave. | "ios9" | no | | ratio | Number | Ratio of the display to use. Calculated by default. | calculated | no | | speed | Number | The speed of the animation. | 0.2 | no | | amplitude | Number | The amplitude of the complete wave-form. | 2 | no | | frequency | Number | The frequency of the complete wave-form. Only available in style "ios" | 6 | no | | color | String | Color of the wave. Only available in style "ios" | "#fff" | no | | cover | Bool | The canvas covers the entire width or height of the container | true | no | | autostart | Bool | Decide wether start the animation on boot. | false | no | | pixelDepth | Number | Number of step (in pixels) used when drawed on canvas. | 0.02 | no | | lerpSpeed | Number | Lerp speed to interpolate properties. | 0.01 | no |

API

start()

Start the animation

stop()

Stop the animation.

setSpeed(newValue)

Set the new value of speed (animated)

setAmplitude(value)

Set the new value of amplitude (animated)

Grapher plots

• GCX iOS 9
• GCX default