Simulate Reflections Based On The Physical Orientation Of The Device – Shiny.js

Preview:

Description:

Shiny.js is a JavaScript library for simulating the shiny effect based on the physical orientation of the mobile device.

The library applies custom reflections to background, border or text of an element using Canvas and DeviceOrientationEvent API.

View the demo on a mobile device:

How to use it:

Download & install the package.

# NPM
$ npm install @rikschennink/shiny --save

Then include the JavaScript file shiny.umd.js on the page.

<script src="shiny.umd.js"></script>

Apply the reflections to elements you specify.

shiny('.element1, #element2, ...');

Config the reflections with the following parameters:

shiny('.element1, #element2, ...',{
  // 'background', 'border', or 'text'
  type: 'background',
  gradient: {
    // 'linear' or 'radial'
    type: 'radial',
    // angle of gradient when type is linear
    angle: '110deg',
    // flip axis movement
    flip: {
      x: true,
      y: false
    },
    // colors to use
    colors: [
      // offset, color, opacity
      // ! don't pass rgba or hsla colors, supply the opacity seperatly
      [0, '#fff', 1], // white at 0%
      [1, '#fff', 0], // to fully transparent white at 100%
    ]
  },
  // optional pattern fill
  pattern: {
    type: 'noise',
    opacity: .5
  }
  
});