Stack OverflowStunning graphic effects with javascript
[+54] [22] friol
[2008-10-31 18:58:04]
[ javascript 3d effects ]

Seeing the full javascript rotating 3d cube [1], I was wondering,

What are the most stunning javascript-only effects you've ever seen?

(5) community wiki ? - Valentin Rocher
[+33] [2008-10-31 19:08:14] Pat [ACCEPTED]

the javascript parallax is pretty interesting, here is a demo [1]

Edit: I just found a Firefox add-on that uses this effect for the new tab page.

Auto Dial 3D [2]

Edit2: And someone doing it without javascript at all (just css)

CSS 3D menias [3]

Edit3: Someone using the effect in a great way to tell a story

Hobo Lobo of Hamelin [4]


[+27] [2008-10-31 19:17:19] asterite
(1) I'm waiting for Doom. After all, they've ported it to basically every other platform, right? - ojrac
(3) I just spent the last half hour on this site. Awesome! - Rontologist
(1) Yeah, I love lemmings! - BoboTheCodeMonkey
(2) @Rontologist You got off easy, I just killed 3 and a half hours. I had to stop when I got to a level that required pixel perfect play, and when I finally got it I blew up a lemming by mistake leaving me with 97 out of the 98 required. -_- - Ari Ronen
[+14] [2008-10-31 19:03:44] BoboTheCodeMonkey

Here's a bunch of "processing" graphics: demos are located near the bottom.

I think my favorite would be

Although this snake guy is pretty cool and interactive:

[+14] [2008-10-31 20:18:54] Jimmy

Mario Kart [1]


amazing ! - Iraimbilanja
[+11] [2008-10-31 19:18:51] Ferruccio

This site [1] has a pretty nice implementation of solitaire, including card animation, all in JavaScript.


Check out the options for card resizing, etc - definitely well done, and generic enough to re-use for other card games as well. - J c
Easily the best solitaire implementation I've ever seen on the Web... - Hexagon Theory
Amazing Implementation !!! - NightCoder
[+11] [2008-10-31 19:22:40] friol

This site has an entire OS (an old one, btw :) in javascript: [1].


There is actually another project out there to develop a JS based OS, called the Lively Kernel. - new123456
[+7] [2008-10-31 19:26:54] Gabe Hollombe

Antisocial [1] is definitely the best js graphics demo I've seen. Don't miss the 'play with the demo tool' link (after watching the demo, of course).



It's no longer working. - Foreever
Still working for me, @Foreever. - Gabe Hollombe
Sorry, it wasn't working yesterday. - Foreever
[+7] [2009-06-02 20:43:53] Nosredna

Hypno trip down the fractal rug - for the 20 lines JavaScript contest - Zoom by Mathieu 'p01' Henri [1]

(Doesn't work well on IE or Chrome.) Update: It now works great on Chrome.


It works fine in Chromium 3 for me and is at least 5x faster than in Firefox 3.6. - Eli Grey
Yes it works now for me, too. A Chrome update must have fixed it. - Nosredna
[+7] [2009-06-02 20:47:23] dtc

The coolest JavaScript effects I've seen are the Google Chrome experiments.

Obviously they will work best with Google Chrome browser, but some work in other browsers.

[+5] [2008-10-31 19:13:39] harpo

I thought this was pretty impressive:

With an admittedly "cursory" investigation, these demos confirm that Chrome beats Firefox and IE for Javascript-heavy apps.

Pretty similar to "Google X":, but good nonetheless. - friol
Ah, I'd never seen that. But the "dock" demo is much smoother, which is why I find it so impressive. - harpo
(2) This one is way smoother: - Pedery
[+5] [2008-10-31 19:28:23] S├ębastien RoccaSerra

I like Algorithm Ink [1] a lot. It's a javascript port & extension of Context Free [2] by Aza Raskin.

Click on the canvas, they're interactive.

And click on Edit, and change the pattern generation algorithm live.


[+5] [2008-10-31 19:54:00] Dalin Seivewright

I've always loved everything that [1] allows you to do. Update: raphaeljs [2] also looks like a great framework!


[+4] [2008-10-31 20:12:31] J c

This is a "mouse follow" javascript animation from 2002 or earlier, the smoothness and accuracy makes for a pleasing effect. I could only find a version that ran in IE, but it is worth firing up IE or IETab and taking a look:

Link: Mouse Trail Clock [1]


[+4] [2008-10-31 23:13:55] Thevs

Almost full port of Wolfenstein 3D [1] to Javascript!


damn, beat me to it! - mmcdole
[+1] [2009-08-15 22:28:36] nickf

The JS909 drum sequencer. Written without using a JS library, and even the sounds are done by Javascript

[+1] [2009-10-23 05:06:20] Mottie

I've found these two sites quite facinating:

Using Canvas:


plain old javascript:, if nothing else, I find the 33 different image transitions available worth looking at this one.

[+1] [2010-03-26 12:33:50] Gregory Pakosz

Shameless plug: Canvas Image Distortion [1].


[0] [2008-10-31 19:44:25] BoltBait

Not really graphical, but still stunning (even if I do say so myself)...

A long time ago, I wrote an HTML editor in HTML/Javascript.

You can download it here:

One of these days, I'll update it for CSS. :)

[0] [2009-01-25 00:32:52] Wilq32

I made myself a few interesting graphical effect in pure javascript (eventually with use of framework, for simplicity).

You can see it here, on mine blog:

For ex.:

[0] [2009-06-02 20:36:16] user105033

This isn't necesarily amazing, but it's fun: paste into browser bar.

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)x4+x5)+"px";*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

works for images in webpage in firefox not in chrome,but it's funny - mrYogi
[0] [2009-08-15 22:11:12] Ari Ronen

high poly 3d duck with shading in 4K [1]


[0] [2010-10-31 19:31:30] joeytwiddle

I was most impressed by this 512 byte Menger sponge: JSpongy [1]

There are also a lot of interesting effects in the js1k competition results [2]. The other day I was beaten by 1023 bytes of chess.