react-tilt-3d

(Image card in example is a creation from @mpcproxies user on reddit)

🚀 Features

• Highly customizable component via props:
  • Scale when tilting
  • Stop tilting when cursor leaves window
  • Stop tilting when cursor distance from object exceeds limit
  • Stop tilting when cursor hovers the object
  • Tilt in all axis or only in one (x or y)
  • Customize how much you want it to tilt
  • Customize the action radius
  • Customize the transition timing function
• Events onTiltStart, onTiltEnd, and onTiltChange
• Compatible with touch devices
• Can use device gyroscope to apply tilting (if device has gyroscope)
• Apply the tilt effect to anything used as children.
• Applies a lighting effect to reinforce the 3d-effect.
• Strongly typed
• Experiment as much as you want with the demo page

📦 Installation

npm i react-tilt-3d
yarn add react-tilt-3d

✨ Usage

Just wrap your content with Tilt3D:

import { Tilt3D } from 'react-tilt-3d';

const MyComponent = () => {
  return (
    <Tilt3D>
      <SomeOtherComponent />
    </Tilt3D>
  );
};

🛠️ Customization

Several customizations can be made via props:

prop	type	description	required	default
maxTilt	number	Maximum amount of degrees the element will tilt	false	25
resetTiltOnOutOfBounds	boolean	Determines if the tilt should reset to 0 if the cursor or pointer exceeds a distance from the element	false	false
resetTiltOnHover	boolean	Determines if the tilt should reset to 0 if the cursor or pointer hover the element. (Note that if actionOffset is 0 and resetTiltOnHover is set to true, no tilt will be ever show)	false	false
actionOffset	number	Distance away from the center in which the tilt will be maxTilt.	false	0
zoomOnTilt	boolean	If true, the element will scale when it is tilting	false	false
zoomScale	number	Amount of scaling the element will do with zoomOnTilt. (Recommended values between 1 and 1.5)	false	1.25
lockAxisX	boolean	If true, the element will not tilt in the X axis.	false	false
lockAxisY	boolean	If true, the element will not tilt in the Y axis.	false	false
transition	string	Transition timing function to apply to the movement. Specially visible when the tilt resets to 0,0	false	ease-out
enableGyro	boolean	If the device has gyroscope, this will apply the tilt effect when the device is phisically tilted. Have in mind that gyro mode will ignore other configuration parameters like resetTiltOnHover, resetTiltOnOutOfBounds, actionOffset, zoomOnTilt, zoomScale, lockAxisX and lockAxisY	false	false
onTiltChange	({x: number, y: number}) => void	Callback to be executed every time the tilt changes.	false
onTiltStart	() => void	Callback to be executed every time the tilt starts	false
onTiltEnd	() => void	Callback to be executed every time the tilt ends and returns to 0	false
className	string	classname to apply to the wrapper	false
children	ReactNode	The content to apply the tilt.	false

About gyro mode

By passing the prop enableGyro the tilting effect can be applied by reading directly from the device sensors. While this can work out-of-the box for some devices, others (iOS) may require to explicitly request for permissions.

You can either do it manually (request permissions for DeviceOrientationEvent) or you can use the function requestGyroPermission exported by this library.

import { requestGyroPermission } from 'react-tilt-3d