Ghosttyper in Ember

controllers.application.js

import Ember from 'ember';

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

controllers.foo.js

export default Ember.Controller.extend({
  init: function(){
    this._super();
    var code = this.get('model.cnt',0);
    Ember.run.later(code.chooseLetter, 500);
  },
 code: Ember.computed.alias('model.cnt',0),
  growingCode: '',
  chooseLetter: function(){
    this.set('growingCode', this.substring(0,3));
  }
});

router.js

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: 'none'
});

Router.map(function() {
  this.route('foo', {path: '/'});
});

export default Router;

routes.foo.js

export default Ember.Route.extend({
  	model:function() {
      return [{
    id: 1,
   name: 'texttemplate',
   cnt: 'Who are you?' 
  }];
                      }
});

routes.index.js

export default Ember.Route.extend({
  	model: return 
  {id: 1,
   name: 'texttemplate',
   content: 'Who are you?' 
  }
});

styles.app.css

body { 
color: #00ff66; 
background-color: #222; 
font-family: monospace, Arial, sans-serif;
font-weight: bold;  
font-size: 18px;
}

p{
-webkit-transition: all 2s ease-out;
-moz-tranistion:  all 2s ease-out;
-o-transition: all 2s ease-out;
transition: all 2s ease-out;
}
@keyframes blink{
0%{opacity: 0;}
30%{opacity: 1;}

}
.cursor{
-webkit-animation:  blink .9s ease-out 0s infinite normal
-moz-animation:  blink .9s ease-out 0s infinite normal
-o-animation:  blink .9s ease-out 0s infinite normal;
animation: blink .9s ease-out 0s infinite normal;
}

templates.application.hbs

{{outlet}}

templates.foo.hbs

{{#each model as |code|}}
<p class="coding-block">{{growingCode}}<span class="cursor">|</span></p>
{{/each}}
<p>hi</p>