react-parallax-tilt

To use the tilt effects in your React project, install the package using npm:

npm install react-parallax-tilt

You can enable device orientation detection by setting the gyroscope prop to true.

Important Considerations:

• Device orientation detection is experimental; check browser compatibility.
• Always use secure origins (https).
• It may not work within cross-origin <iframe> elements.
• iOS 13+ Support: Apple requires a permission dialog. This dialog cannot be triggered automatically on page load; it must be triggered by a user interaction (e.g., a button tap).

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

Wrap any React component with the Tilt component to apply hover-based parallax effects. The Tilt component acts as a wrapper for the content you want to tilt.

import Tilt from 'react-parallax-tilt';

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

The GlareProps type defines the configuration for the glare visual effect. You can use these props to control the visibility, opacity, color, position, and shape of the glare overlay on the tilted element.

Available Props

The TiltProps type defines the configuration options for the tilt effect. You can control whether the effect is enabled, reverse the direction, set initial angles, define maximum rotation limits, restrict tilt to a single axis, or provide manual rotation values.

// Example usage of TiltProps
const props: TiltProps = {
  tiltEnable: true,
  tiltReverse: false,
  tiltMaxAngleX: 25,
  tiltMaxAngleY: 25,
  tiltAxis: 'x' // Restricts tilt to the x-axis
};

The ReactParallaxTilt component accepts several props to control the tilt effect, glare effect, and general styling. It extends TiltProps and GlareProps and includes standard HTML attributes for div elements like className and style.

<ReactParallaxTilt
  scale={1.2}
  perspective={500}
  flipVertically={false}
  flipHorizontally={false}
  reset={true}
  transitionEasing="ease-in-out"
  transitionSpeed={250}
  trackOnWindow={false}
  gyroscope={false}
  onMove={({ tiltAngleX, tiltAngleY }) => console.log(tiltAngleX, tiltAngleY)}
  onEnter={({ event }) => console.log('Entered', event)}
  onLeave={({ event }) => console.log('Left', event)}
>
  <div>Your Content</div>
</ReactParallaxTilt>

The following properties are available in the TiltProps object:

type TiltProps = {
  /** Enables/disables the tilt effect. */
  tiltEnable?: boolean;
  /** Reverses the tilt direction. */
  tiltReverse?: boolean;
  /** Initial tilt angle (in degrees) on the x-axis. */
  tiltAngleXInitial?: number;
  /** Initial tilt angle (in degrees) on the y-axis. */
  tiltAngleYInitial?: number;
  /** Maximum tilt rotation (in degrees) on the x-axis (range: `0°-90°`). */
  tiltMaxAngleX?: number;
  /** Maximum tilt rotation (in degrees) on the y-axis (range: `0°-90°`). */
  tiltMaxAngleY?: number;
  /** Enables tilt on a single axis only. */
  tiltAxis?: Axis;
  /** Manual tilt rotation (in degrees) on the x-axis. */
  tiltAngleXManual?: number | null;
  /** Manual tilt rotation (in degrees) on the y-axis. */
  tiltAngleYManual?: number | null;
};

The onMove prop is a callback function triggered whenever the user moves over the component. It provides detailed information about the current tilt angles and glare state.

type OnMoveParams = {
  tiltAngleX: number;
  tiltAngleY: number;
  tiltAngleXPercentage: number;
  tiltAngleYPercentage: number;
  glareAngle: number;
  glareOpacity: number;
  event: SupportedEvent;
};

type OnMove = (onMoveParams: OnMoveParams) => void;

The Axis type can be used with the tiltAxis prop to restrict the tilt effect to a single dimension.

type Axis = 'x' | 'y';

The onEnter and onLeave props are callbacks triggered when the user's pointer (mouse or touch) enters or leaves the component's area. Both provide an event object containing the original MouseEvent, React.MouseEvent, TouchEvent, or React.TouchEvent.

type OnEnterParams = {
  event: MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent;
};

type OnEnter = (onEnterParams: OnEnterParams) => void;

type OnLeaveParams = {
  event: MouseEvent | React.MouseEvent | TouchEvent | React.TouchEvent;
};

type OnLeave = (onLeaveParams: OnLeaveParams) => void;