%span IDEAS
%h1.title should ENERGIZE
%h1.subtitle click & hold to be energized
%div.particles
View Compiled
html, body {
  background: #000;
  background-position: center;
  height: 100%;
  width: 100%;
  overflow: hidden;
  cursor: pointer;
  user-select: none; 
     text-align: center;
  &:active  {
    background: #fff;
  transition: all 2s ease;
  height: 100%;
  width: 100%;
 

  }
  &:active .title  {
    color: rgba(255,255,255,0);
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
    &:active span  {
    color: rgba(255,255,255,0);
    transition: all 2s ease;
    -webkit-transition: all 2s ease;
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
  }
    &:active .subtitle  {
     transition: 2s ease;
     -webkit-transition: 2s ease;
     line-height: 1.5em;
     -webkit-transform: translateY(-60px);
     transform: translateY(-60px);
     color: #222;
  }

}
span {
  font-family: 'futura pt', Helvetica, sans-serif;
  font-size: 3em;
  letter-spacing: 0em;
  line-height: 1em;
  font-weight: 700;
  font-style: italic;
  text-align: center;
  color: #BFFF00;
  margin-top: 18%;
   margin-bottom: 0px;
  margin-left: 20px;
    display: inline-block;

    }
.title {
  font-family: 'futura pt', Helvetica, sans-serif;
  font-size: 3em;
  font-weight: 700;
  font-style: bold;
  text-align: center;
  color: #fff;
  display: inline-block;
  margin-left: 8px;
}

.subtitle {
    font-family: 'futura pt', Helvetica, sans-serif;
    font-size: 1.8em;
    color: #999;
    font-weight: 300;
	font-style: normal;
    text-align: center;
    margin-top: 34px;
    line-height: 0em;
    margin-left: 20px;
}

.particle-count {
  display: block;
  text-align: center;
  margin: 25px 0;
}

.particles > .particle {
  border-radius: 100%;
  background: transparent;
  
  position: absolute;
  
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  &.smaller {
    width: 5px;
    height: 5px;
  }
  &.small {
    width: 10px;
    height: 10px;
  }
  &.normal {
    width: 15px;
    height: 15px;
  }
  &.big {
    width: 20px;
    height: 20px;
  }
  &.bigger {
    width: 25px;
    height: 25px;
  }
}
.containercats {
  text-align: center;
}
View Compiled
var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles = $('.particles'),
    particleCount = 0,
    sizes = [
      15, 20, 25, 35, 45
    ],
    colors = [
      '#F5A503', '#D14CFE', '#48ECFF', '#03FE96', '#C7FF19',
      '#FF19CE', '#B4FF59', '#C7FF19', '#4AD9D9', '#FF1943',
      '#FFB633', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#4AD9D9', '#FF358B', '#7400FF', '#607D8B', '#FF0DFF', 'C7FF19'
    ],
    
    mouseX = $w.width() / 2, mouseY = $w.height() / 2;

function updateParticleCount () {
  $('.particle-count > .number').text(particleCount);
};

$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});

$d
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
  var timer = setInterval(function () {
    $d
    .one('mouseup mouseleave touchend touchcancel touchleave', function () {
      clearInterval( timer );
    })
    createParticle( event );
  }, 1000 / 60)
  
});


function createParticle ( event ) {
  var particle = $('<div class="particle"/>'),
      size = sizes[Math.floor(Math.random() * sizes.length)],
      color = colors[Math.floor(Math.random() * colors.length)],
      negative = size/2,
      speedHorz = Math.random() * 10,
      speedUp = Math.random() * 25,
      spinVal = 360 * Math.random(),
      spinSpeed = ((36 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
      otime,
      time = otime = (1 + (.5 * Math.random())) * 1000,
      top = (mouseY - negative),
      left = (mouseX - negative),
      direction = Math.random() <=.5 ? -1 : 1 ,
      life = 10;
  
  particle
  .css({
    height: size + 'px',
    width: size + 'px',
    top: top + 'px',
    left: left + 'px',
    background: color,
    transform: 'rotate(' + spinVal + 'deg)',
    webkitTransform: 'rotate(' + spinVal + 'deg)'
  })
  .appendTo( particles );
  particleCount++;
  updateParticleCount();
  
  var particleTimer = setInterval(function () {
    time = time - life;
    left = left - (speedHorz * direction);
    top = top - speedUp;
    speedUp = Math.min(size, speedUp - 1);
    spinVal = spinVal + spinSpeed;
    
    
    particle
    .css({
      height: size + 'px',
      width: size + 'px',
      top: top + 'px',
      left: left + 'px',
      opacity: ((time / otime)/1),
    	transform: 'rotate(' + spinVal + 'deg)',
    	webkitTransform: 'rotate(' + spinVal + 'deg)'
    });
    
    if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
      particle.remove();
  		particleCount--;
      updateParticleCount();
      clearInterval(particleTimer);
    }
  }, 1000 / 50);  
}
Rerun