@masonite/siriwave

The Siri wave replicated in a JS library.

Usage no npm install needed!

<script type="module">
  import masoniteSiriwave from 'https://cdn.skypack.dev/@masonite/siriwave';
</script>

README

@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