Show HN: Shiny.js simulates reflections on the web for mobile devices
1–10 of 41 posts
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#2Based 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 https://github.com/dsalaj/awesome-quirks list, I guess :)
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#3Brb, implementing this on all my websites.
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#4Admittedly, 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!
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#5Not massively useful, but a fun option none the less.
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#6For desktop devices (without gyroscope but with cursor) this quite asks for "cursor following tilt", like https://micku7zu.github.io/vanilla-tilt.js/ .
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#7For desktop devices (without gyroscope but with cursor) this quite asks for "cursor following tilt", like https://micku7zu.github.io/vanilla-tilt.js/ .
I'm kinda hesitant to do this as it's not really what you expect to happen on a device that is stable? Where on mobile it responds to the tiniest twist or turn of your hand which results in familiar reflection behavior.
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#8Admittedly, 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!
Thanks! Indeed it does use the gyroscope. Unfortunately (as always on the web) the implementation apparently differs a lot per device so I'm now gathering test devices to make it respond the same on iOS and Android.
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#9This is a cool idea.
The website says it is untested on android and it shows how weird and inconsistent browsers are.
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).
On chrome the movement is smooth but the markup is not rendered correctly.
Re: Show HN: Shiny.js simulates reflections on the web for mobile devices
#10This is a cool idea. The website says it is untested on android and it shows how weird and inconsistent browsers are. 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). On chrome the movement is smooth but the markup is not rendered correctly.
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/shiny/blob/master/src/index....). That's just slooooow. HTML5's canvas API has a putImageData method that is much faster because all you're really doing when you fill an image is assigning values to a UINT8 typed array with 4 values per pixel.
It'd be relatively straightforward to achieve this effect using WebGL and a quad to overlay the element, and just pass in the orientation data as a vec2 uniform. That's how some of the effects in my React Neon library work (https://react-neon.ooer.com/) for mouse coordinates. Although, that said, Neon is Chrome-only because it relies on ResizeObserver at the moment. One day I'll fix that...