Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

github.com

Post reply on HN
Print view View original

31–40 of 41 posts

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

#31

Post by iaml »

stupidcar wrote: post #18

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.

Apple already did a similar effect for apple pay cash https://twitter.com/panzer/status/927973389792264192?lang=en

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

#35

Post by chooseaname »

piotrkubisa wrote: post #33

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 would be very upset if a website that I had to use, say a bank website, decided they needed to use this. I consider this to be user hostile.

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

#36

Post by yoklov »

rikschennink wrote: post #11
onion2k wrote: post #10

Earlier quoted context omitted.

maybe hardware acceleration is missing or something like that It's doing some seriously slow stuff behind the scenes. For example, when the library initialises it creates a 64 * pixelDensity square canvas and then loops through all the pixels in it one by one using a randomly generated transparent color value to draw a 1x1 rectangle to each one (See the 'generateNoise()' function in https://github.com/rikschennink/sh…

It does that once, and it does it to prevent having to ship an image or base64 encoded string to create a noise effect. It's a balancing act between a bigger library and CPU usage. It takes the CPU 15 milliseconds (it's more than I expected, but it's on page load). Good to know that putImageData is faster, will look into that. What is most likely causing the chopiness is that it's animating background gradients. Ther…

15ms for that is ridiculously slow, but if you’re doing single pixel rectangles... that would do it.

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

#37

Post by pj_mukh »

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!

Once I went to demo website on my mobile phone everything made perfect sense!

Maybe the gif should be an actual screenvideo?

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

#38

Post by mdmnk »

pj_mukh wrote: post #37

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! Once I went to demo website on my mobile phone everything made perfect sense! Maybe the gif should be an actual screenvideo?

Agreed with this comment -- I starred the library, its very cool, but you could show it off better with a 3d model that the user could move around with their mouse (not sure how hard that would be to accomplish, haven't looked at the code yet).

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

#39

Post by kitsunesoba »

ericwood wrote: post #22
stupidcar wrote: post #18

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.

Apple used to have a few of these sorts of effects scattered throughout iOS back in the skeuomorphic days; the volume slider in particular made heavy use of it https://www.theverge.com/2012/6/13/3082329/ios-6-button-tilt...

I love little effects like this. Skeuomorphism might’ve been a bit overbearing in iOS 6 but I’d really like to see it find its way back in a more reserved capacity. “Flat” and even the newer “flat + depth” is very dull.

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

#40

Post by rikschennink »

mscasts wrote: post #25

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.

I haven't been able to test this as my test device is too old. But, I'm betting my money on Firefox somehow rendering `background-attachment: fixed` differently from Webkit/Blink which is causing the slowdown.

I'm looking at switching to GPU accelerated transforms instead but that brings a couple of new challenges.

Post reply on HN