typewriter

components.terminal-simulator.js

import Ember from 'ember';

export default Ember.Component.extend({
  //text:['abc','def','hijk'],
  text: 'Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.',
  didRender(){
    this.typeText();
  },
  typeText(){
    let str = this.get('text');
  	let i = 0;
    const loop = function(){
      let text = str.slice(0, ++i);
      document.getElementById('terminal').innerHTML = text + '_';
      if (text === str){
        return;
      }
      setTimeout(loop, 80);
  	}
		loop();
  }
});

controllers.application.js

import Ember from 'ember';

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

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{terminal-simulator}}
<br>
<br>

templates.components.terminal-simulator.hbs

<div id="terminal"></div>

twiddle.json

{
  "version": "0.7.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": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember-template-compiler.js"
  }
}