Hi, I'm the author of the rain effect (not of the website itself though).<p>You can see the original effect here[1], along with an explanation here[2].<p>If you like it, you can see a few more effects and experiments on my portfolio here[3], although it's been a couple of years now since I've done anything of the sort (that I can post publicly, that is).<p>[1] <a href="https://tympanus.net/Development/RainEffect/" rel="nofollow">https://tympanus.net/Development/RainEffect/</a><p>[2] <a href="https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/" rel="nofollow">https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...</a><p>[3] <a href="http://lbebber.github.io/" rel="nofollow">http://lbebber.github.io/</a>
The drops flicker in OSX Chrome 84 for me. Works in other browsers.<p>Not surprising though. This 2017 Macbook Pro's integrated gfx (Intel Iris Plus Graphics 640 1536 MB) seems incapable of rendering any 3D games after 2010 without flickering at some point. It's one reason I'm still playing Morrowind (2002).
Not sure if it is the original but the source where I first saw this rain effect was on ShaderToy - The Drive Home by Martijn Steinrucken aka BigWings[1]<p>The accompanying video tutorial[2] is super interesting too as well as the HN discussion at the time [3].<p>[1] <a href="https://www.shadertoy.com/view/MdfBRX" rel="nofollow">https://www.shadertoy.com/view/MdfBRX</a><p>[2]
Link to first part: <a href="https://www.youtube.com/watch?v=eKtsY7hYTPg" rel="nofollow">https://www.youtube.com/watch?v=eKtsY7hYTPg</a><p>[3] <a href="https://news.ycombinator.com/item?id=15564148" rel="nofollow">https://news.ycombinator.com/item?id=15564148</a>
For those that feel inspired, there's a good article by Lucas Bebber that breaks down how this kind of rain effect can be made in WebGL here:<p><a href="https://tympanus.net/codrops/2015/11/04/rain-water-effect-experiments/" rel="nofollow">https://tympanus.net/codrops/2015/11/04/rain-water-effect-ex...</a>
Toggling the options seems to add records to the browser history, which means it takes a bunch of taps on the back button in safari to get out of the app. Otherwise, really cool!
Lovely effect! Particularly enjoyed how it seems to 'fake' refraction by sampling higher or lower from the background based on the drop shape. The trails squishing back into raindrops to simulate surface tension is also a pretty nice touch, though perhaps a bit over-exaggerated.<p>One caveat is the merging of the drops sometimes looks quite unnatural, but I'm not sure there's any simple way to represent that as just a couple of textures and a transformation, as real drops would have attractive forces on a molecular level pulling them towards one another once they're bridged, deforming pretty unevenly.
This reminded me of the different site I liked so much: <a href="https://1976design.com/" rel="nofollow">https://1976design.com/</a>. On the top there is header which used to reflect the real weather conditions outside. It is no longer functional, but you can read some about it in the colophon: <a href="https://1976design.com/blog/colophon/" rel="nofollow">https://1976design.com/blog/colophon/</a>
I love these, nicely done! For reference, I consider DriveClub state of the art when it comes to rain simulation: <a href="https://www.youtube.com/watch?v=hViwrRGfuHU" rel="nofollow">https://www.youtube.com/watch?v=hViwrRGfuHU</a>
Man that's crazy, trying to figure out how you make something look like glass/water. Also moving your mouse around on desktop gives it added feel of depth/realism the pane of glass.
Pretty cool!. Only one glitchy part, the bottom of the screen seems to have a few drops that appear and disappear at random, that's the only thing that took me out of the realism.
neat! I particularly love the visual appeal of night mode - reminds me of "Night" scenes in old movies where you still could see shadows and sunlit surfaces because of daylight filming: <a href="https://en.wikipedia.org/wiki/Day_for_night" rel="nofollow">https://en.wikipedia.org/wiki/Day_for_night</a>