mixin pc(count)
  -for (var x = 0; x < count; x++)
    .mon

- var total = "[<span>1</span>]";
.wrap
  h2 Virtual desktops !{total}
  input(
    id="ctl"
    type="range"
    min="1"
    step="1"
    value="1"
  )
  .locator
    each idx in [5, 4, 3, 2, 1]
      div(class=`f${idx}`)
        +pc(idx)

body {
  background: #fadfad;
  background: #ffffee;
}

.locator {
  position: relative;
/*   border: 1px dashed; */
  margin-top: 7vmin;
  text-align: center;
}

div [class^=f] {
  position: absolute;
  /* display: inline-block; 
      border: 1px dotted red;
      text-align: center;*/
  transform-origin: 50% -100%;
  top: 0;
  width: 100%;
}

.f2 {
  -webkit-filter: brightness(150%);
  transform: scale(.9);
}

.f3 {
  -webkit-filter: brightness(180%) blur(1px);
  transform: scale(.8);
}

.f4 {
  -webkit-filter: brightness(210%) blur(2px);
  transform: scale(.7);
}

.f5 {
  -webkit-filter: brightness(250%) blur(3px);
  transform: scale(.6);
}

.mon {
  width: 100px;
  height: 45px;
  background: #689;
  border: 4px solid #467;
  border-radius: 5px;
  position: relative;
  display: inline-block;
  /* float: right; */
  transform-origin: 50% 100%;
  opacity: 0;
  transition: all .3s linear;
  transform: scale(1);
}

.f1 .mon {
  opacity: 1;
}

.mon:after {
  content: "";
  position: absolute;
  display: block;
  background: #356;
  width: 40%;
  height: 30%;
  left: 50%;
  top: 45px;
  transform: translateX(-50%);
  z-index: -1;
}

.mon:before {
  content: "";
  position: absolute;
  background: #478;
  display: block;
  width: 70%;
  height: 5px;
  left: 50%;
  top: 55px;
  transform: translateX(-50%);
  box-shadow: 0 1px 10px;
}

.wrap {
  width: 600px;
  margin: auto;
}

h2 {
  font-family: sans-serif;
  text-align: center;
  letter-spacing: .5em;
  color: #567;
}

h2 span {
  font-family: Monospace;
  margin: 0 1em;
  color: #234;
}

#ctl {
  margin-top: 3vmin;
  width: 100%;
  box-shadow: 0 0 10px inset;
  background: #456;
}

var mons = $(".mon");
[].reverse.call(mons);
$('#ctl').attr('max', mons.length);
$('#ctl').on('input', function() {
  var $this = $(this);
  $('h2 span').html(this.value);
  mons.each(function(i, x) {
    if (i > $this.val() - 1) {
      $(x).css({'opacity': 0,'transform':'scale(.3)'});
    } else {
      $(x).css({'opacity': 1,'transform':'scale(1)'});
    }
  })
})