Show HN: Shiny.js simulates reflections on the web for mobile devices

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 don't get it... This is for devices that already have a reflective screen.

I am a bit biased. It is nice effect to see but also I take it as a complete waste of the device resources, namely a battery.

I did a similar implementation before (2017) but for huge landscape background images (tweet with video): <a href="https:&#x2F;&#x2F;twitter.com&#x2F;cheeaun&#x2F;status&#x2F;820821687239221249" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;cheeaun&#x2F;status&#x2F;820821687239221249</a><p>Commit with code: <a href="https:&#x2F;&#x2F;github.com&#x2F;webuildsg&#x2F;geekbrunch.sg&#x2F;commit&#x2F;b995205094262c74343a9d736dd747e3a7f0ca07" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;webuildsg&#x2F;geekbrunch.sg&#x2F;commit&#x2F;b995205094...</a><p>Now the site no longer uses this effect, but using another (much) cooler effect.

It isn&#x27;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.

Not massively useful, but a fun option none the less.

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 &quot;fake glare effects for testing website readability&quot;-thing, but it&#x27;s more like another lib for the <a href="https:&#x2F;&#x2F;github.com&#x2F;dsalaj&#x2F;awesome-quirks" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dsalaj&#x2F;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 &quot;cursor following tilt&quot;, like <a href="https:&#x2F;&#x2F;micku7zu.github.io&#x2F;vanilla-tilt.js&#x2F;" rel="nofollow">https:&#x2F;&#x2F;micku7zu.github.io&#x2F;vanilla-tilt.js&#x2F;</a> .

Admittedly, I didn&#x27;t read the source code, but looks like this would use the gyroscope API (edit: it does)? Probably wouldn&#x27;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:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=Vs8VmNEdCog" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=Vs8VmNEdCog</a>

Cool effect. It works fine on my Moto G5 using Chrome. But the page feels really slow. I guess that&#x27;s because of my low end CPU.

iOS does something like this with the Apply Pay Cash card in Wallet: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;supcat&#x2F;status&#x2F;1083537384233328640" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;supcat&#x2F;status&#x2F;1083537384233328640</a>

Brb, implementing this on all my websites.

Are Firefly quotes allowed here?