Google.com has an animated logo using an HTML/JavaScript particle simulator | Hacker News Reader

Google.com has an animated logo using an HTML/JavaScript particle simulator

google.com

160 pointsbgentry67 comments

Here's a copy for anyone that can't see it: http://www.rubypay.com/google/Google.htm The version on Google's site is a little different, it clears away the static particles when the logo is in motion.

Love it, one of the more interesting google logos. I'm still not sure whether dynamic identities are good or bad for a brand. The pros are it keeps the brand fresh, it allows the users to interact with the brand. But the cons are it can make the brand less recognisable and maybe the confusing for some users. Thoughts?

Sure, that's a consideration for smaller brands, but I don't think google has any trouble with consistent brand recognition.

Consider how many other companies are having their logo blogged, discussed and emailed around to friends today like Google's. I think you'll get your answer about whether it's worth it for them.

Anyone else finding it...slightly annoying? I mean it's neat-looking, but having a big distracting animation pop up every time I open a new browser window (google.com is my home page) is a little less neat.

The SSL version of Google doesn't have it:

https://www.google.com/

or use IE 7 :-)

Between this and the former 100% cpu buckyball logo, I'm actually getting quite annoyed.

I find it very visually disorienting. It literally made me throw up last night-that's not bashing Google or anything. I was already feeling rather nauseas due to a migraine at the time. I went to look up something, and it was.... just too much.

This is probably some kind of first for the guys behind the Google logos.

Yes, partly because it's distracting and partly because it reminds me of an Ishihara test.

You can set a background image I suppose.

The particles are divs styled with border-radius and position:absolute. Seems like SVG, Canvas, or CSS transforms would be better; I wonder if they chose border-radius and position:absolute for speed or compatibility? I don't have a copy of IE around to try; do they do something different there?

It's amazing the hoops people are willing to jump through to get fast graphics on the web. When WebGL comes out and makes all these hacks obsolete you're going to start seeing some really amazing stuff.

It works in IE using periods with a large font size to render the coloured circles.

IE doesn't support SVG, Canvas, or CSS transforms.

Or border-radius. So they have to have a special IE mode regardless.

They should just have used a static logo for IE ...

I don't see it in ANY browser.

Try http://www.google.co.uk

That is the only Google site I found it on.

Thanks! It worked there for me too.

Fine on http://www.google.de as well.

Here is a gist of of the JavaScript file that helps to create the experience: https://gist.github.com/eeae3d6aa1ac04f074cf

At a glance, it looks remarkably simple. It also looks as though Google is using parts of the Closure library as well.

Most of google's js web apps use closure pretty heavily. It's not that big a stretch to think that there would be some cross pollination.

Never mind that, does everyone else get the funky new streaming search results on google using Chrome?

  1. Go to google.com
  2. Start typing
  3. It moves the search box while you're still typing
  4. It starts streaming and updating results in real time as you type.

It's crazy awesome.

It's been running as an experiment for some time, and I don't think it's limited to Chrome:

http://googlesystem.blogspot.com/2010/08/google-live-search-...

No, on "7.0.503.0 dev" on the Mac.

Strange, mine doesn't do that. I'm even on chrome.

Looks like I'm one of the privileged few! ;)

Keyboardr.com does that.

This is seriously distracting and I really wonder how many users are going to be completely dumbfounded by the circles floating around where the logo used to be.

An event-based illustrated logo is a simple switch-out. There's not much resistance to understanding the meaning there. The Pac-Man game logo was a bit more complete, but Pac-Man is universally recognized. This on the other hand - how may people will see the logo when they move their cursor away and understand that something on the page isn't broken - that it's intentional?

It will be interesting to see the larger reaction from everyday Google users.

The Pac-Man doodle triggered hundreds of support calls and problem tickets for the makers of browsers and antivirus software. A big part of that, though, was the fact that it played sound (even when the Google search page was loaded on a background tab).

http://www.computerworld.com/s/article/9177261/Google_s_Pac_...

Tweeps seem to like it, and it doesn't showup in IE.

It works in IE7 (pretty fast), just all particles have the same size.

Anyone know if the logo has any meaning beyond the cool tech demo?

