Text Scramble

HTML

<script src="http://jsfiddle.net/@import%20url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,300,500,700,500italic,400italic,700italic,300italic,100italic);"></script>
<script src="https://rawgithub.com/moon/tween/master/tween.js"></script>
<div class="terminal">
    <div class="block table">
        <div class="row">$ cat about.md</div>
        <div class="row">&nbsp;</div>
        <div class="row">
            > Hi, I'm Justin. I'm a creative developer from London<br/>
            > I'm the co-founder of Moon and Stuvio<br/>
            > Previously Google Creative Lab &amp; Qwiki
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">$ ls -la experiments</div>
        <div class="row">&nbsp;</adiv>
    </div>
    <div id="typer" class="block table">
        <!--
        <div class="row">
            <div class="cell light">-rw-r--r--</div>
            <div class="cell light">Jun 25 2013</div>
            <div class="cell">index.html</div>
        </div>
        <div class="row">
            <div class="cell light">-rw-r--r--</div>
            <div class="cell light">Jun 25 2013</div>
            <div class="cell">something-else.js</div>
        </div>
        -->
    </div>
    <div class="cursor">guest@soulwire:$ <span class="input"></span><span class="pulse">_</span></div>
</div>

CSS

html, body {
    /*-webkit-font-smoothing: antialiased;*/
    font-family: 'Roboto Mono', monospace;
    line-height: 1.33;
    background: #141E27;
    margin: 0;
    color: #f2f2f2;
}

@-webkit-keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.25; }
    100% { opacity: 1; }
}

.cursor {
    padding-top: 10px;
}

.pulse {
    -webkit-animation: pulse 1.25s linear 0s;
    -webkit-animation-iteration-count: infinite; 
}

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.terminal {
    font-weight: 300;
    font-size: 12px;
    margin: 50px auto;
    max-width: 550px;
    width: 80%;
}

.light {
    /*color: #888;*/
    opacity: 0.33;
}

.table {
    display: table;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
    padding: 2px 5px;
}

JavaScript

var scramble = '█+÷~.–<>/\\{}'.split('');
var cursors = '___█'.split('');
var cursor = '+';

// -▌▌█◙▓

function type(el, content, duration, delay) {

    var proxy = {progress:0};
    var length = content.length;
    var output = [];
    
    for (var i = 0, n = content.length; i < n; i++) {
        output[i] = '&nbsp;';
    }
    
    Tween.to(proxy, duration || 1.0, {progress:1})
        .wait(delay || 0)
        .ease(Tween.Quad.inOut)
        .step(function(tween) {
        	
	        // 1. fixed
        	// 2. scrambled
        	// 3. cursor
        	// [a][b][#][#][-][-][ ][ ]

            var n1 = Math.pow(proxy.progress, 3.0) * length;
            var n2 = Math.pow(proxy.progress, 0.25) * length;
	        var n3 = Math.pow(proxy.progress, 0.1) * length;
        
        	for (var i = 0; i <= n3; i++) {
                if (i > n2) { // 3. cursor
                    output[i] = cursors[Math.floor(Math.random() * cursors.length)];
                } else if (i > n1 /*|| Math.random() > tween.progress*/) { // 2. scrambled
                    if (output[i] === '' || Math.random() < 0.1) {
                        output[i] = scramble[Math.floor(Math.random() * scramble.length)];
                    }
                } else { // 1. fixed
                    output[i] = content.substr(i, 1);
                }
            }
        
	        output[~~n3] = cursor;
        
            el.innerHTML = output.join('');
        })
        .done(function() {
            el.innerHTML = content;
        });
}

var block = document.querySelector('#typer');

function addLine(a, b, c) {
    
    var duration = 0.33;
    var step = 0.1;
    
    var row, cell;
    row = document.createElement('div');
    row.className = 'row';
    
    cell = document.createElement('div');
    cell.className = 'cell light';
    row.appendChild(cell);
    type(cell, a, duration, step * 0);
    
    cell = document.createElement('div');
    cell.className = 'cell light';
   ...