Heartbeat relative to mouse position

hearbeat.js

/**
 * Heartbeat rhythm
 */
var heart = document.querySelector('footer span')
var heartBounds = heart.getBoundingClientRect()
var rhythm

document.body.addEventListener('mousemove', function(e) {
  var mx = e.clientX
  var my = e.clientY

  var hx = heartBounds.left + heartBounds.width / 2
  var hy = heartBounds.top + heartBounds.height

  var dist = Math.sqrt((mx - hx) * (mx - hx) + (my - hy) * (my - hy))
  var vmax = Math.max(hx, hy)

  var ratio = dist / vmax
  rhythm = Math.min(2, Math.round(ratio * 100 * 2) / 100 + 0.5)
})

// TODO: it seems to sometimes restart the animation while it has already begun
heart.addEventListener('animationiteration', function() {
  heart.style.animationDuration = rhythm + 's'
})