Real Shadow: jQuery Plugin that casts photorealistic shadows

[aw3c2]

Maybe it is the amount of shadow-casting items on that page but if your landing page maxes out my cpu and lags badly, I say goodbye faster than 20 frames render. (I use Opera.)

edit: They do look good though!

[mxfh]

This one even had lights. Illuminated.js – 2D lights and shadows rendering engine for HTML5 applications http://news.ycombinator.com/item?id=3958251

[Cushman]

The effect is cool, so I hate to ask this, but-- in what sense is this "photorealistic"? They look like normal soft shadows to me.

[vph]

in a marketing sense.

[hamoid]

Where is the cursor on my phone? :)

[evride]

"Perfect for eye-catching demos and landing pages."

Can we stop creating stuff in JS/CSS that we would have ridiculed other people for doing in flash? I can't possibly think of any situation where this would be useful for a landing page.

[Cushman]

Flash wasn't ridiculed because of how it looked. The principle of integrating interactive content into web pages is a fine one, so long as it's done in a way that's semantically consistent, machine readable, searchable, accessible, reliable, not too obtrusive, forgiving of network latency and performance, cross-platform, cross-device, and tolerant of errors -- the web, in other words. Flash was... not.

That doesn't mean we stop trying to make web pages look prettier.

[alttab]

This pegged my duo core at 100% for both cores. Realtime shadows are great and all, but if I needed to achieve them I'd imagine I'd use WebGL if I didn't care about CPU or battery.

Using jQuery for this type of problem seems a little out of place to me. That said, this is certainly "neat." THAT said, I don't believe this has real world practical value. Its too computationally expensive considering what it adds.

[jmah]

I'd use WebGL if I did care about CPU and battery.

[jgv]

for a real world application – at okfocus we used our version of this effect on http://tugofstore.com and it added to the realtime "tug" effect by making it more of a visceral experience for users. perhaps ours is less computationally expensive idk.

[inafield]

Impractical now, but cool as a tech-demo. i7-2640M cpu usage is at 24% on Chrome Canary 21 with this.

[ddon]

On iPad I see shadows, but can't control them...

[ars]

I moved the cursor across the page and nothing of interest happened. This is Firefox 12. It did work on chrome though.

[KwanEsq]

Do you have NoScript or similar? Even with scripts enabled it doesn't work for me, because of the mimetype: "[NoScript] Blocking nosniff Javascript served from https://raw.github.com/Indamix/real-shadow/master/realshadow... with wrong type info text/plain, inline and included by http://indamix.github.com/real-shadow/

Edit: the fix is to add https://raw.github.com/ to the pref noscript.inclusionTypeChecking.exceptions in about:config

[asto]

Works on Firefox 12 (Linux) for me!

[kevingadd]

Doesn't work in Firefox 14 either.

[jgv]

My company released this effect a couple of months ago: http://okfoc.us/okshadow/ and https://github.com/okfocus/okshadow

[illdave]

Just to confirm, it's working well on Chrome 20 on Mac for me (no lag, not maxing out the CPU, very smooth). It's interesting from a technical perspective, although design-wise I can't really see any practical reason to use it. Fun though.

[PhrosTT]

2000 - drop shadows.

2005 - transparent drop shadows.

2012 - realtime drop shadows!

[basseq]

It may just be for demo purposes, but using the mouse cursor as a light source seems like the 2012 equivalent of animated GIF backgrounds. Might be cool it could you specify a point light source at a given coordinate and let the page render from there.

[iambot]

You can. if you read the github readme, is shows clearly how to both disable the mouseFollow and set a global light source.

[asto]

Works quite nicely on Chrome. Too much lag on Firefox and Opera!

[lucian1900]

Works on FF 12, but it's extremely slow.

[petepete]

Beautifully smooth for me, with Chrome 20 on Linux.

[jheriko]

FYI doesn't work with IE 10

[regnum]

Looks very nice in Chrome.

[happypeter]

ubuntu1104+Chrome: perfect Mac+firefox13: a bit slow

[savories]

Needs more lens flare. And some bevels. Then we're back in 1998.