<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<div>A Language That Can </div>
<div id = "holder">
   <p>Speak In Many Voices</p>
<!--    <p>Voices</p> -->
</div>

body{ 
background:#fcfcfc;
  font-size: 16px;
 font-family: 'Oswald', sans-serif;
  color: #444;
   border: 5px solid #444;
    width: 95%;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}

div{
  font-size: 220%;
}
/* body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
} */
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 40%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}

Raphael(function () {
    var hldr = document.getElementById("holder"),
        text = hldr.innerText.replace(/^\s+|\s+$/g, "");
    hldr.innerHTML = "";
    var R = Raphael("holder", 640, 480),
        txt = [],
        attr = {font: "36px Helvetica", opacity: 0.5};
    txt[0] = R.text(320, 240, text).attr(attr).attr({fill: "#323545"});
    txt[1] = R.text(320, 240, text).attr(attr).attr({fill: "#3c457d"});
    txt[2] = R.text(320, 240, text).attr(attr).attr({fill: "#B1BBEC"});
  txt[3] = R.text(320, 240, text).attr(attr).attr({fill: "#536ADE"});
   txt[4] = R.text(320, 240, text).attr(attr).attr({fill: "#E6E8F4"});
    var mouse = null, rot = 0;
    document.onmousemove = function (e) {
        e = e || event;
        if (mouse == null) {
            mouse = e.clientX;
            return;
        }
        rot += e.clientX - mouse;
        txt[0].attr({transform: "r" + rot});
        txt[1].attr({transform: "r" + rot / 1.2});
        txt[2].attr({transform: "r" + rot / 1.5});
        txt[3].attr({transform: "r" + rot / 2});
      txt[4].attr({transform: "r" + rot / 2.5});
        mouse = e.pageX;
        R.safari();
    };
});

// window.onload = function() {  
//     var paper = new Raphael(document.getElementById('holder'), 500, 500); 
//     // paper= Raphael("holder", 640, 480),
//         txt = [],
//         attr = {font: "50px Helvetica", opacity: 0.5};
//     txt[0] = paper.text(320, 240, text).attr(attr).attr({fill: "#0f0"});
//     txt[1] = paper.text(320, 240, text).attr(attr).attr({fill: "#f00"});
//     txt[2] = paper.text(320, 240, text).attr(attr).attr({fill: "#00f"});
//     var mouse = null, rot = 0;
//     document.onmousemove = function (e) {
//         e = e || event;
//         if (mouse == null) {
//             mouse = e.clientX;
//             return;
//         }
//         rot += e.clientX - mouse;
//         txt[0].attr({transform: "r" + rot});
//         txt[1].attr({transform: "r" + rot / 1.5});
//         txt[2].attr({transform: "r" + rot / 2});
//         mouse = e.pageX;
//         Paper.safari();
//     };
//     }