👀 Easily apply tilt hover effect to React components - lightweight/zero dependencies 2.9kB
npm install react-parallax-tiltReact Tilt
👀 Easily apply tilt hover effects to React components
Live Demo 💥
Install
npm install react-parallax-tilt
Features
- Lightweight 2.9kB, 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, etc.) 🔗demo
- Event tracking for component values 📐 (tilt, glare, mousemove, etc.) 🔗demo
- Multiple built-in effects:
Example
import Tilt from 'react-parallax-tilt';
const App = () => {
return (
<Tilt>
<div style={{ height: '300px', backgroundColor: 'darkgreen' }}>
<h1>React Parallax Tilt 👀</h1>
</div>
</Tilt>
);
};
Props
All props are optional.
Here's the complete list of available props and their default values:
▶︎ indicates the default value
tiltEnable: boolean ▶︎ true
Enables/disables the tilt effect.
tiltReverse: boolean ▶︎ false
Reverses the tilt direction.
tiltAngleXInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the x-axis.
tiltAngleYInitial: number ▶︎ 0
Initial tilt angle (in degrees) on the y-axis.
tiltMaxAngleX: number ▶︎ 20
Maximum tilt rotation (in degrees) on the x-axis. Range: 0°-90°.
tiltMaxAngleY: number ▶︎ 20
Maximum tilt rotation (in degrees) on the y-axis. Range: 0°-90°.
tiltAxis: 'x' | 'y' ▶︎ undefined
Enables tilt on a single axis only.
tiltAngleXManual: number | null ▶︎ null
Manual tilt rotation (in degrees) on the x-axis.
tiltAngleYManual: number | null ▶︎ null
Manual tilt rotation (in degrees) on the y-axis.
glareEnable: boolean ▶︎ false
Enables/disables the glare effect.
glareMaxOpacity: number ▶︎ 0.7
Maximum glare opacity (0.5 = 50%, 1 = 100%). Range: 0-1
glareColor: string ▶︎ #ffffff
Sets the color of the glare effect.
glarePosition: 'top' | 'right' | 'bottom' | 'left' | 'all' ▶︎ bottom
Sets the position of the glare effect.
glareReverse: boolean ▶︎ false
Reverses the glare direction.
glareBorderRadius: string ▶︎ 0
Sets the border radius of the glare. Accepts any standard CSS border radius value.
scale: number ▶︎ 1
Scale of the component (1.5 = 150%, 2 = 200%).
perspective: number ▶︎ 1000
Defines how far the tilt component appears from the user. Lower values create more extreme tilt effects.
flipVertically: boolean ▶︎ false
Enables/disables vertical flipping of the component.
flipHorizontally: boolean ▶︎ false
Enables/disables horizontal flipping of the component.
reset: boolean ▶︎ true
Determines if effects should reset on onLeave event.
transitionEasing: string ▶︎ cubic-bezier(.03,.98,.52,.99)
Easing function for the transition.
transitionSpeed: number ▶︎ 400
Speed of the transition.
trackOnWindow: boolean ▶︎ false
Tracks mouse and touch events across the entire window.
gyroscope: boolean ▶︎ false
Enables/disables device orientation detection.
onMove: ({ tiltAngleX: number, tiltAngleY: number, tiltAngleXPercentage: number, tiltAngleYPercentage: number, glareAngle: number, glareOpacity: number, event: Event }) => void
Callback triggered when user moves on the component.
onEnter: (event: Event) => void
Callback triggered when user enters the component.
onLeave: (event: Event) => void
Callback triggered when user leaves the component.
Gyroscope - Device Orientation
Please note that device orientation detection is currently experimental technology.
Check the browser compatibility before using it in production.
Important considerations when using device orientation:
- Always use secure origins (such as
https) - It may not work in all browsers when used within a cross-origin
<iframe>element
Device Orientation on iOS 13+
Apple disabled device motion and orientation by default starting with iOS 12.2.
iOS 13+ provides a permission API to access device orientation events.
When using the gyroscope feature:
<Tilt gyroscope={true}>
<h1>React Parallax Tilt 👀</h1>
</Tilt>
A permission dialog will prompt the user to allow motion and orientation access at the domain level:
Note: User interaction (like tapping a button) is required to display the permission dialog - it cannot be triggered automatically on page load.
Development
Easily set up a local development environment!
Build project and start storybook on localhost:
- clone
npm installnpm start
Start coding! 🎉
Alternative setup using npm link
Clone this repository and navigate to its location
Run the following commands:
npm install npm link # link your local repo to your global packages npm run build:watch # build the files and watch for changesClone the project you want to test with react-parallax-tilt 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 review contribution guidelines: Pull Requests | Issues