Bubble Example

components.bubble-banner.js

import Ember from 'ember';

function getRandomElement(items) {
 	return items[Math.floor(items.length * Math.random())];
}

function getRandomBetween(min, max) {
	return Math.random() * (max - min + 1) + min;
}

function getRandomIntBetween(min, max) {
  return Math.floor(getRandomBetween(min, max));
};

function updateBubble(bubble, now) {
  bubble.set('duration', getRandomIntBetween(3, 10));
  bubble.set('until', now + bubble.duration * 1000);
  bubble.set('left', getRandomIntBetween(-100, 800));
  bubble.set('top', getRandomIntBetween(-100, 400));
};

const UPDATE_INTERVAL = 500;
    
export default Ember.Component.extend({
  numBubbles: 10,
  
  colors: ['red', 'green', 'yellow', 'blue'],
  
  sizes: ['small', 'medium', 'large'],
  
  classNames: ['banner'],
  
  bubbles: Ember.computed(function() {   
    return new Array(this.get('numBubbles')).fill(0).map(_ => {
      const bubble = Ember.Object.create({
      	color: getRandomElement(this.get('colors')),
      	size: getRandomElement(this.get('sizes'))
      });
      updateBubble(bubble,Number.NEGATIVE_INFINITY);
      return bubble;
    });
  }),
  
  _update() {
    const now = performance.now();    
    const updatableBubbles = this.get('bubbles').filter(bubble => (bubble.get('until') || 0) < now);
    updatableBubbles.forEach(bubble => {      
			updateBubble(bubble, now);
    });
  },
  
  update() {
    const harness = () => {
      const id = setTimeout(() => {
        this._update();
        harness();          
      }, UPDATE_INTERVAL);
      this.set('ongoing', id);
    };
    harness();
  },
   
  didInsertElement() {
		this.update();
  },
});

controllers.application.js

import Ember from 'ember';

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

helpers.bubble-classes.js

import Ember from 'ember';

export function bubbleClasses([{ color, size }]/*, hash*/) {
  return Ember.String.htmlSafe(`backgroundColor--${color} bubble--size--${size}`);
}

export default Ember.Helper.helper(bubbleClasses);

helpers.bubble-style.js

import Ember from 'ember';

export function bubbleStyle([{ top, left, duration }],/*, hash*/) {
  return Ember.String.htmlSafe(`transform: translate3d(${left}px,${top}px, 0px); transition-duration: ${duration}s`);
}

export default Ember.Helper.helper(bubbleStyle);

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: transform;
  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}}
{{#each bubbles as |bubble|}}
	<div class="bubble {{bubble-classes bubble}}" style="{{bubble-style bubble duration=bubble.duration}}"></div>
{{/each}}

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"
  }
}