tilt-react 🪄
A tiny requestAnimationFrame powered 60+fps lightweight parallax hover tilt effect for React.
![react-tilt demo gif](https://github.com/jonathandion/react-tilt/blob/master/demo.gif)
Demo
Install
pnpm add react-tilt react react-dom
npm install react-tilt react react-dom
yarn add react-tilt react react-dom
Usage
import { Tilt } from '@jdion/tilt-react'
const defaultOptions = {
reverse: false,
max: 35,
perspective: 1000,
scale: 1.1,
speed: 1000,
transition: true,
axis: null,
reset: true,
easing: 'cubic-bezier(.03,.98,.52,.99)',
}
const App = () => {
return (
<Tilt options={defaultOptions} style={{ height: 250, width: 250 }}>
<div>👽</div>
</Tilt>
)
}
Props
Property | Signature |
---|
onMouseEnter | (event: React.SyntheticEvent) -> void |
onMouseMove | (event: React.SyntheticEvent) -> void |
onMouseLeave | (event: React.SyntheticEvent) -> void |
options | Options |
Alternatives
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.