<article>
  <pre class="candybox2">           ________
      _,.-Y  |  |  Y-._
  .-~"   ||  |  |  |   "-.
  I" ""=="|" !""! "|"[]""|     _____
  L__  [] |..------|:   _[----I" .-{"-.
 I___|  ..| l______|l_ [__L]_[I_/r(=}=-P
[L______L_[________]______j~  '-=c_]/=-^
 \_I_j.--.\==I|I==_/.--L_]
   [_((==)[`-----"](==)j
      I--I"~~"""~~"I--I
      |[]|         |[]|
      l__j         l__j
      |!!|         |!!|
      |..|         |..|
      ([])         ([])
      ]--[         ]--[
      [_L]         [_L]
     /|..|\       /|..|\
    `=}--{='     `=}--{='
   .-^--r-^-.   .-^--r-^-.
</pre>
  
</article>

@import "compass/css3";

$color-alpha: #000;

$list-alpha: 
  rgba(#fff, .5),
  #2ecc71, 
  #27ae60,
  #f1c40f,
  #f39c12,
  #3498db,
  #2980b9,
  #e74c3c,
  #c0392b,
  #9b59b6,
  #8e44ad, 
  #1abc9c,
  #16a085
;

$unit-alpha: length($list-alpha);
$unit-beta: .5s;
$unit-gamma: 100% / ($unit-alpha);

article {
  @extend %center;
}

.candybox2 {
  font-weight: bold;
  
  span {
    @for $i from 1 through $unit-alpha {
      &:nth-child(#{$unit-alpha}n+#{$i}) {
        @include animation(candy linear $unit-beta infinite forwards (-$unit-beta / $unit-alpha * $i));
      }
    }
  }
}

@include keyframes(candy) {
    @for $i from 1 through ($unit-alpha + 1) {
      #{$unit-gamma * ($i - 1)} {
        color: darken(nth($list-alpha, ($i % $unit-alpha) + 1), 15%);
        text-shadow: 
          .1em 0 .1em nth($list-alpha, ($i % $unit-alpha) + 1),
   .15em 0 .1em nth($list-alpha, ($i % $unit-alpha) + 1)
        ;
      }
    }
}

/**
 *
 * AT-AT
 *
 * You should play with $unit-beta.
 *
 * "nth-letter"-something is provided by lettering.js
 * -> every letter is wrapped into a span!
 * http://letteringjs.com
 *
 *
 * 2013 by Tim Pietrusky
 * timpietrusky.com
 */


/* Lettering.JS 0.6.1 by Dave Rupert  - http://daverupert.com */
(function($){function injector(t,splitter,klass,after){var a=t.text().split(splitter),inject='';if(a.length){$(a).each(function(i,item){inject+='<span class="'+klass+(i+1)+'">'+item+'</span>'+after});t.empty().append(inject)}}var methods={init:function(){return this.each(function(){injector($(this),'','char','')})},words:function(){return this.each(function(){injector($(this),' ','word',' ')})},lines:function(){return this.each(function(){var r="eefec303079ad17405c889e092e105b0";injector($(this).children("br").replaceWith(r).end(),r,'line','')})}};$.fn.lettering=function(method){if(method&&methods[method]){return methods[method].apply(this,[].slice.call(arguments,1))}else if(method==='letters'||!method){return methods.init.apply(this,[].slice.call(arguments,0))}$.error('Method '+method+' does not exist on jQuery.lettering');return this}})(jQuery);  


$(".candybox2").lettering();