React Parallax Tilt

👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
Alternatives To React Parallax Tilt
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
528 months ago24November 09, 201747mitJavaScript
A tiny 60+fps parallax tilt hover effect for jQuery.
React Scroll Parallax2,393152262 months ago103August 09, 20223mitTypeScript
🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
React Native Dribbble App2,014
2 years ago19mitJavaScript
Dribbble app built with React Native
a year ago17February 17, 20224mitJavaScript
Stunning touch-friendly 3D parallax hover effects
Sticky Parallax Header1,514
17 days ago72July 06, 202221mitTypeScript
A simple React Native library, enabling the creation of fully customized header for your iOS and Android apps.
Gatsby Starter Portfolio Cara1,351
5 days ago0bsdTypeScript
Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.
React Springy Parallax1,3242465 years ago15March 20, 20184mitJavaScript
🌊 A springy, composable parallax-scroller for React - deprecated
React Parallax Tilt731282 days ago220July 15, 2022mitTypeScript
👀 Easily apply tilt hover effect on React components - lightweight/zero dependencies (3kB)
React Plx631354a month ago55June 19, 20222mitTypeScript
React parallax component, powerful and lightweight
3 years ago1
React Native的中文参考资料,包括开源库,文字/视频资料,相关工具等
Alternatives To React Parallax Tilt
Select To Compare

Alternative Project Comparisons

React Tilt

npm version npm downloads npm bundle size Open issues TypeScript semantic-release

CI CI CI CI Codecov Coverage


_ Easily apply tilt hover effect on React components_



npm install react-parallax-tilt


  • Lightweight (3kB), zero dependencies
  • 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


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

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

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


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: Function => ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, eventType: string }) => void
Gets triggered when user moves on the component.

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

onLeave: Function => (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)
  • it doesn't work in all browsers when using it in cross-origin <iframe> element
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:

<Tilt gyroscope={true}>
  <h1>React Parallax Tilt </h1>

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 project and start storybook on localhost:

  • clone
  • npm install
  • npm start

Start coding!

Or setup with npm link Clone this repo on your machine, navigate to its location in the terminal and run:
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


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

Popular Reactjs Projects
Popular Parallax Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.