Shiny, Simulating Reflections for Mobile Websites

Add shiny reflections to text, backgrounds, and borders on devices that support the DeviceMotion event.

⚠️ It looks like iOS 12.2 will disable use of device sensors on Safari, so development of Shiny.js is on hold for now

Demo

Use a mobile device, preferably iPhone in portrait mode at the moment

Todo

• Fix landscape orientation rendering
• Test on Android (waiting for test device to arrive)
• Add option to pass custom handler

Installation

Install from npm:

npm install @rikschennink/shiny --save

Or download dist/shiny.umd.js and include the script on your page like shown below.

API

There's currently only one API call to make and it's shiny(). You can either pass a selector or an element (or array of elements), the second argument can be a configuration object telling Shiny how to render the special effects.

If the second argument is not supplied Shiny will render a radial background gradient with a white center and a transparent outer ring.

// No config supplied, select element by class
shiny('.my-shiny-element');

// Select multiple elements
shiny('.my-shiny-element, #my-other-shiny-element');

// Configuration object, see below for details
shiny('.my-shiny-element', { /* config here */ });

// Pass element object
const myElement = document.querySelector('my-shiny-element');
shiny(myElement, { /* config here */ });

// Pass array of elements
shiny([myElement, myOtherElement], { /* config here */ });

Usage

<!-- The element you want to make shiny -->
<div class="my-shiny-element">Hello World</div>

<!-- Include the library -->
<script src="shiny.umd.js"></script>

<!-- Initialize the SHINYNESS -->
<script>
shiny('.my-shiny-element', {
    // type of shiny to render, 
    // 'background', 'border', or 'text'
    type: 'background',
    gradient: {

        // type of 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 seperately
            [0, '#fff', 1], // white at 0%
            [1, '#fff', 0], // to fully transparent white at 100%
        ]

    },

    // optional pattern fill
    pattern: {
        type: 'noise', // only 'noise' for now
        opacity: .5
    }
});
</script>