<div class="contrain" id="js-constrain"></div>





















<!-- ABOUT LINK -->
<style> .what:hover { cursor: pointer; opacity: .75; } .what {display: block;width: 28px;height: 28px;position: fixed;right: 20px;bottom: 20px;background-size: 100% 100%; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjNweCIgaGVpZ2h0PSIyM3B4IiB2aWV3Qm94PSIwIDAgMjMgMjMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2xpY2UgMTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPHBhdGggZD0iTTExLjUsMjIgQzE3LjI5ODk4OTksMjIgMjIsMTcuMjk4OTg5OSAyMiwxMS41IEMyMiw1LjcwMTAxMDEzIDE3LjI5ODk4OTksMSAxMS41LDEgQzUuNzAxMDEwMTMsMSAxLDUuNzAxMDEwMTMgMSwxMS41IEMxLDE3LjI5ODk4OTkgNS43MDEwMTAxMywyMiAxMS41LDIyIFoiIGlkPSJPdmFsIiBzdHJva2U9IiMzQTA1M0EiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik0xMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgTDEwLjc4NTE1NjIsMTMuNDYyODkwNiBDMTAuNzgxMjUsMTMuMjQ4MDQ1OCAxMC43NzkyOTY5LDEzLjExNzE4NzcgMTAuNzc5Mjk2OSwxMy4wNzAzMTI1IEMxMC43NzkyOTY5LDEyLjU4NTkzNTEgMTAuODU5Mzc0MiwxMi4xODc1MDE2IDExLjAxOTUzMTIsMTEuODc1IEMxMS4xNzk2ODgzLDExLjU2MjQ5ODQgMTEuNDk5OTk3NiwxMS4yMTA5Mzk1IDExLjk4MDQ2ODgsMTAuODIwMzEyNSBDMTIuNDYwOTM5OSwxMC40Mjk2ODU1IDEyLjc0ODA0NjQsMTAuMTczODI4NyAxMi44NDE3OTY5LDEwLjA1MjczNDQgQzEyLjk4NjMyODgsOS44NjEzMjcxNyAxMy4wNTg1OTM4LDkuNjUwMzkxNzggMTMuMDU4NTkzOCw5LjQxOTkyMTg4IEMxMy4wNTg1OTM4LDkuMDk5NjA3NzcgMTIuOTMwNjY1Myw4LjgyNTE5NjQ2IDEyLjY3NDgwNDcsOC41OTY2Nzk2OSBDMTIuNDE4OTQ0LDguMzY4MTYyOTIgMTIuMDc0MjIwOSw4LjI1MzkwNjI1IDExLjY0MDYyNSw4LjI1MzkwNjI1IEMxMS4yMjI2NTQyLDguMjUzOTA2MjUgMTAuODczMDQ4Myw4LjM3MzA0NTY4IDEwLjU5MTc5NjksOC42MTEzMjgxMiBDMTAuMzEwNTQ1NSw4Ljg0OTYxMDU3IDEwLjExNzE4OCw5LjIxMjg4ODE4IDEwLjAxMTcxODgsOS43MDExNzE4OCBMOC41LDkuNTEzNjcxODggQzguNTQyOTY4OTYsOC44MTQ0NDk2MyA4Ljg0MDgxNzU1LDguMjIwNzA1NTcgOS4zOTM1NTQ2OSw3LjczMjQyMTg4IEM5Ljk0NjI5MTgzLDcuMjQ0MTM4MTggMTAuNjcxODcwNSw3IDExLjU3MDMxMjUsNyBDMTIuNTE1NjI5Nyw3IDEzLjI2NzU3NTMsNy4yNDcwNjc4NCAxMy44MjYxNzE5LDcuNzQxMjEwOTQgQzE0LjM4NDc2ODQsOC4yMzUzNTQwMyAxNC42NjQwNjI1LDguODEwNTQzNTkgMTQuNjY0MDYyNSw5LjQ2Njc5Njg4IEMxNC42NjQwNjI1LDkuODMwMDc5OTQgMTQuNTYxNTI0NSwxMC4xNzM4MjY1IDE0LjM1NjQ0NTMsMTAuNDk4MDQ2OSBDMTQuMTUxMzY2MiwxMC44MjIyNjcyIDEzLjcxMjg5NCwxMS4yNjM2NjkxIDEzLjA0MTAxNTYsMTEuODIyMjY1NiBDMTIuNjkzMzU3NiwxMi4xMTEzMjk2IDEyLjQ3NzUzOTUsMTIuMzQzNzQ5MSAxMi4zOTM1NTQ3LDEyLjUxOTUzMTIgQzEyLjMwOTU2OTksMTIuNjk1MzEzNCAxMi4yNzE0ODQzLDEzLjAwOTc2MzQgMTIuMjc5Mjk2OSwxMy40NjI4OTA2IEwxMi4yNzkyOTY5LDEzLjQ2Mjg5MDYgWiBNMTAuNzg1MTU2MiwxNS42Nzc3MzQ0IEwxMC43ODUxNTYyLDE0LjAzMTI1IEwxMi40MzE2NDA2LDE0LjAzMTI1IEwxMi40MzE2NDA2LDE1LjY3NzczNDQgTDEwLjc4NTE1NjIsMTUuNjc3NzM0NCBaIiBpZD0iPyIgZmlsbD0iIzNBMDUzQSI+PC9wYXRoPiAgICA8L2c+PC9zdmc+);}</style><a href="http://mojs.io/tutorials/burst/" class="what" title="tutorial" target="_blank"></a>
<!-- ABOUT LINK -->

