Bubbles!

components.bubble-banner.js

import Ember from 'ember';

export default Ember.Component.extend({
  numBubbles: 10,
  
  colors: ['red', 'green', 'yellow', 'blue'],
  
  sizes: ['small', 'medium', 'large'],
  
  classNames: ['banner'],
  
  getRandomIntBetween(min, max) {
	  return Math.floor(this.getRandomBetween(min, max));
  },
  
  getRandomBetween(min, max) {
	  return Math.random() * (max - min + 1) + min;
  },
  
  roundTo(number, precision) {
    var factor = Math.pow(10, precision);
    var tempNumber = number * factor;
    var roundedTempNumber = Math.round(tempNumber);
    return roundedTempNumber / factor;
  },
  
  moveRandomly($bubble) {
    let randomX = this.getRandomIntBetween(-100, 800);
    let randomY = this.getRandomIntBetween(-100, 400);
    let randomDuration = this.getRandomIntBetween(3, 10);
    
    $bubble.css({
      'transitionDuration': `${randomDuration}s`,
      'left': `${randomX}px`,
      'top': `${randomY}px`
    });
    
    // Move again when yer done
    setTimeout(this.moveRandomly.bind(this, $bubble), randomDuration * 1000);
  },
   
  didInsertElement() {
    let $el = this.$();
        
    for (var i = 0; i < this.get('numBubbles'); i++) {
      let $bubble = $('<div>');
      let colors = this.get('colors');
      let sizes = this.get('sizes');
      let randomColor = colors[this.getRandomIntBetween(0, colors.length)];
      let randomSize = sizes[this.getRandomIntBetween(0, sizes.length - 1)];
      
      $bubble.addClass('backgroundColor--' + randomColor);
      $bubble.addClass('bubble--size--' + randomSize);
      $bubble.addClass('bubble');
      
      $el.prepend($bubble);
      
      this.moveRandomly($bubble);
    }
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
.backgroundColor--red {
  background: #FA405C;
}
.backgroundColor--green {
  background: #85C525;
}
.backgroundColor--blue {
  background: #062942;
}
.backgroundColor--yellow {
  background: #EDC02B;
}
.banner {
  border-radius: 5px;
  overflow: hidden;
  background: #0d83dd;
  padding: 100px;
  color: white;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
}
.bubble {
  border-radius: 1000px;
  position: absolute;
  transition-property: top, left;
  transition-duration: 3s;
  transition-timing-function: ease-in-out;
  z-index: -1;
}
:root {
  --bubble--size--small: 50px;
  --bubble--blur--small: 50px;
  --bubble--opacity--small: 0.5;
  
  --bubble--size--medium: 100px;
  --bubble--blur--medium: 25px;
  --bubble--opacity--medium: 0.75;
  
  --bubble--size--large: 150px;
  --bubble--blur--large: 5px;
  --bubble--opacity--large: 1;
}

.bubble--size--small {
  width: var(--bubble--size--small);
  height: var(--bubble--size--small);
  //filter: blur(var(--bubble--blur--small));
  opacity: var(--bubble--opacity--small);
}
.bubble--size--medium {
  width: var(--bubble--size--medium);
  height: var(--bubble--size--medium);
  //filter: blur(var(--bubble--blur--medium));
  opacity: var(--bubble--opacity--medium);
}
.bubble--size--large {
  width: var(--bubble--size--large);
  height: var(--bubble--size--large);
  //filter: blur(var(--bubble--blur--large));
  opacity: var(--bubble--opacity--large);
}

templates.application.hbs

{{#bubble-banner}}
	FreshBooks Library Thing
{{/bubble-banner}}

templates.components.bubble-banner.hbs

{{yield}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}