Shiny.js

Shiny reflections for mobile websites 🌟

get it
#5 Product of the DayJanuary 16, 2019

🌟 A vanilla JavaScript library for adding shiny reflections to HTML elements.

📱 Reflections move when the user rotates or twists their device.

🖼 Currently supports text, backgrounds, and borders

Reviews

Linus Mimietz
Mattèo Gauthier
Imed Adel
 +1 review
  • Pros: 

    this is a different idea

    Cons: 

    performance

    lo mas probable es que no funcione bien en muchos dispositivos que no corran bien javascript.

    Jose Acevedo has used this product for one day.

Discussion

You need to become a Contributor to join the discussion.
Rik Schennink
Rik SchenninkMaker@rikschennink · Indie product dev • Web enthusiast
Hi! For the past couple of weeks I've been experimenting with the 'deviceorientation' event, I figured I could use it to make materials on the web come to life on mobile devices (read "devices that have gyroscopes"). The result of this is Shiny.js, a tiny JavaScript library that can add reflections to text, backgrounds, and borders. Resulting in more lifelike graphics. Note, this is still experimental, it needs some more testing on Android and iOS landscape mode. I'm extending my mobile device lab so hope to be able to test on Android next week. In the meantime, enjoy!
Drew Reynolds
Drew Reynolds@nydrewreynolds · Software Developer at Gramercy Tech
The reflection looks great @rikschennink! Having a blast messing around with it on my phone. Do you have any plans for a click-and-drag version on desktop?
Rik Schennink
Rik SchenninkMaker@rikschennink · Indie product dev • Web enthusiast
@nydrewreynolds On the desktop the screen would not actually rotate/tilt so I'm afraid the effect then quickly becomes a bit tacky while on mobile it's actually quite subtle. I'm on the fence about this, I think it would also require actual tilt of virtual elements to make it feel more real.
Dmitriy Levchenko
Dmitriy Levchenko@levchenkod · Making things at itsbeat.com
This is fun :) and I think that no one wiggle their phones that gently, so I’d made it not that sensitive
Rik Schennink
Rik SchenninkMaker@rikschennink · Indie product dev • Web enthusiast
@levchenkod Will have to investigate further ;-)
Dima Blover💎
Dima Blover💎@dimablover · Founder & Designer at itmeo.com
Great library. Congrats with the launch!
Rik Schennink
Rik SchenninkMaker@rikschennink · Indie product dev • Web enthusiast
@dimablover Thanks Dima!
Armen
Armen@aarmen · ☕️
Very innovative