Gyros

A JavaScript library for creating shiny effects on HTML elements using gyroscope or mouse movement.

Installation

npm i @primajin/gyros
# or
pnpm add @primajin/gyros
# or
yarn add @primajin/gyros
# or
bun add @primajin/gyros

Basic Usage

<div class="gyros-element"></div>

import Gyros from '@primajin/gyros';

new Gyros('.gyros-element');

Options

You can pass an options object as the second argument to the Gyros constructor.

Option	Type	Default	Description
material	string or object	'gold'	The material to use for the shiny effect. Can be a predefined material name or a custom material object.
shininess	string	'polished'	The shininess level to use. Can be 'polished' or 'matte'.
fallback	array	['gyroscope', 'mouse', 'static']	The order of fallback mechanisms to use. The static gradient is always applied first, even if 'static' is omitted, and is then replaced by gyroscope or mouse updates.
sensitivity	number	50	The update frequency of the effect, in milliseconds. A lower number means more frequent updates.

Custom Materials

You can create your own custom materials by passing an object to the material option.

new Gyros('.gyros-element', {
  material: {
    polished: ['#ff0000', '#00ff00', '#0000ff'],
    matte: ['#800000', '#008000', '#000080'],
  }
});