#vcent
button#pretty Yay!
button#ugly Nay! 

html, body, #vcent
  height: 100%

body
  text-align: center
  background: #333
  
#vcent, button
  display: inline-block
  vertical-align: middle

button
  margin: 0 42px
  height: 60px
  width: 120px
  border: 0
  font: bold 24px/#{60px} sans-serif
  text-transform: uppercase
  color: white
  cursor: pointer

// RAF polyfill
window.requestAnimFrame = Modernizr.prefixed('requestAnimationFrame', window) ||
  function(callback) {
    window.setTimeout(callback, 1000 / 60);
};

(function() {
  var prettyDirection = 0; //gross hack because it's 4AM
  var uglyDirection = 0;
  var prettyAngle = 180;
  var uglyAngle = 0;
  var $pretty = $('#pretty');
  var $ugly = $('#ugly');
  
  $pretty.hover(function() {
    prettyDirection = 2;
  }, function() {
    prettyDirection = -2;
  });
  
  $ugly.hover(function() {
    uglyDirection = 2;
  }, function() {
    uglyDirection = -2;
  });
  
  (function animloop(){
    requestAnimFrame(animloop);
    prettyAngle += prettyDirection;
    uglyAngle += uglyDirection;
    if (prettyAngle < 180) {
      prettyAngle = 180;
      prettyDirection = 0;
    } else if (prettyAngle > 300) {
      prettyAngle = 300;
      prettyDirection = 0;
    }
    if (uglyAngle < 0) {
      uglyAngle = 0;
      uglyDirection = 0;
    } else if (uglyAngle > 120) {
      uglyAngle = 120;
      uglyDirection = 0;
    }
    $pretty.css( {backgroundColor: $.husl.toHex(prettyAngle, 100, 70)} );
    $ugly.css( {backgroundColor: $.husl.toHex(uglyAngle, 100, 40)} );
  })();
})();