tilt-react-wrapper

Basic usage

import { Tilt } from "tilt-react-wrapper";
//...
export default function () {
  return (
    <Tilt>
      <div className="tilt">
        <h1>Hello tilt</h1>
      </div>
    </Tilt>
  );
}

You should add the 'tilt' className in the child components you want the effect to work on

Passing props

import { Tilt } from "tilt-react-wrapper";
//...
export default function () {
  return (
    <Tilt 
      glare={true} 
      revert={true}
    >
      <div className="tilt">
        <h1>Hello tilt</h1>
      </div>
    </Tilt>
  );
}

All available props and it's default values

{
  reverse: false,
  max: 35,
  startX: 0,
  startY: 0,
  perspective: 1000,
  scale: 1,
  speed: 300,
  transition: true,
  axis: null,
  reset: true,
  easing: "cubic-bezier(.03,.98,.52,.99)",
  glare: false,
  maxGlare: 1,
  glarePrerender: false,
  mouseEventElement: null,
  gyroscope: true,
  gyroscopeMinAngleX: -45,
  gyroscopeMaxAngleX: 45,
  gyroscopeMinAngleY: -45,
  gyroscopeMaxAngleY: 45,
}

You can check out the vanilla-tilt documentation for more information about config props

Callback functions still not supported