Easily apply tilt hover effect on React components - lightweight/zero dependencies
npm install react-better-tilt[![npm version][npm-badge]][npm-url]
[![npm downloads][downloads-badge]][npm-url]
[![npm bundle size][size-badge]][npm-url]
[![Build Status][build-badge]][build-url]
[![Codecov Coverage][coverage-badge]][coverage-url]
[![prettier][prettier-badge]][prettier-url]
[![TypeScript][typescript-badge]][typescript-url]
_👀 Easily apply tilt hover effect on React components_

Demos created with React DemoTab 📑
``bash`
npm install react-parallax-tilt
- Lightweight (3.8kB), zero dependencies 📦
- Supports mouse and touch events
- Support for device tilting (gyroscope)
- Glare effect 🌟 with custom props (color, position,...) 🔗demo
- Events to keep track of component values 📐 (tilt, glare, mousemove,...) 🔗demo
- Many effects and functionalities that can be easily applied:
- scale on hover 🔗demo
- disable x/y axis 🔗demo
- flip component vertically/horizontally 🔗demo
- tilt hover effect on the whole window 🔗demo
- tilt component with custom manual input 🕹 (joystick, slider etc.) 🔗demo
- parallax effect on overlaid images 🔗demo
`jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';
const App = () => {
return (
React Parallax Tilt 👀
);
};
ReactDOM.render(
`
All of the props are optional.
Below is the complete list of possible props and their options:
> ▶︎ indicates the default value if there's one
tiltEnable: _boolean_ ▶︎ true
Boolean to enable/disable tilt effect.
tiltReverse: _boolean_ ▶︎ false
Reverse the tilt direction.
tiltAngleXInitial: _number_ ▶︎ 0
Initial tilt value (degrees) on x axis.
tiltAngleYInitial: _number_ ▶︎ 0
Initial tilt value (degrees) on y axis.
tiltMaxAngleX: _number_ ▶︎ 20 0 - 90
Range:
Max tilt rotation (degrees) on x axis.
tiltMaxAngleY: _number_ ▶︎ 20 0 - 90
Range:
Max tilt rotation (degrees) on y axis.
tiltAxis: _Axis | null_ ▶︎ null
_Axis = 'x' | 'y'_
Which axis should be enabled. If null both are enabled.
tiltAngleXManual: _number_ | null} ▶︎ null
Manual tilt rotation (degrees) on x axis.
tiltAngleYManual: _number_ | null} ▶︎ null
Manual tilt rotation (degrees) on y axis.
glareEnable: _boolean_ ▶︎ false
Boolean to enable/disable glare effect.
glareMaxOpacity: _number_ ▶︎ 0.7 0 - 1
Range:
The maximum glare opacity (0.5 = 50%, 1 = 100%, etc.).
glareColor: _string_ ▶︎ #ffffff
Set color of glare effect.
glareBorderRadius: _string_ ▶︎ 0
Accepts any standard CSS border radius.
Useful if the glare color is different to the page color.
glarePosition: _GlarePosition_ ▶︎ bottom
_GlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all'_
Set position of glare effect.
glareReverse: _boolean_ ▶︎ false
Reverse the glare direction.
scale: _number_ ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%, etc.).
perspective: _number_ ▶︎ 1000
The perspective property defines how far the object (wrapped/child component) is away from the user.
The lower the more extreme the tilt gets.
flipVertically: _boolean_ ▶︎ false
Boolean to enable/disable vertical flip of component.
flipHorizontally: _boolean_ ▶︎ false
Boolean to enable/disable horizontal flip of component.
reset: _boolean_ ▶︎ true onLeave
If the effects has to be reset on event.
transitionEasing: _string_ ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing of the transition when manipulating the component.
transitionSpeed: _number_ ▶︎ 400
Speed of the transition when manipulating the component.
trackOnWindow: _boolean_ ▶︎ false
Track mouse and touch events on the whole window.
gyroscope: _boolean_ ▶︎ false
Boolean to enable/disable device orientation detection.
onMove: _Function_ => (tiltAngleX: _number_, tiltAngleY: _number_, tiltAngleXPercentage: _number_, tiltAngleYPercentage: _number_, glareAngle: _number_, glareOpacity: _number_, eventType: _string | null_)
Gets triggered when user moves on the component.
onEnter: _Function_ => (eventType: _string | null_)
Gets triggered when user enters the component.
onLeave: _Function_ => (eventType: _string | null_)
Gets triggered when user leaves the component.
Please keep in mind that detecting device orientation is currently experimental technology.
Check the browser compatibility before using this in production.
A few takeaways when using device orientation event:
- always use secure origins (such as https)
- it doesn't work in all browsers when using it in cross-origin
Using device orientation on iOS 13+
Apple decided turning device motion and orientation off by default since iOS 12.2.
With iOS 13+ permission API can be used to gain access to device orientation event.
When using gyroscope feature:
`jsx`
React Parallax Tilt 👀
it will present a permission dialog prompting the user to allow motion and orientation access at domain level:

Note that user needs to take some action (like tapping a button) to be able to display the dialog (invoking dialog on page load is not possible).
_Easily set up a local development environment!_
Build all the examples and start storybook server on localhost:9009:
- clone
- npm installnpm start
-
Start coding! 🎉
Or setup with npm link
Clone this repo on your machine, navigate to its location in the terminal and run:
`bash`
npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes
Clone project repo that you wish to test with react-parallax-tilt library and run:
`bash``
npm install
npm link react-parallax-tilt # link your local copy into this project's node_modules
npm start
All contributions are welcome!
Please take a moment to review guidelines PR | Issues
[npm-url]: https://www.npmjs.com/package/react-parallax-tilt
[npm-badge]: https://img.shields.io/npm/v/react-parallax-tilt.svg
[size-badge]: https://badgen.net/bundlephobia/minzip/react-parallax-tilt
[downloads-badge]: https://img.shields.io/npm/dm/react-parallax-tilt.svg?color=blue
[build-badge]: https://travis-ci.com/mkosir/react-parallax-tilt.svg
[build-url]: https://travis-ci.com/mkosir/react-parallax-tilt
[coverage-badge]: https://codecov.io/gh/mkosir/react-parallax-tilt/branch/master/graph/badge.svg
[coverage-url]: https://codecov.io/gh/mkosir/react-parallax-tilt
[typescript-badge]: https://badges.frapsoft.com/typescript/code/typescript.svg?v=101
[typescript-url]: https://github.com/microsoft/TypeScript
[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
[prettier-url]: https://github.com/prettier/prettier