Google's birthday, I am assuming. Although they tend to flipflop between the 7th and 27th.

http://searchengineland.com/google-balls-logo-not-googles-bi... claims to have an official statement:

"Today’s doodle is not related to a birthday but is fast, fun and interactive, just the way we think search should be."

and mentions that there's a Google press conference tomorrow.

Really interesting (at least a few drinks into the night). I tried to click on the logo (obviously to no avail).

Anyone know if it has any deep meaning?

I really wanted to click on it, which was very frustrating.

Usually when there's a new logo you can click on it and instantly find out why it's there.

That Google engineers are bored?

That they have a new toy to play with. It looks to me like the part of the Arcade Fire video where the birds are flying away from your mouse cursor.

I surprised they screw with their logo as much as they do. I know for a fact this confuses the heck out of less technically savvy individuals.

I'm not... I must have seen about 100 tweets today from people talking about the logo, plus stories on social news sites like HN and Reddit etc.

It's a genius idea because the frequent changes are enough for some people to keep Google.com as their homepage and it gets people talking about Google as well.

It's really cute and clever, and if my grandmother has used Google today, she was probably overcome with fright that she had broken something.

I don't like their links fading-in (I could click faster on, say, language tools if I had not to wait). Now they make my browser choke (firefox on netbook, cpu in powersave).

any way to direct-link to it? I think it might not show up for non-US locations. certainly nothing to see on google.co.jp

http://www.google.com/ncr should take you to google.com rather than a local search such as google.co.uk. However, I still don't see anything with Chrome or Firefox when trying this.

Tried to think of a way before I posted it but couldn't come up with anything. I would happily change the URL if somebody knows how to direct link.

As somebody above says, http://www.google.co.uk works :)

hmm.. a clever trick for non-chrome users to realize how slow the javascript in their browser is?

If we're playing that game, I suspect the reason it doesn't show up in Opera is that Opera's JS engine is faster. ;-)

I've been developing a Javascript intensive bookmarklet for the past month or so. It works on FF, Chrome, Safari, even IE6. But on Opera, I cannot figure out why it behaves so glitchy. Sometimes it works, sometimes it doesn't, but it never, ever shows me any errors. Maybe this has to do with the fact that it caches things even when you tell it not to. In addition to that, AFAIK there's no way to deselect text (without breaking other things), which makes developing drag and drop pretty much impossible on it. It's "developer tools" show you a big list of "errors" which are mostly it knit-picking various CSS properties things that it doesn't support, like rounded corners for example.

Perhaps I'm wrong. Maybe my code is getting run perfectly, but it's just happening so blazingly fast that it doesn't affect anything at all. In which case, I'd still give Opera the big "fuck you" that I'm feeling after writing this.

But hey, when you open a new tab it animates.

I've also found that Opera is annoying about caching stuff that it thinks is local (192.168.. or file:///). It aggressively caches, and is reluctant to reload, certain pages on our Django site on our local dev machines - but the problem doesn't repro on production. I don't know if it's a bug, or a setting I can turn off, but if I work it out I'll let you know.

> that it doesn't support, like rounded corners for example.

Maybe you should use the current version for your tests, which supports rounded corners.

I am. Or at least the update checker says I am. I'm running windows if that matters.

Another good reason to use Opera - that it doesn't show up in Opera, I mean :)

rubypay's link above works, and pretty fast...

http://www.rubypay.com/google/Google.htm

Looks really good on my Webkit nightly builds, but I'm sure some of the "stable" browser builds are less than ideal.

I'm running vanilla Safari, and it loaded fine.

works for me in firefox 3.6.8

Works great in Firefox 4.

Works on http://www.google.co.uk

fun game: try to see how many particles you can trap in a corner while the rest of the logo stabilizes. I can get two easily and have almost gotten three.

I see it in Firefox but not in Chrome from some reason...

Working for me. Running 7.0.514.0 canary build.

very cool love it, html5 I assume?

Best Google Doodle of all time?

What's really cool is that when you move the browser window around, the particles move accordingly.

I really hope this is part of a campaign to kill off IE6.

Reply on news.ycombinator.com