That said, the performance on this is too poor to use as is.

Really? I found it to be super responsive (Firefox on Linux).

But yeah, i agree, for things like games this would be really cool.

If you're designing MYST for the web browser; probably. If some small percentage of luddites can't get past your fancy character creation screen, then the game is (likely) not for them. Their frustration is worth it for the total immersion for the ones that can. There are a number of environments in which a cohesive experience trumps the drawbacks of a fiddly interface. But if someone is wanting to convert sales of a B2B accounting application, or needs to create batch data entry forms for said application, then things need to be weighed differently.

Being a good designer isn't about knowing how to recreate [software from the 90s] in Javascript or CSS3. It's about making lots of little decisions like this all the time.

Usefulness is overrated. Would no human ever had followed the craze of useless endeavors, we would still all be living in caves, and would not even draw with fingers on theirs walls.

On desktop it's super cool though. Kudo's!

I guess it makes the silly assumption that pressing keys types letters — which is not true with CJK text input (IMEs).

You could have ended your sentence there.

[1] https://emshort.wordpress.com/2008/05/24/make-it-juicy/

[2] https://www.youtube.com/watch?v=Fy0aCDmgnxg <-- I'd recommend anyone who cares about making and/or understanding games to watch this talk.

The whole page flashes and flickers for me on Safari 6.0.2 on Mac OS X 10.8.2.

Input of extended characters also doesn't work. Option-[aeiou] doesn't enter any characters. Holding [aeiou] prints the base character but fails to update once a modifier is selected.

The antialising algorithm alternates between subpixel and greyscale, causing flickering changes to the boldness of the text.

All in all, very very broken.

Repro:

Delete the intro text, type 'wat'. Hit 'home'. Hit 'delete' three times. Observe breakage.

I do it for blogs that have fancy title css, scripted comments... just about for anything that's unnessesary junk and therefore just a pretty annoyance.

It's fun to look at and play with, and I know it has some useful applications, but it quickly becomes incredibly fragile and is guaranteed to waste time and effort that can, and should, be spent on other stuff. Unless of course there is nothing left to do and you're just looking for ways to torture some poor soul hopped up on Red Bull or Mountain Dew.

That said, I definitely do encourage anyone interested to explore how this stuff works. My experience has been that design pretty much overlooks input behavior in general, but there are some pretty impressive things that can be done now without painting yourself into a corner and exploring stuff like this is probably one of the fastest ways to figure out where the boundaries are.

That being said, I think these could be really neat in certain places and maybe with a bit more testing this could be super useful.

slightly more constructive response

Chrome 27.0.1423.0 dev-m

With measure, and applying it wisely, this can be a good thing. But for long texts, it's a madness.

How can I use effect2 without having to change/toggle the class (i.e. effect2 class onPageLoad)??

...still not working...

I thought someone might want to know.

also, the demo is lacking in basic usuability-- at least have the form reselected automatically when you change between effects.

Eliminates the flashing completely. It introduces some weird safari behavior so only include it if you know what you're doing.

A better approach is to apply -webkit-transform: translate3d(0, 0, 0) to only those nodes that will animate.

Your mobile viewers, especially, will be glad that your page doesn't kill the browser (when it goes OOM)