Here is a function I wrote that, with the help of jQuery, will randomize a bunch of properties Here's some code... please, be brutal
function twisty (elem, container) {
    elem = $('.some-elem');
    container = $('.container').hide();
    var spots = elem.text().replace(' ', '').split('');
    for(var i = 0; i &lt; 300; i++) {
    $('&lt;span/&gt;', {
        'class': 'spot '+ i,
        text: spots[Math.ceil(Math.random() * spots.length-1)] ,
        css: {
            fontSize: Math.ceil(Math.random() * 50),
            left: Math.ceil(Math.random() * 1000),
            top: Math.ceil(Math.random() * 30),
            bottom: Math.ceil(Math.random() * 50),
            opacity: Math.random() / 3,
            color: 'rgb('+ Math.ceil(Math.random() * 70) + ',' +
                           Math.ceil(Math.random() * 70) + ',' +
                           Math.ceil(Math.random() * 70) + ')',
            transform: 'rotate(' + Math.ceil(Math.random() * 360)  + 'deg)'
        }
        }).appendTo(container.fadeIn(800));
    }
}

jQuery(document).ready(function($) {
twisty();
$('.some-elem').on('click', function(){
    $('.container').hide();
    $('span.spot').remove();
    twisty();
});

});
Here's the html
&lt;div class=&quot;content&quot;&gt;
    &lt;h2 class=&quot;some-elem&quot;&gt;hello world&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;&lt;/h2&gt;
&lt;/div&gt;

Here's a link to the fiddle output
Probably not the most useful piece of code, but some things I'm trying to learn are:

How to extend native javascript objects (so how could i minimize the
excessive use of calling Math.random)
How to make my code as clean and as portable as possible
How to animate stuff
How to do all of the above without using jQuery
How to extend jQuery

But mostly, I'm looking for feedback :]
edit: fixed so it actually fades in
(updated link to include some css, cause the transform prop wasn't working)
Notes

I had a go at converting it to native JavaScript, was fun :P Pretty nifty bit of code. Here are my notes:


I pulled Math.ceil(Math.random() * x)) out into a function randomInt(x), I recommend against extending native JavaScript objects. They tend to be difficult problems to debug, just create a new function instead.
I would probably prefer to have .container outside of .some-elem or programmatically generated. I didn't make this change though. The main issue with having it inside .some-elem next to the text is that when you attempt to fill spots in JS you need to get rid of the .container markup from .innerHTML as it comes out like this:

hello world&lt;div class="container"&gt;&lt;/div&gt;


Which leads to a bit of ugly code to extract everything before the '&lt;':

var spots = [].splice.call(elem.innerHTML, 0, elem.innerHTML.indexOf('&lt;'));

You can add the speak: none; to .container so screen readers don't read "hello world lakmsdlkaslkadsadfas...".
You can extend jQuery like so:

$.fn.customFunction = function () {
    console.log(this);
}

$('.some-elem').customFunction();

I've used CSS3 transitions in place of $.fadeIn(), browser support isn't quite as good (looking at you IE), but the implementation is worth it in my opinion. Especially when most people wouldn't even notice like this super subtle fade in.
I'm not so sure about adding a number as a class name, I don't think it's legal to have class names start with a number.
Your indentation when you were applying everything to the &lt;span&gt; was a little ugly :P
Overall it was a pretty decent and clean jQuery implementation.


Code

jsFiddle

HTML

&lt;div class="content"&gt;
    &lt;h2 class="some-elem"&gt;hello world&lt;div class="container"&gt;&lt;/div&gt;&lt;/h2&gt;    
&lt;/div&gt;


CSS

body { background: black; font-family: consolas;}

div.content {
    background: white;
    opacity: 0.9;
    min-height: 1000px;
    width: 960px;
    margin: auto;
    color: black;
    padding: 10px;
    list-style: none;
    position: relative;
}


div.content &gt; .some-elem {
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 1), 0px -1px 2px rgba(0, 0, 0, 1);
    border-bottom: 7px solid #41919B;
    border-top: 7px solid #41919B;
    border-right: 1px solid #BDBDBD;
    border-left: 1px solid #BDBDBD;
    padding-bottom: 7px;
    box-shadow: 0px 11px 17px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.6);
    border-radius: 5px 5px 5px 5px;
    text-align: center;
    color: black;
    width: 960px;
    overflow: hidden;
    position: relative;
    letter-spacing: 11px;
    line-height: 60px;
    cursor: pointer;
}
div.content &gt; .some-elem:hover {
    color: #fff;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 1), 0px -1px 2px rgba(0, 0, 0, 1);
}

span.spot {
    position: absolute;
    top: 0px;
    z-index: -1;
    text-shadow: none;
    box-shadow: none;
}

.container {
    opacity:0;
    -webkit-transition:opacity .8s ease;
    -moz-transition:opacity .8s ease;
    transition:opacity .8s ease;
    speak: none;
}

.container.show {
    opacity:1;
}


JS

function twisty(elemClass, containerClass) {
    var elem = document.getElementsByClassName('some-elem')[0];
    var container = elem.getElementsByClassName('container')[0];
    var spots = [].splice.call(elem.innerHTML, 0, elem.innerHTML.indexOf('&lt;'));

    for (var i = 0; i &lt; 300; i++) {
        var span = document.createElement('span');
        var color = 'rgb('+ randomInt(70) + ',' +
            randomInt(70) + ',' +
            randomInt(70) + ')';
        var transform = 'rotate(' + randomInt(360) + 'deg)';

        span.innerHTML = spots[randomInt(spots.length - 1)];
        span.className = 'spot '+ i;
        span.style.fontSize = randomInt(50) + 'px';
        span.style.left = randomInt(1000) + 'px';
        span.style.top = randomInt(30) + 'px';
        span.style.bottom = randomInt(50) + 'px';
        span.style.opacity = Math.random() / 3;
        span.style.color = color;
        span.style.webkitTransform = transform;
        span.style.mozTransform = transform;
        span.style.transform = transform;
        container.appendChild(span);
    }

    container.classList.add('show');
}
twisty();

document.getElementsByClassName('some-elem')[0].onclick = function () {
    var container = document.getElementsByClassName('container')[0];
    container.classList.remove('show');
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }
    twisty();
};

function randomInt(max) {
    return Math.ceil(Math.random() * max);
}