This is pretty cool. I could see Apple or someone taking this idea and running with it. Like Face ID, they could use the front-facing camera with a NN to determine the location of nearby light sources, then provide an API to render 3D and reflective surfaces in a environmentally consistent way. Perhaps not just reflective highlights, but actual reflected and refracted images from the camera.
I did a similar implementation before (2017) but for huge landscape background images (tweet with video): <a href="https://twitter.com/cheeaun/status/820821687239221249" rel="nofollow">https://twitter.com/cheeaun/status/820821687239221249</a><p>Commit with code: <a href="https://github.com/webuildsg/geekbrunch.sg/commit/b995205094262c74343a9d736dd747e3a7f0ca07" rel="nofollow">https://github.com/webuildsg/geekbrunch.sg/commit/b995205094...</a><p>Now the site no longer uses this effect, but using another (much) cooler effect.
It isn't working well on Firefox for Android (at least not for me). It is very laggy, so much so that I would say that there is no shiny effect at all.
This is a cool idea.<p>The website says it is untested on android and it shows how weird and inconsistent browsers are.<p>On android firefox it looks like the iPhone example but the light movement is very choppy (maybe hardware acceleration is missing or something like that).<p>On chrome the movement is smooth but the markup is not rendered correctly.
Based on the description I thought it was a kind of "fake glare effects for testing website readability"-thing, but it's more like another lib for the <a href="https://github.com/dsalaj/awesome-quirks" rel="nofollow">https://github.com/dsalaj/awesome-quirks</a> list, I guess :)
Quick feedback: I got a little confused on the Github readme because the gif shows a video record of the phone. The physical reflections on the glass of the phone seem to be masking the virtual reflections on the credit card image!<p>Once I went to demo website on my mobile phone everything made perfect sense!<p>Maybe the gif should be an actual screenvideo?
For desktop devices (without gyroscope but with cursor) this quite asks for "cursor following tilt", like <a href="https://micku7zu.github.io/vanilla-tilt.js/" rel="nofollow">https://micku7zu.github.io/vanilla-tilt.js/</a> .
Admittedly, I didn't read the source code, but looks like this would use the gyroscope API (edit: it does)? Probably wouldn't use this profusely, but it seems like a nice addition for things like credit card inerfaces. Pretty neat!
Its a bit broken on my Mi Mix 2S.<p><a href="https://www.youtube.com/watch?v=Vs8VmNEdCog" rel="nofollow">https://www.youtube.com/watch?v=Vs8VmNEdCog</a>
iOS does something like this with the Apply Pay Cash card in Wallet: <a href="https://twitter.com/supcat/status/1083537384233328640" rel="nofollow">https://twitter.com/supcat/status/1083537384233328640</a>