Time for another inspiration post. This post is long, long due. I remember when I first saw Anand Sharma’s work at Dragon Interactive. I was stunned by his clever gradients, pixel precision, cross-fading animation and level of detail put into everything. I remember wrongly thinking that his site used Flash because of the smoothness of his animations, and clever way of producing text shadows. No, he does it all in HTML, CSS and JavaScript.

Dragon Labs

While I certainly tip my hat to his work on Dragon Interactive, I think everybody, their Aunt Bea, and their pet snake have too :) I’d like to talk about some of the work I’ve seen him doing on an upcoming site called Dragon Labs. Anand has showed me his work as he has progressed with this design.

Bubbles boil up hover effect on a beaker at Dragon Labs.

First let me say, that he has given me a whole new definition of “meticulous.” Everytime I thought the design was complete and looked great, he’s spend another 3 days on it and make it better. His level of detail, perfectionism and devotion to a design is flawless. Every time a revision is made to one of his designs, its for the better and often introduces on more sparkle to dazzle the design. He thinks and researches each one of this designs in a way I’ve never done before. Typically, I start with a canvas and start designing. Anand researches his subject like a Jedi knight preparing for battle, knowing his enemies’ weakness, studying his target, preparing, waiting, until the right moment. This most of all impresses me about Anand. He designs because he loves it. He designs it right. He is meticulous.

I could rant more on process, but I think it important to see what I’m talking about. Anand has made his “sketches” public on his flickr account. There you can comment on his work, view samples from his portfolio and work that he has done on Noisefreak, Girl Gamer, Dragon Interactive and more.

Another thing I have noticed about Anand’s work is how he uses PNG images and scales them for the browser size. With a large resolution monitor, the beakers at Dragon Labs are large and gorgeous. When a user resizes their browser, they are in for a treat. Anand has used percentage based CSS dimensions on the beakers to scale them according to the browser dimensions. What does this mean? Well, other than being ridiculously and insanely rad looking, there is no cutoff. The beakers stay in view and seem placed right on the “shelf” for large and small screens. Awesome. Also, you’ll notice a bubbling effect shown above on the Octopus beaker. No, this isn’t an animated GIF image. This is a frame-by-frame animation of a PNG image of bubbles. You can see three frames of this PNG “filmstrip” here. Too flippin’ cool.

What is Dragon Labs?

YShout Shoutbox Administration Panel at Dragon Labs

Dragon Labs is more than a pretty face. Its a community offering. It’s some of Anand’s best work put out for you to learn from and use in your own projects. Want to know how he did that great crossfading effect on Dragon Interactive? That’ll be there. Want to see an insanely cool implementation of a “pulsing” shoutbox admin panel? Yup, that’s there, and more coming. Anand will be putting quite a bit of his genius work up there, a sort of tutorial-like, one-way blog of sorts.

Follow him

So what do you do with people that have more talent in their left pinky finger than you do in your whole body? Follow the leader. Read their blogs, study them, learn from them, follow them on twitter. You know what to do.

• Follow Anand Sharma (aprilzero) on Twitter
• Dragon Interactive