%div.gallery
  - (1..100).each do |i|
    %img{:src => "http://lorempixel.com/350/350/?p=#{i}" }/

html,body{
  width: 100%;
  height: 100%;
}
.gallery {
  position:relative;
  perspective:2000px;
  perspective-origin: 0px 0px;
  width: 100%;
  height: 100%;
  overflow:hidden;
  transform-style: preserve-3d;
}
.gallery img{
  position:absolute;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  top:50%;
  left:40%;
  max-width: 150px;
  max-height:150px;
  cursor:pointer;
}

$('.gallery').mousemove(function(event){
  $(this).css({
    "perspective-origin": 
    event.pageX+"px "+
    event.pageY+"px "
  });
});
var body = {value:1}
function loop(){
  $(body).animate(
    {value: '+=1'}
    ,{
    duration:Math.pow(10,4),
    easing:'linear',
    complete:loop,
    step:function(i){
      $('.gallery img').each(function(j){
        var b=(i+j);
        var x= 
            (Math.sin(b)*
            (window.innerWidth*.6));
        var y= 5-(j*.5);
        var z= (Math.cos(b)*20);
        $(this).css({
        'z-index': (z>0)?0:-1,
        '-webkit-filter': 'blur('+(-z*.01)+'em)',
        'transform':
        'translate3d('+x+'px,'+y+'em,'+z+'em)'+  
        'rotateY('+(Math.cos(b)*180)+'deg) ',
      });
      })
    }
  })
}
loop();
//
var gui = new dat.GUI();
gui.add(window,'loop');
gui.add(window,'stop');
function stop(){
  $(body).stop();
}