@jdion/tilt-react
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

tilt-react 🪄

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

react-tilt downloads react-tilt version Jonathan Dion Twitter

react-tilt demo gif

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 '@jdion/tilt-react'

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

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.

Package Sidebar

Install

npm i @jdion/tilt-react

Weekly Downloads

36,916

Version

1.0.0

License

MIT

Unpacked Size

10.8 kB

Total Files

8

Last publish

Collaborators

  • jonathandion