Skip to content
The Apple® Siri wave-form replicated in a JS library.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist New build 1.3.0 Mar 16, 2019
src Prettierify Sep 17, 2019
.babelrc Refactor using class, ES6 and rollup build Oct 3, 2018
.eslintrc Various fixes and adding ESlint config Mar 16, 2019
.gitignore Refactor using class, ES6 and rollup build Oct 3, 2018
.npmignore Adding webpack test directory Oct 17, 2018
README.md Various fixes and adding ESlint config Mar 16, 2019
back.png Refactoring ios12 Oct 23, 2018
classic.gif New gifs Oct 25, 2018
dat.gui.js Adding Dat GUI and new UI interface Oct 26, 2018
default.gcx Adding graph default Oct 25, 2018
index.html Various fixes and adding ESlint config Mar 16, 2019
ios9.gcx Edits to iOS9 style Oct 26, 2018
ios9.gif
package.json 1.3.2 Nov 12, 2019
rollup.config.js Prettierify Sep 17, 2019
yarn.lock Bump mixin-deep from 1.3.1 to 1.3.2 (#37) Nov 12, 2019

README.md

SiriWave

The "Apple Siri" wave replicated in pure Javascript using the Canvas API.

Read blog post here

View live example

npm version

Classic style

iOS 9+ style

Usage

To use in the classic way, download the dist file under ./dist/siriwave.min.js, or use the CDN one https://unpkg.com/siriwave/dist/siriwave.min.js and include in your web page as a script.

<script src="https://unpkg.com/siriwave/dist/siriwave.js"></script>

Otherwise, the build is ready to import as ESM module via npm i siriwave.

import SiriWave from 'siriwave';

Instantitate

Create a div container and instantiate a SiriWave object

<div id="siri-container"></div>
<script>
var siriWave = new SiriWave({
	container: document.getElementById('siri-container'),
	width: 640,
	height: 200,
});
</script>

Constructor 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. "ios" 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. 1 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 false 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

You can’t perform that action at this time.