“Hearts” HTML5 Demo

The Hearts demo brings together a number of HTML technologies and makes kind of a fun app out of it.

 

This demo:

  • Works like an app (manifest.json): icon, fullscreen, offline (cache.manifest), locks orientation.
  • The background is an array of hearts which all cascade toward the ground no matter which way your phone is oriented.  Uses javascript orientation sensor.  Background cascade uses CSS translate3D to offset repeating pattern, driven on requestAnimationFrame calls.
  • Main heart shape uses CSS animation keyframes to grow and shrink when touched.

 

Looks great on a phone when added to the home screen.  Tested on Android.

 

Live Demo (link), or screenshot: