Q:

Blurred moving effect in JavaScript?

A client wants an effect like FETBlurryLight only without Flash.
Does anyone know something like that implemented in JavaScript?
if there is no such effect, are there good libraries one could use to create one? Or is calculating the pixels on a canvas the way to go?

A:

You could do this manually. If you want it for text, split all words/characters into spans and all give them a large shadow, the same as the text color and animate that gone.
For images you can use css3's blur, but that isn't broadly supported.

Example for text:
.OneWord{
    color: rgba(255,255,255, 1); /* white, 100% opacity */
    text-shadow: 0 0 0 0 rgba(255,255,255, 1); /* same for order */
    transition: color 1s, text-shadow 1s; /* create the animation */
    -webkit-transition: color 1s, text-shadow 1s; /* create the animation */
}

.PreFocus{
    color: rgba(255,255,255, 0); /* start white, 0% opacity */
    text-shadow: 0 0 0 0 rgba(255,255,255, 0); /* same for shadow */
}

Now just loop through the items and remove the classes one by one, say 100ms delay between them, but you might need to tweek it a bit.  

Made this simple demo, looking sexier than expected  
Even sexier, larger font + more blurry
And a first step to reverse

I'd love to see more variants to this, feel free to edit my post with forks on my fiddle :)

