React Tilt

👀 Easily apply tilt hover effect on React components

Demo 💥

Install

npm install react-parallax-tilt

Features

• Lightweight (≈3kB), zero dependencies 📦
• Tree-shakable 🌳 ESM and CommonJS support
• Works with React v15 onwards
• 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 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

Example

import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';

const App = () => {
  return (
    <Tilt>
      <div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
        <h1>React Parallax Tilt 👀</h1>
      </div>
    </Tilt>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

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
Max tilt rotation (degrees) on x axis (range: 0°-90°).

tiltMaxAngleY: number ▶︎ 20
Max tilt rotation (degrees) on y axis (range: 0°-90°).

tiltAxis: 'x' | 'y' ▶︎ undefined
Enable tilt on single axis.

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
The maximum glare opacity (range: 0-1).

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: 'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
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
If the effects has to be reset on onLeave 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: ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, eventType: string }) => void
Gets triggered when user moves on the component.

onEnter: (eventType: string) => void
Gets triggered when user enters the component.

onLeave: (eventType: string) => void
Gets triggered when user leaves the component.

Gyroscope - Device Orientation

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)
  • if you're using VS Code, then you can
    • use the in-built port-forwarding feature to expose your localhost to the internet and optionally change the protocol to https
    • alternatively, use microsoft's live-share extension which supports sharing server through a tunnel.
• it doesn't work in all browsers when using it in cross-origin <iframe> element

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:

<Tilt gyroscope={true}>
  <h1>React Parallax Tilt 👀</h1>
</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).

Development

Easily set up a local development environment!

Build project and start storybook on localhost:

• clone
• npm install
• npm start

Start coding! 🎉

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:

npm install
npm link react-parallax-tilt # link your local copy into this project's node_modules
npm start

Contributing

All contributions are welcome!
Please take a moment to review guidelines PR | Issues