Mailspring/_includes/hero.html

<script>

function runPluginsSequence(callback, almostDone) {
  var grid = {};
  var w = 12;
  var h = 7;
  var gridSizeW = 921 / w;
  var gridSizeH = 640 / h;

  var filled = 0;
  var count = w * h;

  for (var x = 0; x < w; x ++) {
    for (var y = 0; y < h; y ++) {
      grid[x+","+y] = true;
    }
  }

  var shapes = {
    'SquareBig': [[0,0], [0,1], [1,0], [1,1]],
    'L': [[0,0], [0, 1], [0, 2], [1, 2]],
    'L-Small': [[1,1], [0, 1], [1, 0]],
    'L-sideways': [[0,0], [1, 0], [2, 0], [0, 1]],
    'ThreeHorizontal': [[0,0], [1, 0], [2, 0]],
    'TwoHorizontal': [[0,0], [1, 0]],
    'ThreeVertical': [[0,0], [0, 1], [0, 2]],
    'Square': [[0,0]]
  };

  var windowContainer = document.getElementById('window-container');
  var windowDivs = [];

  while (filled < count) {
    var rootX = Math.floor((Math.random() * 112315) % w);
    var rootY = Math.floor((Math.random() * 612312) % h);

    var shapeKeys = Object.keys(shapes);
    for (var i = 0; i < shapeKeys.length; i ++) {
      var shapeKey = shapeKeys[i];
      var shape = shapes[shapeKey];

      var doesFit = true;
      for (var ii = 0; ii < shape.length; ii ++) {
        var gridX = rootX + shape[ii][0];
        var gridY = rootY + shape[ii][1];
        if (grid[gridX+","+gridY] !== true) {
          doesFit = false;
          break;
        }
      }

      if (doesFit) {
        var div = document.createElement('div');
        div.classList.add('part');

        var colorClass = ['color-a', 'color-b', 'color-c', 'color-d', 'color-e'][Math.floor((Math.random() * 10123) % 4)];
        div.classList.add(colorClass);

        div.style.position = 'relative';
        div.style.left = rootX * gridSizeW + "px";
        div.style.top = rootY * gridSizeH + "px";

        var shapeLookup = {};
        for (var ii = 0; ii < shape.length; ii ++) {
          shapeLookup[shape[ii][0]+","+shape[ii][1]] = true;
        }

        var maxExtentX = 0;
        var maxExtentY = 0;
        for (var ii = 0; ii < shape.length; ii ++) {
          var shapeGridX = shape[ii][0];
          var shapeGridY = shape[ii][1];
          var worldGridX = rootX + shapeGridX;
          var worldGridY = rootY + shapeGridY;
          grid[worldGridX+","+worldGridY] = shapeKey;
          filled += 1;

          maxExtentX = Math.max(maxExtentX, shapeGridX + 1);
          maxExtentY = Math.max(maxExtentY, shapeGridY + 1);

          var gridEl = document.createElement('div');
          gridEl.style.position = 'absolute';
          gridEl.style.left = shapeGridX * gridSizeW + 'px';
          gridEl.style.top = shapeGridY * gridSizeH + 'px';
          gridEl.style.width = gridSizeW+'px';
          gridEl.style.height = gridSizeH+'px';
          var gridElInner = document.createElement('div');
          if (shapeLookup[(shapeGridX - 1)+","+shapeGridY]) {
            gridElInner.style.left = '0';
          }
          if (shapeLookup[(shapeGridX + 1)+","+shapeGridY]) {
            gridElInner.style.right = '0';
          }
          if (shapeLookup[shapeGridX+","+(shapeGridY-1)]) {
            gridElInner.style.top = '0';
          }
          if (shapeLookup[shapeGridX+","+(shapeGridY+1)]) {
            gridElInner.style.bottom = '0';
          }
          gridEl.appendChild(gridElInner);
          div.appendChild(gridEl);
        }

        // compute the angle we want to animate it in
        var distFromCenterX = ((rootX + maxExtentX / 2) - w / 2);
        var distFromCenterY = ((rootY + maxExtentY / 2) - h / 2);
        var dist = Math.sqrt(Math.pow(distFromCenterY, 2) + Math.pow(distFromCenterX, 2));
        var angle = Math.atan2(distFromCenterY, distFromCenterX);
        var radius = -100;

        div.style.width = (maxExtentX * gridSizeW) + "px";
        div.style.height = (maxExtentY * gridSizeH) + "px";
        div.style.position = 'absolute';
        div.style.transitionDelay = Math.round(dist / 10.0 * 1700) + 'ms';
        div.style.opacity = 0;
        div.style.transform = 'translate3d('+Math.round(Math.cos(angle) * radius)+'px, '+Math.round(Math.sin(angle) * radius)+'px, 0px) scale3d(0.2,0.2, 1)';
        windowDivs.push(div);
        windowContainer.appendChild(div);
        break;
      }
    }
  }

  setTimeout(function() {
    for (var ii = 0; ii < windowDivs.length; ii++) {
      windowDivs[ii].style.transform = 'translate3d(0,0,0)';
      windowDivs[ii].style.opacity = 1;
    }
  }, 10);

  setTimeout(function() {
    for (var ii = 0; ii < windowDivs.length; ii++) {
      var div = windowDivs[ii];
      for (var x = 0; x < div.children.length; x++) {
        var inner = div.children[x].children[0];
        inner.style.transform = "scale(1.2,1.2)";
      }
      div.classList.add('color-white');
    }
  }, 4400);

  setTimeout(function() {
    for (var ii = 0; ii < windowDivs.length; ii++) {
      var div = windowDivs[ii];
      div.classList.add('color-transparent');
    }
    document.getElementById('plugins-title').style.opacity = 0;
    almostDone();
    setTimeout(function() {
      callback();
    }, 2500);
  }, 5000);
}
</script>

<div id="hero" class="hero">
  <div id="watercolor-left" class="hero-bg" >
    <img id="left-solid" src="{{ site.baseurl }}/images/left.jpg"/><img id="left-trans" src="{{ site.baseurl }}/images/left-trans.png"/>
  </div>
  <div id="watercolor-right" class="hero-bg">
    <img id="right-trans" src="{{ site.baseurl }}/images/right-trans.png"/><img id="right-solid" src="{{ site.baseurl }}/images/right.jpg"/>
  </div>

  <div id="bg-fade"></div>

  <div id="animation-container" class="animation-container">
  </div>
</div>

<div id="hero-text" class="hero-text">
  <h1 style="margin:0;">N1</h1>
  <h4>The extensible, open source mail&nbsp;client.</h4>
  <div class="cta" style="margin-top:40px;">
    <div id="play-intro"><div class="triangle"></div>Play Intro</div>
  </div>
</div>