Inspired by a friend who was learning JavaScript and playing with some effects, I took his version and optimized it. Here you can see how letters shuffle randomly on mouse hover, and on mouse out they come back.

Letters are positioned absolutely, and the script that animate them is is CoffeScript:

# shuffle function
do -> Array::shuffle ?= ->
  for i in [@length-1..1]
    j = Math.floor Math.random() * (i + 1)
    [@[i], @[j]] = [@[j], @[i]]
  @

# global variables
$logo = $('#logo')
$letters = null

# on dom ready
$ ->
  # get container's letters
  @letters = $logo.text().split("")

  # init new container html
  @html = ""

  # create all letters
  for i in [[email protected]]
    @html += "<i data-index='#{i}' style='left:#{i*0.5}em'>#{@letters[i]}</i>"

  # insest letters in container
  $logo.html @html

  # cache letters
  $letters = $logo.children 'i'

$logo
  .mouseenter ->
    # shuffle indexes
    shuffled_indexes = [0..$letters.length-1].shuffle()

    # animate letters to new positions
    $letters.each (index, letter) ->
      position = shuffled_indexes[index]
      delta = (index - position)*0.5
      $(letter).stop(true).animate {left: "-="+delta+"em"}, 500

  .mouseleave ->
    # animate letters to old positions
    $letters.each (index, letter) ->
      $letter = $(letter)
      delta = $letter.data('index')*0.5
      $letter.stop(true).animate {left: delta+"em"}, 500