react-tilt 🪄

A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for ReactJS.

Demo

• Reddit NTFs
• VX Demo

Install

pnpm add react-tilt react react-dom
# or
npm install react-tilt react react-dom
# or
yarn add react-tilt react react-dom

Usage

import { Tilt } from 'react-tilt'

const defaultOptions = {
    reverse:        false,  // reverse the tilt direction
    max:            35,     // max tilt rotation (degrees)
    perspective:    1000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:          1.1,    // 2 = 200%, 1.5 = 150%, etc..
    speed:          1000,   // Speed of the enter/exit transition
    transition:     true,   // Set a transition on enter/exit.
    axis:           null,   // What axis should be disabled. Can be X or Y.
    reset:          true,    // If the tilt effect has to be reset on exit.
    easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
}

const App = () => {
  return (
    <Tilt options={defaultOptions} style={{ height: 250, width: 250 }}>
      <div>👽</div>
    </Tilt>
  )
}

Props

Alternatives

• JQuery JS version: https://github.com/gijsroge/tilt.js
• Vanilla JS version: https://github.com/micku7zu/vanilla-tilt.js

Check Also

• Web Configs - Monorepo for all common configurations for building web apps.
• My Neovim Config - Small Neovim configuration written in Lua that is specifically designed for web development.