SiriWave

The "Apple Siri" wave is replicated in pure Javascript using the Canvas API. To learn more about the project, read the blog post, and check the demo or code pen. Import the UMD package via the unpkg CDN and it's ready to use. Create a div container and instantiate a new SiriWave object. Stop the animation and destroy the canvas, by removing it from the DOM. Subsequent start() calls on this SiriWave instance will fail with an exception.

Features

iOS (classic) style
iOS9 style
iOS13 style
New fluorescent wave introduced in iOS9
Browser (via CDN) usage
ES module

Project Samples

Project Activity

See All Activity >

License

MIT License

Follow SiriWave

SiriWave Web Site

Other Useful Business Software

Gemini 3 and 200+ AI Models on One Platform

Access Google's best plus Claude, Llama, and Gemma. Fine-tune and deploy from one console.

Build, govern, and optimize agents and models with Gemini Enterprise Agent Platform.

Start Free

Rate This Project

User Reviews

Be the first to post a review of SiriWave!

Additional Project Details

Operating Systems

Apple iPhone

Programming Language

JavaScript

Related Categories

JavaScript Libraries

Registered

2023-06-23

Similar Business Software

Webix

JavaScript UI library and framework for speeding up web development. JS Framework for cross-platform web Apps development 102 UI widgets and feature-rich CSS / HTML5 JavaScript controls. Save at least 3000+ development hours by using ready-made widgets and UI controls. Develop Web UI 30% faster....

See Software
Backbone.js

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. When working on a web...

See Software
Anime.js

Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes, and JavaScript Objects. Follow through animations made easy. Anime's built-in staggering system makes complex follow-through and overlapping animations...

See Software
Animate On Scroll (AOS)

Animate on scroll library. In order to make it work, you'll have to make sure your build process has configured styles loader and bundles it all correctly. If you're using Parcel, however, it will work out of the box as provided. AOS object is exposed as a global variable, for now, there are...

See Software
DHTMLX

DHTMLX is a JavaScript UI library that provides a set of highly customizable and flexible components for building modern and responsive web applications. The library includes more than 30 UI components, such as Gantt, Scheduler, Kanban, diagrams, charts, grids, spreadsheets, calendars, trees,...

See Software
React

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. Build encapsulated...

See Software