Impressive html5/css3 clock; no Flash.

Apple actually has an embarrassingly straightforward implementation of a CSS3 clock on their ipod nano page:<p><a href="http://www.apple.com/ipodnano/" rel="nofollow">http://www.apple.com/ipodnano/</a>

Built an analog CSS clock of my own without the use of any pre-rendered images (<a href="http://attasi.com/experiments/analog-clock/" rel="nofollow">http://attasi.com/experiments/analog-clock/</a>). Surprisingly, keeping time with CSS is far more accurate than with JS. The animation is also waaaay smoother.

It's also a terrible clock. It is incredibly hard to figure out the actual time when you have to look in 3 separate places for each part of the time. It's pretty, but borderline useless, just like flash.

2.3MB of data for a one page site! While its pretty that is crazy big!

This was super cool on my laptop. But there was mention of HTML5/CSS3, so I just <i>had</i> to check it out on every mobile device I had handy. Uh oh...<p>Doesn't work on Android phone (3.2.6, Nexus One). Pendulum only runs a half cycle, hour/minute hands don't move at all and point to incorrect time. Low frame rate overall. Loads in different places on the screen, including half-way off the right edge, depending some factor I haven't yet deduced (zoom level, perhaps?). Doesn't allow any panning or zooming once loaded.<p>Doesn't work on Windows phone (Mango, LG Optimus Quantum). Pendulum animation doesn't run at all.<p>Works beautifully on iPad 1 in landscape. In portrait, background shows a visible seam around the clock.<p>I really like the design, and appreciate the effort. I just find it a little bit kooky that the OP promotes the non-use of Flash, touting instead technologies that are supposed to work much better (or at all) on mobile devices. It's <i>Alanis Morissette Irony</i>.

It seems like if you wait long enough the gears start moving. On Chrome I just saw the closed aperture for several minutes and gave up, on FF I saw the arm and pendulum moving but that's all, 'til I came back several minutes later and the gears were moving. Haven't been able to get that "gear moving" effect again tho. I think file-size/load-time is actually a problem in this case, even as an art piece, as it's taking so long to load I'm not even seeing the art.<p>A couple other things: the apple clock is using javascript as well, not just css3 (tho they could if they tried). This one... I didn't dig far enough to see if it's used anywhere in the clock but the hands and pendulum are just css. Remember kids, html + css + javascript != "CSS3" :)<p>Further, HTML5 is nice but it's being used pointlessly here: &#60;article class="layer zero"&#62; &#60;div class="blurred gear one"&#62;&#60;/div&#62; &#60;div class="blurred gear two medium reverse"&#62;&#60;/div&#62; &#60;div class="blurred gear three large"&#62;&#60;/div&#62; &#60;/article&#62; This is an "article?" HTML5 to <i>add semantic meaning</i> is good, using it for no reason... I don't see the point. Overall, KUDOS to the designer/developer! Extremely impressive regardless of any of this.

Could be wrong, but doesn't seem to work in Chrome under Ubuntu.

There's also another version of it on <a href="http://charmseven.com/" rel="nofollow">http://charmseven.com/</a>

The most impressive bit of HTML5 I have run across lately is turntable.fm. Yes, I'm probably late to this particular party, but I was very impressed when I realized the interface is done entirely in HTML5.<p>So, to turntable.fm devs: good job!

In the new Chrome beta for Mac, when you pull the page down too far to see the grey browser background, Chrome messes up and the background appears as a smear of red.

Although unbelievably impressive. This kind of shows me the opposite of what the site was going for. Although the new protocols give us a lot more freedom of expression with animation support. The browser rendering time is just not there yet. Any browser that can handle that clock in a reasonable amount of time also has flash on it.

I'd love to add this type of tech to our online alarm clock site (<a href="http://sleep.fm" rel="nofollow">http://sleep.fm</a>). Though and correct me if Im wrong - HTML5 doesn't have a cross compatible audio solution available; one as solid as flash?

By the way, did anyone else notice that the pendulum completes a cycle every 1.3 seconds? Am I wrong or would this make your clock run very slowly?<p>/me goes back to critiquing the physics of minecraft. :p

checking out the source i noticed all the hrefs are missing http:, how does that work, whats the purpose of this?<p>&#60;link rel="stylesheet" href="//aprilzero.s3.amazonaws.com/a0/lib/c/styles.css"&#62;

Thanks for adding the -moz prefixes too! (Yes, Firefox supports CSS3 animations now; most web developers only use the -webkit prefixes though, sadly. Glad to see this is changing.)

&#60;meta property="og:description" content="A ducati-inspired HTML5 experiment. For a fun time, try it on a retina display (pinch to open and close)."/&#62;

Also, in chrome, try to inspect the DOM using the built-in inspector: the diaphragm will close. If you click again inside the window, it'll open again.<p>Pretty impressive.

Use your browser's zoom tool to see it up close. Most of the textures are higher-res than needed. It looks pretty good even zoomed way in.

Trying to imagine how that got put together. It looks like it involved a lot of patience.

looks great! only if you could make the gears move:)

I got tired of waiting for some resources to load and staring at a puckered anus: <a href="http://i.imgur.com/9NGQS.jpg" rel="nofollow">http://i.imgur.com/9NGQS.jpg</a>

this would be impressive even if it was flash.... very nice!

Very very cool! :)

a preloader would be nice...

It's cool. But let's admit it wouldn't be impressive if it were written in Flash...because Flash makes it relatively trivial to write something like this.<p>So is it only impressive because it doesn't use Flash? And if so, what does that say about how wise a decision it is to start trying to replicate complex animation in Javascript, CSS3 and Canvas, just to keep Steve Jobs happy?<p>Arguably, Jobs chose to eliminate Flash from the iPhone specifically so that casual games would have to be written natively and sold in the App store, and couldn't be played on the open web. Since Javascript runs at about 20% the speed, the reasoning was that the only decent games would have to be written in Obj-C. And that still holds true, despite legions of hackers trying to ride this HTML5 pig as if it's a thoroughbred stallion. It'll just never be up to the task. I could write this thing in about 3 hours in HTML5/CSS, not including modeling and rendering time. But that's also because everything in it has a centered pivot point. If it didn't, it wouldn't work in IE 6, 7 or 8.<p>So, nice job, but was the only point really to show that you can do something Flash-like in HTML5? If so, what's the point again?