body, html {
  padding: 0;
  margin:  0;
  width: 100%;
  height: 100%;
  // overflow: hidden;
}

body {
  background: rgba(241, 226, 215, 0.2);
  background: #777;
  position: relative;
  background: #EA485C;
}

const COLORS = {
  RED:      '#FD5061',
  YELLOW:   '#FFCEA5',
  BLACK:    '#29363B',
  WHITE:    'white',
  VINOUS:   '#A50710'
}

const DURATION = 500;
const CNT = 10;
const PARENT_H = 50;
const BURST_R = 75;
const SHIFT = 300;

const makeDust = (dir = -1) => {
  
  const parent = new mojs.Shape({
    left: 0,  top: 0,
    width:        200,
    height:       50,
    radius:       0,
    x:            { 0 : dir*SHIFT  },
    duration:     1.2*DURATION,
    isShowStart:  true,
    isTimelineLess: true,
    isForce3d:    true
  });

  parent.el.style['overflow'] = 'hidden';

  const burst = new mojs.Burst({
    parent:   parent.el,
    count:    CNT,
    top:      PARENT_H + BURST_R,
    degree:   90,
    radius:   BURST_R,
    angle:    ( dir === -1) ? { [-90] : 40 } : { [0] : -130 },
    children: {
      fill:       'white',
      delay:      ( dir === -1 )
                      ? `stagger(${DURATION}, -${DURATION/CNT})`
                      : `stagger(${DURATION/CNT})`,
      radius:     'rand(8, 25)',
      direction:  -1,
      isSwirl:    true,
      isForce3d: true
    }
  });

  const fadeBurst = new mojs.Burst({
    parent:     parent.el,
    count:      2,
    degree:     0,
    angle:      -1*dir*75,
    radius:     { 0 : 100 },
    top:        '90%',
    timeline:   { delay: .8*DURATION },
    children: {
      fill: 'white',
      pathScale: [ .65, 1 ],
      radius: 'rand(12, 15)',
      direction: [ dir, -1*dir ],
      isSwirl:    true,
      isForce3d: true
    }
  }); 

  const timeline = new mojs.Timeline();
  timeline.add( parent, burst, fadeBurst );

  return { parent, timeline };
}

const circle = new mojs.Shape({
  left: 0, top: 0,
  strokeWidth: 10,
  fill:     'none',
  radius:   150,
  scale:    { 0 : 1 },
  opacity:  { 1: 0 },
  shape:    'circle',
  stroke:   'white',
  strokeWidth: 10,
  fill:     'none',
  duration: 1.5*DURATION,
  isForce3d: true,
  isTimelineLess: true,
});

const cloud = new mojs.Burst({
  left: 0, top: 0,
  radius:   { 4: 49 },
  angle:    45,
  count:    12,
  children: {
    radius:       10,
    fill:         'white',
    scale:        { 1: 0, easing: 'sin.in' },
    pathScale:    [ .7, null ],
    degreeShift:  [ 13, null ],
    duration:     [ 500, 700 ],
    isShowEnd:    false,
    isForce3d:    true
  }
});

const burst = new mojs.Burst({
  left: 0, top: 0,
  radius: { 0: 280 },
  count: 2,
  angle: 90,
  children: {
    shape: 'rect',
    fill: COLORS.VINOUS ,
    radius: 15,
    duration: DURATION,
    isForce3d: true
  }
});

const burst2 = new mojs.Burst({
  left: 0, top: 0,
  count:    5,
  radius:   { 0: 150 },
  angle:    90,
  children: {
    shape:    'line',
    stroke:   COLORS.VINOUS,
    strokeWidth: 5,
    strokeLinecap: 'round',
    radius:   25,
    // angle:    {  0: 360  },
    scale:    1,
    scaleX:   { 1: 0 },
    duration: DURATION,
    isForce3d: true
  }
});

const dust1 = makeDust(-1);
const dust2 = makeDust(1);

const timeline = new mojs.Timeline();
timeline
  .add( dust1.timeline, dust2.timeline )
  .add( circle, cloud, burst, burst2 )

document.addEventListener( 'click', function (e) {
  const x = e.pageX,
        y = e.pageY;
  
  const coords = { x, y };
  circle.tune(coords); cloud.tune(coords);
  burst.tune(coords); burst2.tune(coords);
  dust1.parent.tune({ x: { [x] : x - SHIFT }, y });
  dust2.parent.tune({ x: { [x] : x + SHIFT }, y });
  timeline.replay();
});

// new MojsPlayer({ add: timeline, isPlaying: true, isRepeat: true });