
FourShadows.js – Time-aware algorithm driven shadows for icons - Gigacore
https://github.com/Gigacore/four-shadows
======
SwellJoe
Clever, but light comes from the sky (it always comes from the sky in
nature...light from below weirds us out). It's probably poor design to have
shadows rotating throughout the day. Might be more friendly to have the
shadows play like real shadows (never going above the object).

Source:
[http://static.tvtropes.org/pmwiki/pub/images/TV_Tropes_Flash...](http://static.tvtropes.org/pmwiki/pub/images/TV_Tropes_Flashlight_Image_5440.jpg)

~~~
meesterdude
This. Light from below is unnatural.

Also, I think this generally would confuse users. I visit at 10AM it looks one
way, I visit at 3PM it looks another, and I have no idea why as a user. Even
if you paired it with other elements, you've still got the shadow all over the
place.

I remember about 10 years ago watching a guy in school build a site that had a
header that would have full sunrise-sunset based on your time in cute artwork.
If you gave your location, it would display current weather too.

So OP, I think this has limited use; but its good to explore and experiment
and see what you end up with. Perhaps with more thought/iterations you'll end
up with something really amazing.

~~~
dwild
It would confuse users? Having a shadows on your logo that can take 4
different positions would confuse the users?

------
andrewliebchen
Neat idea, but shadows cast on the ground don't move around an object a full
360deg over the course of the day.

If the metaphor is that we're looking at the object from above, then the angle
of the shadow would depend on the time of day, the day of the year, and the
object's latitude. Now THAT would be a neat plugin.

Others have mentioned that Google does it like this in Google Maps...which is
even stranger because there is a very clear real world analog in that case. I
would have expected that they would take the care to render the shadows as
they would actually appear for that location at that time.

~~~
monk_e_boy
As soon as the shadow flowed up the page, I was like, WTF the sun is
underground now? This, on a tech news site is.... dumb

------
balazsdavid987
I'm not sure about the usefulness of this, but it's creative, beautiful and
unconventional for sure.

------
peter_l_downs
This feels unnecessary, although it's some cool code for sure. I think it ends
up looking unnatural when the generated shadow doesn't match the shadow in the
icon itself; in the demo on the github page, this would be at 1 o'clock and 5
o'clock.

------
richbradshaw
Google maps does this for shadows on buildings - check out something tall to
see. It makes more sense there as the shadows actually fall in that location.
As an interface it's a cool idea but we normally consider light to fall from
top to bottom.

------
social_quotient
Cool demo and js file size. I did something similar a while back and thought I
would share
[http://codepen.io/social_quotient/pen/msrIx](http://codepen.io/social_quotient/pen/msrIx)

------
emsy
This would be cool on a mobile, since you usually hold it with the display
facing towards the sky. But then, the length and angle of the shadow have to
depend on the orientation of the phone.

------
iandanforth
Nerd Snipe! - Pick a website that uses consistent shadows. Assume that the
website is a 3 dimensional object that could cast those shadows. Also assume
that the object is positioned sitting on the ground, with the length of the
page normal to the surface of the earth. Provide a location, rotation, time of
day and day of year in which the shadows are accurate.

------
dsl
Does it remove the shadows at night?

------
LukeB_UK
The effect gets totally ruined on the demo page where the HTML5 and CSS3
shields are used which have their own light source. Screenshot:
[http://i.imgur.com/prMIIOQ.png](http://i.imgur.com/prMIIOQ.png)

~~~
Gigacore
You're right. I shouldn't have used logos with their own shadows. Replaced
with flat ones. Sorted out. Thanks!

------
adamwong246
Wouldn't using svg's be tremendously more powerful, rather than pngs and image
sprites? Of course, there are compatibility issues with older browsers but
placing 1 of 4 pngs is just barely "time aware"

------
califield
To be honest, this library doesn't really make sense.

Perhaps a related but more useful idea would be to adjust the colors of your
site to match the user's local time like f.lux...

------
fit2rule
Think of the Icon as a planet, and your attention and focus as the sun .. only
then will you find true nirvana. Daily.

------
asadlionpk
It would have been a great effect if it had 12 shadows. Although unnecessary
but cool.

------
rguldener
When I click the demo link I get a 404

~~~
Gigacore
Fixed. Thanks for pointing that out.

------
vstp
Waste

