@masonite/siriwave

@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